animate 0.1.0 → 0.2.beta.0

data/stylesheets/_animate.scss

@@ -18,23 +18,29 @@
 
 // ---------------------------------------------------------------------------
 // animate [ attention | bounce | fade | flip |
-//           lightSpeed | rotate | special | all ]
+//           lightSpeed | roll | rotate | special | all ]
 
-@mixin animate($sub: all, $class: $default-animation-class-mode) {
+@mixin animate(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub        : compact($sub);
   $attention  : yepnope($sub, all attention);
   $bounce     : yepnope($sub, all bounce);
   $fade       : yepnope($sub, all fade);
   $flip       : yepnope($sub, all flip);
   $lightSpeed : yepnope($sub, all lightSpeed);
+  $roll       : yepnope($sub, all roll);
   $rotate     : yepnope($sub, all rotate);
   $special    : yepnope($sub, all special);
-  @if $attention  { @include animate-attention  (all, $class); }
-  @if $bounce     { @include animate-bounce     (all, $class); }
-  @if $fade       { @include animate-fade       (all, $class); }
-  @if $flip       { @include animate-flip       (all, $class); }
-  @if $lightSpeed { @include animate-lightSpeed (all, $class); }
-  @if $rotate     { @include animate-rotate     (all, $class); }
-  @if $special    { @include animate-special    (all, $class); }
+  @if $attention  { @include animate-attention  (all, $class, $keyframes); }
+  @if $bounce     { @include animate-bounce     (all, $class, $keyframes); }
+  @if $fade       { @include animate-fade       (all, $class, $keyframes); }
+  @if $flip       { @include animate-flip       (all, $class, $keyframes); }
+  @if $lightSpeed { @include animate-lightSpeed (all, $class, $keyframes); }
+  @if $roll       { @include animate-roll       (all, $class, $keyframes); }
+  @if $rotate     { @include animate-rotate     (all, $class, $keyframes); }
+  @if $special    { @include animate-special    (all, $class, $keyframes); }
 }
 

data/stylesheets/_helpers.scss

@@ -1,8 +1,12 @@
 // ---------------------------------------------------------------------------
-// animation class mode: true | false | silent
+// settings
 
+// animation class mode: true | false | silent
 $default-animation-class-mode: silent !default;
 
+// keyframes output: true | false
+$default-keyframes-output: true;
+
 // ---------------------------------------------------------------------------
 // animated class for external use
 @mixin animated-class($class: $default-animation-class-mode) {
@@ -16,10 +20,10 @@ $default-animation-class-mode: silent !default;
 @mixin animation-class($name, $class: $default-animation-class-mode) {
   $selector: if($class == 'silent', '%', '.') + $name;
   @if $class {
-    #{$selector} { 
-      @include animation-name($name); 
+    #{$selector} {
+      @include animation-name($name);
       @content;
-    } 
+    }
   }
 }
 
@@ -31,7 +35,7 @@ $default-animation-class-mode: silent !default;
   $list     : compact($list);
   $return   : false;
   @each $arg in $args {
-    $return: if(index($list,$arg), true, $return); 
+    $return: if(index($list,$arg), true, $return);
   }
-  @return $return; 
+  @return $return;
 }

data/stylesheets/animate/_attention.scss

@@ -10,10 +10,14 @@
 @import "attention/wiggle";
 
 // ---------------------------------------------------------------------------
-// attention [ flash | shake | tada | 
+// attention [ flash | shake | tada |
 //             swing | wobble | pulse | wiggle ]
 
-@mixin animate-attention($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-attention(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub      : compact($sub);
   $flash    : yepnope($sub, all flash);
   $shake    : yepnope($sub, all shake);
@@ -22,11 +26,11 @@
   $wobble   : yepnope($sub, all wobble);
   $pulse    : yepnope($sub, all pulse);
   $wiggle   : yepnope($sub, all wiggle);
-  @if $flash    { @include animate-flash    ($class); } 
-  @if $shake    { @include animate-shake    ($class); } 
-  @if $tada     { @include animate-tada     ($class); } 
-  @if $swing    { @include animate-swing    ($class); } 
-  @if $wobble   { @include animate-wobble   ($class); } 
-  @if $pulse    { @include animate-pulse    ($class); } 
-  @if $wiggle   { @include animate-wiggle   ($class); } 
+  @if $flash    { @include animate-flash    ($class, $keyframes); }
+  @if $shake    { @include animate-shake    ($class, $keyframes); }
+  @if $tada     { @include animate-tada     ($class, $keyframes); }
+  @if $swing    { @include animate-swing    ($class, $keyframes); }
+  @if $wobble   { @include animate-wobble   ($class, $keyframes); }
+  @if $pulse    { @include animate-pulse    ($class, $keyframes); }
+  @if $wiggle   { @include animate-wiggle   ($class, $keyframes); }
 }

data/stylesheets/animate/_bounce.scss

@@ -7,11 +7,15 @@
 @import "bounce/bounceOut";
 
 // ---------------------------------------------------------------------------
-// bounce [ in | inUp | inDown | inLeft | inRight | 
+// bounce [ in | inUp | inDown | inLeft | inRight |
 //          out | outUp | outDown | outLeft | outRight |
 //          up | down | left | right | only | all ]
 
-@mixin animate-bounce($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-bounce(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub      : compact($sub);
   $only     : yepnope($sub, all only);
   $in       : yepnope($sub, all in);
@@ -24,41 +28,43 @@
   $outDown  : yepnope($sub, all out outDown down);
   $outLeft  : yepnope($sub, all out outLeft left);
   $outRight : yepnope($sub, all out outRight right);
-  @if $in         { @include animate-bounceIn       ($class); }
-  @if $inUp       { @include animate-bounceInUp     ($class); }
-  @if $inDown     { @include animate-bounceInDown   ($class); }
-  @if $inLeft     { @include animate-bounceInLeft   ($class); }
-  @if $inRight    { @include animate-bounceInRight  ($class); }
-  @if $out        { @include animate-bounceOut      ($class); }
-  @if $outUp      { @include animate-bounceOutUp    ($class); }
-  @if $outDown    { @include animate-bounceOutDown  ($class); }
-  @if $outLeft    { @include animate-bounceOutLeft  ($class); }
-  @if $outRight   { @include animate-bounceOutRight ($class); }
+  @if $in         { @include animate-bounceIn       ($class, $keyframes); }
+  @if $inUp       { @include animate-bounceInUp     ($class, $keyframes); }
+  @if $inDown     { @include animate-bounceInDown   ($class, $keyframes); }
+  @if $inLeft     { @include animate-bounceInLeft   ($class, $keyframes); }
+  @if $inRight    { @include animate-bounceInRight  ($class, $keyframes); }
+  @if $out        { @include animate-bounceOut      ($class, $keyframes); }
+  @if $outUp      { @include animate-bounceOutUp    ($class, $keyframes); }
+  @if $outDown    { @include animate-bounceOutDown  ($class, $keyframes); }
+  @if $outLeft    { @include animate-bounceOutLeft  ($class, $keyframes); }
+  @if $outRight   { @include animate-bounceOutRight ($class, $keyframes); }
 
   $name: bounce;
-  @if $only {  
-    @include keyframes($name) {
-      0% {
-        @include translateY(0); 
+  @if $only {
+    @if $keyframes {
+      @include keyframes($name) {
+        0% {
+          @include translateY(0);
+        }
+        20% {
+          @include translateY(0);
+        }
+        40% {
+          @include translateY(-30px);
+        }
+        50% {
+          @include translateY(0);
+        }
+        60% {
+          @include translateY(-15px);
+        }
+        80% {
+          @include translateY(0);
+        }
+        100% {
+          @include translateY(0);
+        }
       }
-      20% {
-        @include translateY(0); 
-      }
-      40% {
-        @include translateY(-30px); 
-      }
-      50% {
-        @include translateY(0); 
-      }
-      60% {
-        @include translateY(-15px); 
-      }
-      80% {
-        @include translateY(0); 
-      }
-      100% {
-        @include translateY(0); 
-      } 
     }
     @include animation-class($name, $class) {}
   }

data/stylesheets/animate/_fade.scss

@@ -5,13 +5,17 @@
 @import "fade/fadeOut";
 
 // ---------------------------------------------------------------------------
-// fade [ in | inUp | inDown | inLeft | inRight | 
-//        inUpBig | inDownBig | inLeftBig | inRightBig | 
+// fade [ in | inUp | inDown | inLeft | inRight |
+//        inUpBig | inDownBig | inLeftBig | inRightBig |
 //        out | outUp | outDown | outLeft | outRight |
 //        outUpBig | outDownBig | outLeftBig | outRightBig |
 //        up | down | left | right | big | all ]
 
-@mixin animate-fade($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-fade(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub          : compact($sub);
   $in           : yepnope($sub, all in);
   $inUp         : yepnope($sub, all in inUp up);
@@ -31,22 +35,22 @@
   $outDownBig   : yepnope($sub, all out outDown down big);
   $outLeftBig   : yepnope($sub, all out outLeft left big);
   $outRightBig  : yepnope($sub, all out outRight right big);
-  @if $in           { @include animate-fadeIn           ($class); }
-  @if $inUp         { @include animate-fadeInUp         ($class); }
-  @if $inDown       { @include animate-fadeInDown       ($class); }
-  @if $inLeft       { @include animate-fadeInLeft       ($class); }
-  @if $inRight      { @include animate-fadeInRight      ($class); }
-  @if $inUpBig      { @include animate-fadeInUpBig      ($class); }
-  @if $inDownBig    { @include animate-fadeInDownBig    ($class); }
-  @if $inLeftBig    { @include animate-fadeInLeftBig    ($class); }
-  @if $inRightBig   { @include animate-fadeInRightBig   ($class); }
-  @if $out          { @include animate-fadeOut          ($class); }
-  @if $outUp        { @include animate-fadeOutUp        ($class); }
-  @if $outDown      { @include animate-fadeOutDown      ($class); }
-  @if $outLeft      { @include animate-fadeOutLeft      ($class); }
-  @if $outRight     { @include animate-fadeOutRight     ($class); }
-  @if $outUpBig     { @include animate-fadeOutUpBig     ($class); }
-  @if $outDownBig   { @include animate-fadeOutDownBig   ($class); }
-  @if $outLeftBig   { @include animate-fadeOutLeftBig   ($class); }
-  @if $outRightBig  { @include animate-fadeOutRightBig  ($class); }
+  @if $in           { @include animate-fadeIn           ($class, $keyframes); }
+  @if $inUp         { @include animate-fadeInUp         ($class, $keyframes); }
+  @if $inDown       { @include animate-fadeInDown       ($class, $keyframes); }
+  @if $inLeft       { @include animate-fadeInLeft       ($class, $keyframes); }
+  @if $inRight      { @include animate-fadeInRight      ($class, $keyframes); }
+  @if $inUpBig      { @include animate-fadeInUpBig      ($class, $keyframes); }
+  @if $inDownBig    { @include animate-fadeInDownBig    ($class, $keyframes); }
+  @if $inLeftBig    { @include animate-fadeInLeftBig    ($class, $keyframes); }
+  @if $inRightBig   { @include animate-fadeInRightBig   ($class, $keyframes); }
+  @if $out          { @include animate-fadeOut          ($class, $keyframes); }
+  @if $outUp        { @include animate-fadeOutUp        ($class, $keyframes); }
+  @if $outDown      { @include animate-fadeOutDown      ($class, $keyframes); }
+  @if $outLeft      { @include animate-fadeOutLeft      ($class, $keyframes); }
+  @if $outRight     { @include animate-fadeOutRight     ($class, $keyframes); }
+  @if $outUpBig     { @include animate-fadeOutUpBig     ($class, $keyframes); }
+  @if $outDownBig   { @include animate-fadeOutDownBig   ($class, $keyframes); }
+  @if $outLeftBig   { @include animate-fadeOutLeftBig   ($class, $keyframes); }
+  @if $outRightBig  { @include animate-fadeOutRightBig  ($class, $keyframes); }
 }

data/stylesheets/animate/_flip.scss

@@ -8,7 +8,7 @@
 }
 
 // ---------------------------------------------------------------------------
-// imports 
+// imports
 @import "compass/css3/animation";
 
 @import "flip/flipIn";
@@ -16,11 +16,15 @@
 
 // ---------------------------------------------------------------------------
 // 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);
@@ -28,33 +32,35 @@
   $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);
-      }
-      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);
+    @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);
+        }
       }
     }
     @include flip-class($name, $class);
@@ -64,21 +70,29 @@
 // ---------------------------------------------------------------------------
 // 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); }
 }

data/stylesheets/animate/_lightSpeed.scss

@@ -7,10 +7,14 @@
 // ---------------------------------------------------------------------------
 // lightSpeed [ in | out | all ]
 
-@mixin animate-lightSpeed($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-lightSpeed(
+  $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-lightSpeedIn   ($class); } 
-  @if $out  { @include animate-lightSpeedOut  ($class); } 
+  @if $in   { @include animate-lightSpeedIn   ($class, $keyframes); }
+  @if $out  { @include animate-lightSpeedOut  ($class, $keyframes); }
 }

data/stylesheets/animate/_roll.scss

@@ -7,10 +7,14 @@
 // ---------------------------------------------------------------------------
 // roll [ in | out | all ]
 
-@mixin animate-roll($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-roll(
+  $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-rollIn   ($class); } 
-  @if $out  { @include animate-rollOut  ($class); } 
+  @if $in   { @include animate-rollIn   ($class, $keyframes); }
+  @if $out  { @include animate-rollOut  ($class, $keyframes); }
 }

data/stylesheets/animate/_rotate.scss

@@ -5,13 +5,17 @@
 @import "rotate/rotateOut";
 
 // ---------------------------------------------------------------------------
-// rotate [ in | in-only | inUp | inDown | inLeft | inRight | 
+// rotate [ in | in-only | inUp | inDown | inLeft | inRight |
 //          inDownLeft | inDownRight | inUpLeft | inUpRight |
 //          out | out-only | outUp | outDown | outLeft | outRight |
-//          outDownLeft | outDownRight | outUpLeft | outUpRight | 
+//          outDownLeft | outDownRight | outUpLeft | outUpRight |
 //          left | right | up | down | all ]
 
-@mixin animate-rotate($sub: all, $class: $default-animation-class-mode) {
+@mixin animate-rotate(
+  $sub        : all,
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $sub          : compact($sub);
   $in-only      : yepnope($sub, all in in-only);
   $inDownLeft   : yepnope($sub, all in inDown inLeft left down);
@@ -23,15 +27,14 @@
   $outDownRight : yepnope($sub, all out outDown outRight right down);
   $outUpLeft    : yepnope($sub, all out outUp outLeft left up);
   $outUpRight   : yepnope($sub, all out outUp outRight right up);
-  @if $in-only      { @include animate-rotateIn           (only, $class); } 
-  @if $inDownLeft   { @include animate-rotateInDownLeft   ($class); } 
-  @if $inDownRight  { @include animate-rotateInDownRight  ($class); } 
-  @if $inUpLeft     { @include animate-rotateInUpLeft     ($class); } 
-  @if $inUpRight    { @include animate-rotateInUpRight    ($class); } 
-  @if $out-only     { @include animate-rotateOut          (only, $class); } 
-  @if $outDownLeft  { @include animate-rotateOutDownLeft  ($class); } 
-  @if $outDownRight { @include animate-rotateOutDownRight ($class); } 
-  @if $outUpLeft    { @include animate-rotateOutUpLeft    ($class); } 
-  @if $outUpRight   { @include animate-rotateOutUpRight   ($class); } 
+  @if $in-only      { @include animate-rotateIn           (only, $class, $keyframes); }
+  @if $inDownLeft   { @include animate-rotateInDownLeft   ($class, $keyframes); }
+  @if $inDownRight  { @include animate-rotateInDownRight  ($class, $keyframes); }
+  @if $inUpLeft     { @include animate-rotateInUpLeft     ($class, $keyframes); }
+  @if $inUpRight    { @include animate-rotateInUpRight    ($class, $keyframes); }
+  @if $out-only     { @include animate-rotateOut          (only, $class, $keyframes); }
+  @if $outDownLeft  { @include animate-rotateOutDownLeft  ($class, $keyframes); }
+  @if $outDownRight { @include animate-rotateOutDownRight ($class, $keyframes); }
+  @if $outUpLeft    { @include animate-rotateOutUpLeft    ($class, $keyframes); }
+  @if $outUpRight   { @include animate-rotateOutUpRight   ($class, $keyframes); }
 }
-