Contents

// ---------------------------------------------------------------------------
// imports

@import "compass/css3/animation";
@import "compass/css3/opacity";

// ---------------------------------------------------------------------------
// flipIn [ x | y | all ]

@mixin animate-flipIn($sub: all, $class: $default-animation-class-mode) {
  $sub  : compact($sub);
  $x    : yepnope($sub, all x);
  $y    : yepnope($sub, all y);
  @if $x  { @include animate-flipInX  (all, $class); } 
  @if $y  { @include animate-flipInY  (all, $class); } 
}

// ---------------------------------------------------------------------------
// flipInX

@mixin animate-flipInX($class: $default-animation-class-mode) {
  $name: flipInX;
  @include keyframes($name) {
    0% {
      @include transform(perspective(400px) rotateX(90deg));
      @include opacity(0);
    }
    40% {
      @include transform(perspective(400px) rotateX(-10deg));
    }
    70% {
      @include transform(perspective(400px) rotateX(10deg));
    }
    100% {
      @include transform(perspective(400px) rotateX(0deg));
      @include opacity(1);
    }
  }
  @include flip-class($name, $class);
}

// ---------------------------------------------------------------------------
// flipInY

@mixin animate-flipInY($class: $default-animation-class-mode) {
  $name: flipInY;
  @include keyframes($name) {
    0% {
      @include transform(perspective(400px) rotateY(90deg));
      @include opacity(0);
    }
    40% {
      @include transform(perspective(400px) rotateY(-10deg));
    }
    70% {
      @include transform(perspective(400px) rotateY(10deg));
    }
    100% {
      @include transform(perspective(400px) rotateY(0deg));
      @include opacity(1);
    }
  }
  @include flip-class($name, $class);
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
animate-0.1.0	stylesheets/animate/flip/_flipIn.scss