stylesheets/animate/_flip.scss in animate-0.1.0 vs stylesheets/animate/_flip.scss in animate-0.2.beta.0

@@ -6,79 +6,93 @@
     @include backface-visibility(visible);
   }
 }
 
 // ---------------------------------------------------------------------------
-// imports 
+// imports
 @import "compass/css3/animation";
 
 @import "flip/flipIn";
 @import "flip/flipOut";
 
 // ---------------------------------------------------------------------------
 // flip [ only | in | out | x | y | all |
-//        flipIn | flipInX | flipInY | 
+//        flipIn | flipInX | flipInY |
 //        flipOut | flipOutX | flipOutY |
 //        flipX | flipY ]
 
-@mixin animate-flip($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-flip(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub        : compact($sub);
   $only       : yepnope($sub, all only);
   $flipInX    : yepnope($sub, all flipIn flipInX flipX in x);
   $flipInY    : yepnope($sub, all flipIn flipInY flipY in y);
   $flipOutX   : yepnope($sub, all flipOut flipOutX flipX out x);
   $flipOutY   : yepnope($sub, all flipOut flipOutY flipY out y);
 
-  @if $flipInX    { @include animate-flipInX    ($class); } 
-  @if $flipInY    { @include animate-flipInY    ($class); } 
-  @if $flipOutX   { @include animate-flipOutX   ($class); } 
-  @if $flipOutY   { @include animate-flipOutY   ($class); } 
+  @if $flipInX    { @include animate-flipInX    ($class, $keyframes); }
+  @if $flipInY    { @include animate-flipInY    ($class, $keyframes); }
+  @if $flipOutX   { @include animate-flipOutX   ($class, $keyframes); }
+  @if $flipOutY   { @include animate-flipOutY   ($class, $keyframes); }
 
   $name: flip;
   @if $only {
-    @include keyframes($name) {
-      0% {
-        @include transform(perspective(400px) rotateY(0));
-        @include animation-timing-function(ease-out);
+    @if $keyframes {
+      @include keyframes($name) {
+        0% {
+          @include transform(perspective(400px) rotateY(0));
+          @include animation-timing-function(ease-out);
+        }
+        40% {
+          @include transform(perspective(400px) translateZ(150px) rotateY(170deg));
+          @include animation-timing-function(ease-out);
+        }
+        50% {
+          @include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1));
+          @include animation-timing-function(ease-in);
+        }
+        80% {
+          @include transform(perspective(400px) rotateY(360deg) scale(0.95));
+          @include animation-timing-function(ease-in);
+        }
+        100% {
+          @include transform(perspective(400px) scale(1));
+          @include animation-timing-function(ease-in);
+        }
       }
-      40% {
-        @include transform(perspective(400px) translateZ(150px) rotateY(170deg));
-        @include animation-timing-function(ease-out);
-      }
-      50% {
-        @include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1));
-        @include animation-timing-function(ease-in);
-      }
-      80% {
-        @include transform(perspective(400px) rotateY(360deg) scale(0.95));
-        @include animation-timing-function(ease-in);
-      }
-      100% {
-        @include transform(perspective(400px) scale(1));
-        @include animation-timing-function(ease-in);
-      }
     }
     @include flip-class($name, $class);
   }
 }
 
 // ---------------------------------------------------------------------------
 // flipX [ in | out | all ]
 
-@mixin animate-flipX($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-flipX(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub  : compact($sub);
   $in   : yepnope($sub, all in);
   $out  : yepnope($sub, all out);
-  @if $in   { @include animate-flipInX  (all, $class); } 
-  @if $out  { @include animate-flipOutX (all, $class); } 
+  @if $in   { @include animate-flipInX  (all, $class, $keyframes); }
+  @if $out  { @include animate-flipOutX (all, $class, $keyframes); }
 }
 
 // ---------------------------------------------------------------------------
 // flipY [ in | out | all ]
 
-@mixin animate-flipY($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-flipY(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub  : compact($sub);
   $in   : yepnope($sub, all in);
   $out  : yepnope($sub, all out);
-  @if $in   { @include animate-flipInY  (all, $class); } 
-  @if $out  { @include animate-flipOutY (all, $class); } 
+  @if $in   { @include animate-flipInY  (all, $class, $keyframes); }
+  @if $out  { @include animate-flipOutY (all, $class, $keyframes); }
 }