animate 0.1.alpha.0

data/stylesheets/animate/_lightSpeed.scss

@@ -0,0 +1,16 @@
+// ---------------------------------------------------------------------------
+// imports
+
+@import "lightSpeed/lightSpeedIn";
+@import "lightSpeed/lightSpeedOut";
+
+// ---------------------------------------------------------------------------
+// lightSpeed [ in | out | all ]
+
+@mixin animate-lightSpeed($sub: all, $class: $default-animation-class-mode) {
+  $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); } 
+}

data/stylesheets/animate/_roll.scss

@@ -0,0 +1,16 @@
+// ---------------------------------------------------------------------------
+// imports
+
+@import "roll/rollIn";
+@import "roll/rollOut";
+
+// ---------------------------------------------------------------------------
+// roll [ in | out | all ]
+
+@mixin animate-roll($sub: all, $class: $default-animation-class-mode) {
+  $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); } 
+}

data/stylesheets/animate/_rotate.scss

@@ -0,0 +1,37 @@
+// ---------------------------------------------------------------------------
+// imports
+
+@import "rotate/rotateIn";
+@import "rotate/rotateOut";
+
+// ---------------------------------------------------------------------------
+// rotate [ in | in-only | inUp | inDown | inLeft | inRight | 
+//          inDownLeft | inDownRight | inUpLeft | inUpRight |
+//          out | out-only | outUp | outDown | outLeft | outRight |
+//          outDownLeft | outDownRight | outUpLeft | outUpRight | 
+//          left | right | up | down | all ]
+
+@mixin animate-rotate($sub: all, $class: $default-animation-class-mode) {
+  $sub          : compact($sub);
+  $in-only      : yepnope($sub, all in in-only);
+  $inDownLeft   : yepnope($sub, all in inDown inLeft left down);
+  $inDownRight  : yepnope($sub, all in inDown inRight right down);
+  $inUpLeft     : yepnope($sub, all in inUp inLeft left up);
+  $inUpRight    : yepnope($sub, all in inUp inRight right up);
+  $out-only     : yepnope($sub, all out out-only);
+  $outDownLeft  : yepnope($sub, all out outDown outLeft left down);
+  $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); } 
+}
+

data/stylesheets/animate/_special.scss

@@ -0,0 +1,13 @@
+// ---------------------------------------------------------------------------
+// imports
+
+@import "special/hinge";
+
+// ---------------------------------------------------------------------------
+// special [ hinge | all ]
+
+@mixin animate-special($sub: all, $class: $default-animation-class-mode) {
+  $sub      : compact($sub);
+  $hinge    : yepnope($sub, all hinge);
+  @if $hinge    { @include animate-hinge($class); } 
+}

data/stylesheets/animate/attention/_flash.scss

@@ -0,0 +1,24 @@
+// ---------------------------------------------------------------------------
+// flash
+
+@mixin animate-flash($class: $default-animation-class-mode) {
+  $name: flash;
+  @include keyframes($name) {
+    0% {
+      opacity: 1; 
+    }
+    25% {
+      opacity: 0; 
+    }
+    50% {
+      opacity: 1; 
+    }
+    75% {
+      opacity: 0; 
+    }
+    100% {
+      opacity: 1; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}

data/stylesheets/animate/attention/_pulse.scss

@@ -0,0 +1,18 @@
+// ---------------------------------------------------------------------------
+// pulse
+
+@mixin animate-pulse($class: $default-animation-class-mode) {
+  $name: pulse;
+  @include keyframes($name) {
+    0% {
+      @include scale(1); 
+    }
+    50% {
+      @include scale(1.1); 
+    }
+    100% {
+      @include scale(1); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}

data/stylesheets/animate/attention/_shake.scss

@@ -0,0 +1,43 @@
+// ---------------------------------------------------------------------------
+// shake
+
+@mixin animate-shake($class: $default-animation-class-mode) {
+  $name: shake;
+  @include keyframes($name) {
+    0% {
+      @include translateX(0); 
+    }
+    10% {
+      @include translateX(-10px); 
+    }
+    20% {
+      @include translateX(10px); 
+    }
+    30% {
+      @include translateX(-10px); 
+    }
+    40% {
+      @include translateX(10px); 
+    }
+    50% {
+      @include translateX(-10px); 
+    }
+    60% {
+      @include translateX(10px); 
+    }
+    70% {
+      @include translateX(-10px); 
+    }
+    80% {
+      @include translateX(10px); 
+    }
+    90% {
+      @include translateX(-10px); 
+    }
+    100% {
+      @include translateX(0); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+

data/stylesheets/animate/attention/_swing.scss

@@ -0,0 +1,29 @@
+// ---------------------------------------------------------------------------
+// swing
+
+@mixin animate-swing($class: $default-animation-class-mode) {
+  $name: swing;
+  @include keyframes($name) {
+    20%, 40%, 60%, 80%, 100% {
+      @include transform-origin(top, center); 
+    }
+    20% {
+      @include rotate(15deg); 
+    }
+    40% {
+      @include rotate(-10deg); 
+    }
+    60% {
+      @include rotate(5deg); 
+    }
+    80% {
+      @include rotate(-5deg); 
+    }
+    100% {
+      @include rotate(0deg); 
+    } 
+  }
+  @include animation-class($name, $class) {
+    @include transform-origin(top, center);
+  }
+}

data/stylesheets/animate/attention/_tada.scss

@@ -0,0 +1,41 @@
+// ---------------------------------------------------------------------------
+// tada
+
+@mixin animate-tada($class: $default-animation-class-mode) {
+  $name: tada;
+  @include keyframes($name) {
+    0% {
+      @include scale(1); }
+    10% {
+      @include transform(scale(0.9) rotate(-3deg)); 
+    }
+    20% {
+      @include transform(scale(0.9) rotate(-3deg)); 
+    }
+    30% {
+      @include transform(scale(1.1) rotate(3deg)); 
+    }
+    40% {
+      @include transform(scale(1.1) rotate(-3deg)); 
+    }
+    50% {
+      @include transform(scale(1.1) rotate(3deg)); 
+    }
+    60% {
+      @include transform(scale(1.1) rotate(-3deg)); 
+    }
+    70% {
+      @include transform(scale(1.1) rotate(3deg)); 
+    }
+    80% {
+      @include transform(scale(1.1) rotate(-3deg)); 
+    }
+    90% {
+      @include transform(scale(1.1) rotate(3deg)); 
+    }
+    100% {
+      @include transform(scale(1) rotate(0)); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}

data/stylesheets/animate/attention/_wiggle.scss

@@ -0,0 +1,42 @@
+// ---------------------------------------------------------------------------
+// wiggle
+
+@mixin animate-wiggle($class: $default-animation-class-mode) {
+  $name: wiggle;
+  @include keyframes($name) {
+    0% {
+      @include skewX(9deg); 
+    }
+    10% {
+      @include skewX(-8deg); 
+    }
+    20% {
+      @include skewX(7deg); 
+    }
+    30% {
+      @include skewX(-6deg); 
+    }
+    40% {
+      @include skewX(5deg); 
+    }
+    50% {
+      @include skewX(-4deg); 
+    }
+    60% {
+      @include skewX(3deg); 
+    }
+    70% {
+      @include skewX(-2deg); 
+    }
+    80% {
+      @include skewX(1deg); 
+    }
+    90% {
+      @include skewX(0deg); 
+    }
+    100% {
+      @include skewX(0deg); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}

data/stylesheets/animate/attention/_wobble.scss

@@ -0,0 +1,30 @@
+// ---------------------------------------------------------------------------
+// wobble
+
+@mixin animate-wobble($class: $default-animation-class-mode) {
+  $name: wobble;
+  @include keyframes($name) {
+    0% {
+      @include translateX(0%); 
+    }
+    15% {
+      @include transform(translateX(-25%) rotate(-5deg)); 
+    }
+    30% {
+      @include transform(translateX(20%) rotate(3deg)); 
+    }
+    45% {
+      @include transform(translateX(-15%) rotate(-3deg)); 
+    }
+    60% {
+      @include transform(translateX(10%) rotate(2deg)); 
+    }
+    75% {
+      @include transform(translateX(-5%) rotate(-1deg)); 
+    }
+    100% {
+      @include transform(translateX(0%)); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}

data/stylesheets/animate/bounce/_bounceIn.scss

@@ -0,0 +1,119 @@
+// ---------------------------------------------------------------------------
+// bounceIn
+
+@mixin animate-bounceIn($class: $default-animation-class-mode) {
+  $name: bounceIn;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include scale(0.3); 
+    }
+    50% {
+      opacity: 1;
+      @include scale(1.05); 
+    }
+    70% {
+      @include scale(0.9); 
+    }
+    100% {
+      @include scale(1); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// bounceInDown
+
+@mixin animate-bounceInDown($class: $default-animation-class-mode) {
+  $name: bounceInDown;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateY(-2000px); 
+    }
+    60% {
+      opacity: 1;
+      @include translateY(30px); 
+    }
+    80% {
+      @include translateY(-10px); 
+    }
+    100% {
+      @include translateY(0); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// bounceInUp
+
+@mixin animate-bounceInUp($class: $default-animation-class-mode) {
+  $name: bounceInUp;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateY(2000px); 
+    }
+    60% {
+      opacity: 1;
+      @include translateY(-30px); 
+    }
+    80% {
+      @include translateY(10px); 
+    }
+    100% {
+      @include translateY(0); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// bounceInRight
+
+@mixin animate-bounceInRight($class: $default-animation-class-mode) {
+  $name: bounceInRight;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateX(2000px); 
+    }
+    60% {
+      opacity: 1;
+      @include translateX(-30px); 
+    }
+    80% {
+      @include translateX(10px); 
+    }
+    100% {
+      @include translateX(0); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// bounceInLeft
+
+@mixin animate-bounceInLeft($class: $default-animation-class-mode) {
+  $name: bounceInLeft;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateX(-2000px); 
+    }
+    60% {
+      opacity: 1;
+      @include translateX(30px); 
+    }
+    80% {
+      @include translateX(-10px); 
+    }
+    100% {
+      @include translateX(0); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}

data/stylesheets/animate/bounce/_bounceOut.scss

@@ -0,0 +1,107 @@
+// ---------------------------------------------------------------------------
+// bounceOut
+
+@mixin animate-bounceOut($class: $default-animation-class-mode) {
+  $name: bounceOut;
+  @include keyframes(bounceOut) {
+    0% {
+      @include scale(1); 
+    }
+    25% {
+      @include scale(0.95); 
+    }
+    50% {
+      opacity: 1;
+      @include scale(1.1); 
+    }
+    100% {
+      opacity: 0;
+      @include scale(0.3); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// bounceOutUp
+
+@mixin animate-bounceOutUp($class: $default-animation-class-mode) {
+  $name: bounceOutUp;
+  @include keyframes($name) {
+    0% {
+      @include translateY(0); 
+    }
+    20% {
+      opacity: 1;
+      @include translateY(20px); 
+    }
+    100% {
+      opacity: 0;
+      @include translateY(-2000px); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// bounceOutDown
+
+@mixin animate-bounceOutDown($class: $default-animation-class-mode) {
+  $name: bounceOutDown;
+  @include keyframes($name) {
+    0% {
+      @include translateY(0); 
+    }
+    20% {
+      opacity: 1;
+      @include translateY(-20px); 
+    }
+    100% {
+      opacity: 0;
+      @include translateY(2000px); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// bounceOutLeft
+
+@mixin animate-bounceOutLeft($class: $default-animation-class-mode) {
+  $name: bounceOutLeft;
+  @include keyframes($name) {
+    0% {
+      @include translateX(0); 
+    }
+    20% {
+      opacity: 1;
+      @include translateX(20px); 
+    }
+    100% {
+      opacity: 0;
+      @include translateX(-2000px); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// bounceOutRight
+
+@mixin animate-bounceOutRight($class: $default-animation-class-mode) {
+  $name: bounceOutRight;
+  @include keyframes($name) {
+    0% {
+      @include translateX(0); 
+    }
+    20% {
+      opacity: 1;
+      @include translateX(-20px); 
+    }
+    100% {
+      opacity: 0;
+      @include translateX(2000px); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}