animate 0.1.alpha.0

data/stylesheets/animate/fade/_fadeIn.scss

@@ -0,0 +1,159 @@
+// ---------------------------------------------------------------------------
+// fadeIn
+
+@mixin animate-fadeIn($class: $default-animation-class-mode) {
+  $name: fadeIn;  
+  @include keyframes($name) {
+    0% {
+      opacity: 0; 
+    }
+    100% {
+      opacity: 1; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// fadeInUp
+
+@mixin animate-fadeInUp($class: $default-animation-class-mode) {
+  $name: fadeInUp;  
+  @include keyframes($name) {
+    0% {
+      @include translateY(20px);
+      opacity: 0; 
+    }
+    100% {
+      @include translateY(0);
+      opacity: 1; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// fadeInDown
+
+@mixin animate-fadeInDown($class: $default-animation-class-mode) {
+  $name: fadeInDown;  
+  @include keyframes($name) {
+    0% {
+      @include translateY(-20px);
+      opacity: 0; 
+    }
+    100% {
+      @include translateY(0);
+      opacity: 1; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// fadeInRight
+
+@mixin animate-fadeInRight($class: $default-animation-class-mode) {
+  $name: fadeInRight;  
+  @include keyframes($name) {
+    0% {
+      @include translateX(20px);
+      opacity: 0; 
+    }
+    100% {
+      @include translateX(0);
+      opacity: 1; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// fadeInLeft
+
+@mixin animate-fadeInLeft($class: $default-animation-class-mode) {
+  $name: fadeInLeft;  
+  @include keyframes($name) {
+    0% {
+      @include translateX(-20px);
+      opacity: 0; 
+    }
+    100% {
+      @include translateX(0);
+      opacity: 1; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// fadeInUpBig
+
+@mixin animate-fadeInUpBig($class: $default-animation-class-mode) {
+  $name: fadeInUpBig;  
+  @include keyframes($name) {
+    0% {
+      @include translateY(2000px);
+      opacity: 0; 
+    }
+    100% {
+      @include translateY(0);
+      opacity: 1; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// fadeInDownBig
+
+@mixin animate-fadeInDownBig($class: $default-animation-class-mode) {
+  $name: fadeInDownBig;  
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateY(-2000px); 
+    }
+    100% {
+      opacity: 1;
+      @include translateY(0); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// fadeInRightBig
+
+@mixin animate-fadeInRightBig($class: $default-animation-class-mode) {
+  $name: fadeInRightBig;  
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateX(2000px); 
+    }
+    100% {
+      opacity: 1;
+      @include translateX(0); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// fadeInLeftBig
+
+@mixin animate-fadeInLeftBig($class: $default-animation-class-mode) {
+  $name: fadeInLeftBig;  
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateX(-2000px); 
+    }
+    100% {
+      opacity: 1;
+      @include translateX(0); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}

data/stylesheets/animate/fade/_fadeOut.scss

@@ -0,0 +1,159 @@
+// ---------------------------------------------------------------------------
+// fadeOut
+
+@mixin animate-fadeOut($class: $default-animation-class-mode) {
+  $name: fadeOut;  
+  @include keyframes($name) {
+    0% {
+      opacity: 1; 
+    }
+    100% {
+      opacity: 0; 
+    }
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// fadeOutUp
+
+@mixin animate-fadeOutUp($class: $default-animation-class-mode) {
+  $name: fadeOutUp;  
+  @include keyframes($name) {
+    0% {
+      @include translateY(0);
+      opacity: 1; 
+    }
+    100% {
+      @include translateY(-20px);
+      opacity: 0; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// fadeOutDown
+
+@mixin animate-fadeOutDown($class: $default-animation-class-mode) {
+  $name: fadeOutDown;  
+  @include keyframes($name) {
+    0% {
+      @include translateY(0);
+      opacity: 1; 
+    }
+    100% {
+      @include translateY(20px);
+      opacity: 0; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// fadeOutRight
+
+@mixin animate-fadeOutRight($class: $default-animation-class-mode) {
+  $name: fadeOutRight;  
+  @include keyframes($name) {
+    0% {
+      @include translateX(0);
+      opacity: 1; 
+    }
+    100% {
+      @include translateX(20px);
+      opacity: 0; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// fadeOutLeft
+
+@mixin animate-fadeOutLeft($class: $default-animation-class-mode) {
+  $name: fadeOutLeft;  
+  @include keyframes($name) {
+    0% {
+      @include translateX(0);
+      opacity: 1; 
+    }
+    100% {
+      @include translateX(-20px);
+      opacity: 0; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// fadeOutUpBig
+
+@mixin animate-fadeOutUpBig($class: $default-animation-class-mode) {
+  $name: fadeOutUpBig;  
+  @include keyframes($name) {
+    0% {
+      @include translateY(0);
+      opacity: 1; 
+    }
+    100% {
+      @include translateY(-2000px);
+      opacity: 0; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// fadeOutDownBig
+
+@mixin animate-fadeOutDownBig($class: $default-animation-class-mode) {
+  $name: fadeOutDownBig;  
+  @include keyframes($name) {
+    0% {
+      opacity: 1;
+      @include translateY(0); 
+    }
+    100% {
+      opacity: 0;
+      @include translateY(2000px); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// fadeOutRightBig
+
+@mixin animate-fadeOutRightBig($class: $default-animation-class-mode) {
+  $name: fadeOutRightBig;  
+  @include keyframes($name) {
+    0% {
+      opacity: 1;
+      @include translateX(0); 
+    }
+    100% {
+      opacity: 0;
+      @include translateX(2000px); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// fadeOutLeftBig
+
+@mixin animate-fadeOutLeftBig($class: $default-animation-class-mode) {
+  $name: fadeOutLeftBig;  
+  @include keyframes($name) {
+    0% {
+      opacity: 1;
+      @include translateX(0); 
+    }
+    100% {
+      opacity: 0;
+      @include translateX(-2000px); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}

data/stylesheets/animate/flip/_flipIn.scss

@@ -0,0 +1,58 @@
+// ---------------------------------------------------------------------------
+// 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);
+}

data/stylesheets/animate/flip/_flipOut.scss

@@ -0,0 +1,46 @@
+// ---------------------------------------------------------------------------
+// flipOut [ x | y | all ]
+
+@mixin animate-flipOut($sub: all, $class: $default-animation-class-mode) {
+  $sub  : compact($sub);
+  $x    : yepnope($sub, all x);
+  $y    : yepnope($sub, all y);
+  @if $x  { @include animate-flipOutX (all, $class); } 
+  @if $y  { @include animate-flipOutY (all, $class); } 
+}
+
+// ---------------------------------------------------------------------------
+// flipOutX
+
+@mixin animate-flipOutX($class: $default-animation-class-mode) {
+  $name: flipOutX;
+  @include keyframes($name) {
+    0% {
+      @include transform(perspective(400px) rotateX(0deg));
+      @include opacity(1);
+    }
+    100% {
+      @include transform(perspective(400px) rotateX(90deg));
+      @include opacity(0);
+    }
+  }
+  @include flip-class($name, $class);
+}
+
+// ---------------------------------------------------------------------------
+// flipOutY
+
+@mixin animate-flipOutY($class: $default-animation-class-mode) {
+  $name: flipOutY;
+  @include keyframes($name) {
+    0% {
+      @include transform(perspective(400px) rotateY(0deg));
+      @include opacity(1);
+    }
+    100% {
+      @include transform(perspective(400px) rotateY(90deg));
+      @include opacity(0);
+    }
+  }
+  @include flip-class($name, $class);
+}

data/stylesheets/animate/lightSpeed/_lightSpeedIn.scss

@@ -0,0 +1,25 @@
+// ---------------------------------------------------------------------------
+// lightSpeedIn
+
+@mixin animate-lightSpeedIn($class: $default-animation-class-mode) {
+  $name: lightSpeedIn;
+  @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); 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}