animate 0.1.0 → 0.2.beta.0

data/stylesheets/animate/lightSpeed/_lightSpeedIn.scss

@@ -8,25 +8,30 @@
 // ---------------------------------------------------------------------------
 // lightSpeedIn
 
-@mixin animate-lightSpeedIn($class: $default-animation-class-mode) {
+@mixin animate-lightSpeedIn(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $name: lightSpeedIn;
-  @include keyframes($name) {
-    0% {
-      @include transform(translateX(100%) skewX(-30deg));
-      @include opacity(0); 
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include transform(translateX(100%) skewX(-30deg));
+        @include opacity(0);
+      }
+      60% {
+        @include transform(translateX(-20%) skewX(30deg));
+        @include opacity(1);
+      }
+      80% {
+        @include transform(translateX(0%) skewX(-15deg));
+        @include opacity(1);
+      }
+      100% {
+        @include transform(translateX(0%) skewX(0deg));
+        @include opacity(1);
+      }
     }
-    60% {
-      @include transform(translateX(-20%) skewX(30deg));
-      @include opacity(1); 
-    }
-    80% {
-      @include transform(translateX(0%) skewX(-15deg));
-      @include opacity(1); 
-    }
-    100% {
-      @include transform(translateX(0%) skewX(0deg));
-      @include opacity(1); 
-    } 
   }
   @include animation-class($name, $class) {}
 }

data/stylesheets/animate/lightSpeed/_lightSpeedOut.scss

@@ -8,17 +8,22 @@
 // ---------------------------------------------------------------------------
 // lightSpeedOut
 
-@mixin animate-lightSpeedOut($class: $default-animation-class-mode) {
+@mixin animate-lightSpeedOut(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $name: lightSpeedOut;
-  @include keyframes($name) {
-    0% {
-      @include transform(translateX(0%) skewX(0deg));
-      @include opacity(1); 
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include transform(translateX(0%) skewX(0deg));
+        @include opacity(1);
+      }
+      100% {
+        @include transform(translateX(100%) skewX(-30deg));
+        @include opacity(0);
+      }
     }
-    100% {
-      @include transform(translateX(100%) skewX(-30deg));
-      @include opacity(0); 
-    } 
   }
   @include animation-class($name, $class) {}
 }

data/stylesheets/animate/roll/_rollIn.scss

@@ -8,16 +8,21 @@
 // ---------------------------------------------------------------------------
 // rollIn
 
-@mixin animate-rollIn($class: $default-animation-class-mode) {
+@mixin animate-rollIn(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $name: rollIn;
-  @include keyframes($name) {
-    0% {
-      @include opacity(0);
-      @include transform(translateX(-100%) rotate(-120deg)); 
-    }
-    100% {
-      @include opacity(1);
-      @include transform(translateX(0px) rotate(0deg));
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include opacity(0);
+        @include transform(translateX(-100%) rotate(-120deg));
+      }
+      100% {
+        @include opacity(1);
+        @include transform(translateX(0px) rotate(0deg));
+      }
     }
   }
   @include animation-class($name, $class) {}

data/stylesheets/animate/roll/_rollOut.scss

@@ -8,15 +8,20 @@
 // ---------------------------------------------------------------------------
 // rollOut
 
-@mixin animate-rollOut($class: $default-animation-class-mode) {
+@mixin animate-rollOut(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $name: rollOut;
-  @include keyframes($name) {
-    0% {
-      @include opacity(1);
-      @include transform(translateX(0px) rotate(0deg)); }
-    100% {
-      @include opacity(0);
-      @include transform(translateX(-100%) rotate(-120deg));
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include opacity(1);
+        @include transform(translateX(0px) rotate(0deg)); }
+      100% {
+        @include opacity(0);
+        @include transform(translateX(-100%) rotate(-120deg));
+      }
     }
   }
   @include animation-class($name, $class) {}

data/stylesheets/animate/rotate/_rotateIn.scss

@@ -6,10 +6,14 @@
 @import "compass/css3/opacity";
 
 // ---------------------------------------------------------------------------
-// rotateIn [ only | up | down | left | right | 
+// rotateIn [ only | up | down | left | right |
 //            downLeft | downRight | upLeft | upRight | all ]
 
-@mixin animate-rotateIn($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-rotateIn(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub        : compact($sub);
   $only       : yepnope($sub, all only);
   $downLeft   : yepnope($sub, all down left downLeft);
@@ -17,24 +21,26 @@
   $upLeft     : yepnope($sub, all up left upLeft);
   $upRight    : yepnope($sub, all up right upRight);
 
-  @if $downLeft   { @include animate-rotateInDownLeft   ($class); } 
-  @if $downRight  { @include animate-rotateInDownRight  ($class); } 
-  @if $upLeft     { @include animate-rotateInUpLeft     ($class); } 
-  @if $upRight    { @include animate-rotateInUpRight    ($class); } 
+  @if $downLeft   { @include animate-rotateInDownLeft   ($class, $keyframes); }
+  @if $downRight  { @include animate-rotateInDownRight  ($class, $keyframes); }
+  @if $upLeft     { @include animate-rotateInUpLeft     ($class, $keyframes); }
+  @if $upRight    { @include animate-rotateInUpRight    ($class, $keyframes); }
 
   $name: rotateIn;
   @if $only {
-    @include keyframes($name) {
-      0% {
-        @include transform-origin(center, center);
-        @include rotate(-200deg);
-        opacity: 0; 
+    @if $keyframes {
+      @include keyframes($name) {
+        0% {
+          @include transform-origin(center, center);
+          @include rotate(-200deg);
+          opacity: 0;
+        }
+        100% {
+          @include transform-origin(center, center);
+          @include rotate(0);
+          opacity: 1;
+        }
       }
-      100% {
-        @include transform-origin(center, center);
-        @include rotate(0);
-        opacity: 1; 
-      } 
     }
     @include animation-class($name, $class) {}
   }
@@ -43,64 +49,85 @@
 // ---------------------------------------------------------------------------
 // rotateInUp [ left | right | all ]
 
-@mixin animate-rotateInUp($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-rotateInUp(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub    : compact($sub);
   $left   : yepnope($sub, all left);
   $right  : yepnope($sub, all right);
-  @if $left   { @include animate-rotateInUpLeft   ($class); } 
-  @if $right  { @include animate-rotateInUpRight  ($class); } 
+  @if $left   { @include animate-rotateInUpLeft   ($class, $keyframes); }
+  @if $right  { @include animate-rotateInUpRight  ($class, $keyframes); }
 }
 
 // ---------------------------------------------------------------------------
 // rotateInDown [ left | right | all ]
 
-@mixin animate-rotateInDown($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-rotateInDown(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub    : compact($sub);
   $left   : yepnope($sub, all left);
   $right  : yepnope($sub, all right);
-  @if $left   { @include animate-rotateInDownLeft   ($class); } 
-  @if $right  { @include animate-rotateInDownRight  ($class); } 
+  @if $left   { @include animate-rotateInDownLeft   ($class, $keyframes); }
+  @if $right  { @include animate-rotateInDownRight  ($class, $keyframes); }
 }
 
 
 // ---------------------------------------------------------------------------
 // rotateInLeft [ up | down | all ]
 
-@mixin animate-rotateInLeft($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-rotateInLeft(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub    : compact($sub);
   $up     : yepnope($sub, all up);
   $down   : yepnope($sub, all down);
-  @if $up   { @include animate-rotateInUpLeft   ($class); } 
-  @if $down { @include animate-rotateInDownLeft ($class); } 
+  @if $up   { @include animate-rotateInUpLeft   ($class, $keyframes); }
+  @if $down { @include animate-rotateInDownLeft ($class, $keyframes); }
 }
 
 // ---------------------------------------------------------------------------
 // rotateInRight [ up | down | all ]
 
-@mixin animate-rotateInRight($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-rotateInRight(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub    : compact($sub);
   $up     : yepnope($sub, all up);
   $down   : yepnope($sub, all down);
-  @if $up   { @include animate-rotateInUpRight    ($class); } 
-  @if $down { @include animate-rotateInDownRight  ($class); } 
+  @if $up   { @include animate-rotateInUpRight    ($class, $keyframes); }
+  @if $down { @include animate-rotateInDownRight  ($class, $keyframes); }
 }
 
 // ---------------------------------------------------------------------------
 // rotateInDownLeft
 
-@mixin animate-rotateInDownLeft($class: $default-animation-class-mode) {
+@mixin animate-rotateInDownLeft(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $name: rotateInDownLeft;
-  @include keyframes($name) {
-    0% {
-      @include transform-origin(left, bottom);
-      @include rotate(-90deg);
-      opacity: 0; 
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include transform-origin(left, bottom);
+        @include rotate(-90deg);
+        opacity: 0;
+      }
+      100% {
+        @include transform-origin(left, bottom);
+        @include rotate(0);
+        opacity: 1;
+      }
     }
-    100% {
-      @include transform-origin(left, bottom);
-      @include rotate(0);
-      opacity: 1; 
-    } 
   }
   @include animation-class($name, $class) {}
 }
@@ -108,19 +135,24 @@
 // ---------------------------------------------------------------------------
 // rotateInUpLeft
 
-@mixin animate-rotateInUpLeft($class: $default-animation-class-mode) {
+@mixin animate-rotateInUpLeft(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $name: rotateInUpLeft;
-  @include keyframes($name) {
-    0% {
-      @include transform-origin(left, bottom);
-      @include rotate(90deg);
-      opacity: 0; 
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include transform-origin(left, bottom);
+        @include rotate(90deg);
+        opacity: 0;
+      }
+      100% {
+        @include transform-origin(left, bottom);
+        @include rotate(0);
+        opacity: 1;
+      }
     }
-    100% {
-      @include transform-origin(left, bottom);
-      @include rotate(0);
-      opacity: 1; 
-    } 
   }
   @include animation-class($name, $class) {}
 }
@@ -128,19 +160,24 @@
 // ---------------------------------------------------------------------------
 // rotateInUpRight
 
-@mixin animate-rotateInUpRight($class: $default-animation-class-mode) {
+@mixin animate-rotateInUpRight(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $name: rotateInUpRight;
-  @include keyframes($name) {
-    0% {
-      @include transform-origin(right, bottom);
-      @include rotate(-90deg);
-      opacity: 0; 
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include transform-origin(right, bottom);
+        @include rotate(-90deg);
+        opacity: 0;
+      }
+      100% {
+        @include transform-origin(right, bottom);
+        @include rotate(0);
+        opacity: 1;
+      }
     }
-    100% {
-      @include transform-origin(right, bottom);
-      @include rotate(0);
-      opacity: 1; 
-    } 
   }
   @include animation-class($name, $class) {}
 }
@@ -148,19 +185,24 @@
 // ---------------------------------------------------------------------------
 // rotateInDownRight
 
-@mixin animate-rotateInDownRight($class: $default-animation-class-mode) {
+@mixin animate-rotateInDownRight(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $name: rotateInDownRight;
-  @include keyframes($name) {
-    0% {
-      @include transform-origin(right, bottom);
-      @include rotate(90deg);
-      opacity: 0; 
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include transform-origin(right, bottom);
+        @include rotate(90deg);
+        opacity: 0;
+      }
+      100% {
+        @include transform-origin(right, bottom);
+        @include rotate(0);
+        opacity: 1;
+      }
     }
-    100% {
-      @include transform-origin(right, bottom);
-      @include rotate(0);
-      opacity: 1; 
-    } 
   }
   @include animation-class($name, $class) {}
 }

data/stylesheets/animate/rotate/_rotateOut.scss

@@ -6,10 +6,14 @@
 @import "compass/css3/opacity";
 
 // ---------------------------------------------------------------------------
-// rotateOut [ only | up | down | left | right | 
+// rotateOut [ only | up | down | left | right |
 //            downLeft | downRight | upLeft | upRight | all ]
 
-@mixin animate-rotateOut($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-rotateOut(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub        : compact($sub);
   $only       : yepnope($sub, all only);
   $downLeft   : yepnope($sub, all down left downLeft);
@@ -17,23 +21,25 @@
   $upLeft     : yepnope($sub, all up left upLeft);
   $upRight    : yepnope($sub, all up right upRight);
 
-  @if $downLeft   { @include animate-rotateOutDownLeft   ($class); } 
-  @if $downRight  { @include animate-rotateOutDownRight  ($class); } 
-  @if $upLeft     { @include animate-rotateOutUpLeft     ($class); } 
-  @if $upRight    { @include animate-rotateOutUpRight    ($class); } 
+  @if $downLeft   { @include animate-rotateOutDownLeft   ($class, $keyframes); }
+  @if $downRight  { @include animate-rotateOutDownRight  ($class, $keyframes); }
+  @if $upLeft     { @include animate-rotateOutUpLeft     ($class, $keyframes); }
+  @if $upRight    { @include animate-rotateOutUpRight    ($class, $keyframes); }
 
   $name: rotateOut;
   @if $only {
-    @include keyframes($name) {
-      0% {
-        @include transform-origin(center, center);
-        @include rotate(0);
-        opacity: 1; 
-      }
-      100% {
-        @include transform-origin(center, center);
-        @include rotate(200deg);
-        opacity: 0; 
+    @if $keyframes {
+      @include keyframes($name) {
+        0% {
+          @include transform-origin(center, center);
+          @include rotate(0);
+          opacity: 1;
+        }
+        100% {
+          @include transform-origin(center, center);
+          @include rotate(200deg);
+          opacity: 0;
+        }
       }
     }
     @include animation-class($name, $class) {}
@@ -43,64 +49,85 @@
 // ---------------------------------------------------------------------------
 // rotateOutUp [ left | right | all ]
 
-@mixin animate-rotateOutUp($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-rotateOutUp(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub    : compact($sub);
   $left   : yepnope($sub, all left);
   $right  : yepnope($sub, all right);
-  @if $left   { @include animate-rotateOutUpLeft  ($class); } 
-  @if $right  { @include animate-rotateOutUpRight ($class); } 
+  @if $left   { @include animate-rotateOutUpLeft  ($class, $keyframes); }
+  @if $right  { @include animate-rotateOutUpRight ($class, $keyframes); }
 }
 
 // ---------------------------------------------------------------------------
 // rotateOutDown [ left | right | all ]
 
-@mixin animate-rotateOutDown($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-rotateOutDown(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub    : compact($sub);
   $left   : yepnope($sub, all left);
   $right  : yepnope($sub, all right);
-  @if $left   { @include animate-rotateOutDownLeft  ($class); } 
-  @if $right  { @include animate-rotateOutDownRight ($class); } 
+  @if $left   { @include animate-rotateOutDownLeft  ($class, $keyframes); }
+  @if $right  { @include animate-rotateOutDownRight ($class, $keyframes); }
 }
 
 
 // ---------------------------------------------------------------------------
 // rotateOutLeft [ up | down | all ]
 
-@mixin animate-rotateOutLeft($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-rotateOutLeft(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub    : compact($sub);
   $up     : yepnope($sub, all up);
   $down   : yepnope($sub, all down);
-  @if $up   { @include animate-rotateOutUpLeft    ($class); } 
-  @if $down { @include animate-rotateOutDownLeft  ($class); } 
+  @if $up   { @include animate-rotateOutUpLeft    ($class, $keyframes); }
+  @if $down { @include animate-rotateOutDownLeft  ($class, $keyframes); }
 }
 
 // ---------------------------------------------------------------------------
 // rotateOutRight [ up | down | all ]
 
-@mixin animate-rotateOutRight($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-rotateOutRight(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub    : compact($sub);
   $up     : yepnope($sub, all up);
   $down   : yepnope($sub, all down);
-  @if $up   { @include animate-rotateOutUpRight     ($class); } 
-  @if $down { @include animate-rotateOutDownRight   ($class); } 
+  @if $up   { @include animate-rotateOutUpRight     ($class, $keyframes); }
+  @if $down { @include animate-rotateOutDownRight   ($class, $keyframes); }
 }
 
 // ---------------------------------------------------------------------------
 // rotateOutDownLeft
 
-@mixin animate-rotateOutDownLeft($class: $default-animation-class-mode) {
+@mixin animate-rotateOutDownLeft(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $name: rotateOutDownLeft;
-  @include keyframes($name) {
-    0% {
-      @include transform-origin(left, bottom);
-      @include rotate(0);
-      opacity: 1; 
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include transform-origin(left, bottom);
+        @include rotate(0);
+        opacity: 1;
+      }
+      100% {
+        @include transform-origin(left, bottom);
+        @include rotate(90deg);
+        opacity: 0;
+      }
     }
-    100% {
-      @include transform-origin(left, bottom);
-      @include rotate(90deg);
-      opacity: 0; 
-    } 
   }
   @include animation-class($name, $class) {}
 }
@@ -108,19 +135,24 @@
 // ---------------------------------------------------------------------------
 // rotateOutUpLeft
 
-@mixin animate-rotateOutUpLeft($class: $default-animation-class-mode) {
+@mixin animate-rotateOutUpLeft(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $name: rotateOutUpLeft;
-  @include keyframes($name) {
-    0% {
-      @include transform-origin(left, bottom);
-      @include rotate(0);
-      opacity: 1; 
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include transform-origin(left, bottom);
+        @include rotate(0);
+        opacity: 1;
+      }
+      100% {
+        @include transform-origin(left, bottom);
+        @include rotate(-90deg);
+        opacity: 0;
+      }
     }
-    100% {
-      @include transform-origin(left, bottom);
-      @include rotate(-90deg);
-      opacity: 0; 
-    } 
   }
   @include animation-class($name, $class) {}
 }
@@ -128,19 +160,24 @@
 // ---------------------------------------------------------------------------
 // rotateOutDownRight
 
-@mixin animate-rotateOutDownRight($class: $default-animation-class-mode) {
+@mixin animate-rotateOutDownRight(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $name: rotateOutDownRight;
-  @include keyframes($name) {
-    0% {
-      @include transform-origin(right, bottom);
-      @include rotate(0);
-      opacity: 1; 
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include transform-origin(right, bottom);
+        @include rotate(0);
+        opacity: 1;
+      }
+      100% {
+        @include transform-origin(right, bottom);
+        @include rotate(-90deg);
+        opacity: 0;
+      }
     }
-    100% {
-      @include transform-origin(right, bottom);
-      @include rotate(-90deg);
-      opacity: 0; 
-    } 
   }
   @include animation-class($name, $class) {}
 }
@@ -148,19 +185,24 @@
 // ---------------------------------------------------------------------------
 // rotateOutUpRight
 
-@mixin animate-rotateOutUpRight($class: $default-animation-class-mode) {
+@mixin animate-rotateOutUpRight(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $name: rotateOutUpRight;
-  @include keyframes($name) {
-    0% {
-      @include transform-origin(right, bottom);
-      @include rotate(0);
-      opacity: 1; 
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include transform-origin(right, bottom);
+        @include rotate(0);
+        opacity: 1;
+      }
+      100% {
+        @include transform-origin(right, bottom);
+        @include rotate(90deg);
+        opacity: 0;
+      }
     }
-    100% {
-      @include transform-origin(right, bottom);
-      @include rotate(90deg);
-      opacity: 0; 
-    } 
   }
   @include animation-class($name, $class) {}
 }