animate 0.1.alpha.0

data/stylesheets/animate/lightSpeed/_lightSpeedOut.scss

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

data/stylesheets/animate/roll/_rollIn.scss

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

data/stylesheets/animate/roll/_rollOut.scss

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

data/stylesheets/animate/rotate/_rotateIn.scss

@@ -0,0 +1,159 @@
+// ---------------------------------------------------------------------------
+// rotateIn [ only | up | down | left | right | 
+//            downLeft | downRight | upLeft | upRight | all ]
+
+@mixin animate-rotateIn($sub: all, $class: $default-animation-class-mode) {
+  $sub        : compact($sub);
+  $only       : yepnope($sub, all only);
+  $downLeft   : yepnope($sub, all down left downLeft);
+  $downRight  : yepnope($sub, all down right downRight);
+  $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); } 
+
+  $name: rotateIn;
+  @if $only {
+    @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; 
+      } 
+    }
+    @include animation-class($name, $class) {}
+  }
+}
+
+// ---------------------------------------------------------------------------
+// rotateInUp [ left | right | all ]
+
+@mixin animate-rotateInUp($sub: all, $class: $default-animation-class-mode) {
+  $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); } 
+}
+
+// ---------------------------------------------------------------------------
+// rotateInDown [ left | right | all ]
+
+@mixin animate-rotateInDown($sub: all, $class: $default-animation-class-mode) {
+  $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); } 
+}
+
+
+// ---------------------------------------------------------------------------
+// rotateInLeft [ up | down | all ]
+
+@mixin animate-rotateInLeft($sub: all, $class: $default-animation-class-mode) {
+  $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); } 
+}
+
+// ---------------------------------------------------------------------------
+// rotateInRight [ up | down | all ]
+
+@mixin animate-rotateInRight($sub: all, $class: $default-animation-class-mode) {
+  $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); } 
+}
+
+// ---------------------------------------------------------------------------
+// rotateInDownLeft
+
+@mixin animate-rotateInDownLeft($class: $default-animation-class-mode) {
+  $name: rotateInDownLeft;
+  @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; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// rotateInUpLeft
+
+@mixin animate-rotateInUpLeft($class: $default-animation-class-mode) {
+  $name: rotateInUpLeft;
+  @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; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// rotateInUpRight
+
+@mixin animate-rotateInUpRight($class: $default-animation-class-mode) {
+  $name: rotateInUpRight;
+  @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; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// rotateInDownRight
+
+@mixin animate-rotateInDownRight($class: $default-animation-class-mode) {
+  $name: rotateInDownRight;
+  @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; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}

data/stylesheets/animate/rotate/_rotateOut.scss

@@ -0,0 +1,159 @@
+// ---------------------------------------------------------------------------
+// rotateOut [ only | up | down | left | right | 
+//            downLeft | downRight | upLeft | upRight | all ]
+
+@mixin animate-rotateOut($sub: all, $class: $default-animation-class-mode) {
+  $sub        : compact($sub);
+  $only       : yepnope($sub, all only);
+  $downLeft   : yepnope($sub, all down left downLeft);
+  $downRight  : yepnope($sub, all down right downRight);
+  $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); } 
+
+  $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; 
+      }
+    }
+    @include animation-class($name, $class) {}
+  }
+}
+
+// ---------------------------------------------------------------------------
+// rotateOutUp [ left | right | all ]
+
+@mixin animate-rotateOutUp($sub: all, $class: $default-animation-class-mode) {
+  $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); } 
+}
+
+// ---------------------------------------------------------------------------
+// rotateOutDown [ left | right | all ]
+
+@mixin animate-rotateOutDown($sub: all, $class: $default-animation-class-mode) {
+  $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); } 
+}
+
+
+// ---------------------------------------------------------------------------
+// rotateOutLeft [ up | down | all ]
+
+@mixin animate-rotateOutLeft($sub: all, $class: $default-animation-class-mode) {
+  $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); } 
+}
+
+// ---------------------------------------------------------------------------
+// rotateOutRight [ up | down | all ]
+
+@mixin animate-rotateOutRight($sub: all, $class: $default-animation-class-mode) {
+  $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); } 
+}
+
+// ---------------------------------------------------------------------------
+// rotateOutDownLeft
+
+@mixin animate-rotateOutDownLeft($class: $default-animation-class-mode) {
+  $name: rotateOutDownLeft;
+  @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; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// rotateOutUpLeft
+
+@mixin animate-rotateOutUpLeft($class: $default-animation-class-mode) {
+  $name: rotateOutUpLeft;
+  @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; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// rotateOutDownRight
+
+@mixin animate-rotateOutDownRight($class: $default-animation-class-mode) {
+  $name: rotateOutDownRight;
+  @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; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// rotateOutUpRight
+
+@mixin animate-rotateOutUpRight($class: $default-animation-class-mode) {
+  $name: rotateOutUpRight;
+  @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; 
+    } 
+  }
+  @include animation-class($name, $class) {}
+}

data/stylesheets/animate/special/_hinge.scss

@@ -0,0 +1,38 @@
+// ---------------------------------------------------------------------------
+// hinge
+
+@mixin animate-hinge($class: $default-animation-class-mode) {
+  $name: hinge;
+  @include keyframes($name) {
+    0% {
+      @include rotate(0);
+      @include transform-origin(top, left);
+      @include animation-timing-function(ease-in-out); 
+    }
+    20%, 60% {
+      @include rotate(80deg);
+      @include transform-origin(top, left);
+      @include animation-timing-function(ease-in-out); 
+    }
+    40% {
+      @include rotate(60deg);
+      @include transform-origin(top, left);
+      @include animation-timing-function(ease-in-out); 
+    }
+    80% {
+      @include transform(rotate(60deg) translateY(0));
+      @include opacity(1);
+      @include transform-origin(top, left);
+      @include animation-timing-function(ease-in-out); 
+    }
+    100% {
+      @include translateY(700px);
+      @include opacity(0); 
+    }
+  }
+  
+  @include animation-class($name, $class) {
+    $selector: if($class == 'silent', '%animated', '.animated');
+    &#{$selector} { @include animation(2s ease both); }
+  }
+}

metadata

@@ -0,0 +1,134 @@
+--- !ruby/object:Gem::Specification 
+name: animate
+version: !ruby/object:Gem::Version 
+  hash: 3005943807
+  prerelease: 4
+  segments: 
+  - 0
+  - 1
+  - alpha
+  - 0
+  version: 0.1.alpha.0
+platform: ruby
+authors: 
+- Eric Meyer
+- Maxime Fabre
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2012-05-29 00:00:00 Z
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: sass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 3005943801
+        segments: 
+        - 3
+        - 2
+        - 0
+        - alpha
+        - 95
+        version: 3.2.0.alpha.95
+  type: :runtime
+  version_requirements: *id001
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id002 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 3005943711
+        segments: 
+        - 0
+        - 13
+        - alpha
+        - 0
+        version: 0.13.alpha.0
+  type: :runtime
+  version_requirements: *id002
+description: Compass port of Animate.css by Dan Eden, allows you to choose only the animations you need, with or without associated classes.
+email: eric@oddbird.net
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- README.md
+- lib/animate.rb
+- stylesheets/_animate.scss
+- stylesheets/_helpers.scss
+- stylesheets/animate/_attention.scss
+- stylesheets/animate/_bounce.scss
+- stylesheets/animate/_fade.scss
+- stylesheets/animate/_flip.scss
+- stylesheets/animate/_lightSpeed.scss
+- stylesheets/animate/_roll.scss
+- stylesheets/animate/_rotate.scss
+- stylesheets/animate/_special.scss
+- stylesheets/animate/attention/_flash.scss
+- stylesheets/animate/attention/_pulse.scss
+- stylesheets/animate/attention/_shake.scss
+- stylesheets/animate/attention/_swing.scss
+- stylesheets/animate/attention/_tada.scss
+- stylesheets/animate/attention/_wiggle.scss
+- stylesheets/animate/attention/_wobble.scss
+- stylesheets/animate/bounce/_bounceIn.scss
+- stylesheets/animate/bounce/_bounceOut.scss
+- stylesheets/animate/fade/_fadeIn.scss
+- stylesheets/animate/fade/_fadeOut.scss
+- stylesheets/animate/flip/_flipIn.scss
+- stylesheets/animate/flip/_flipOut.scss
+- stylesheets/animate/lightSpeed/_lightSpeedIn.scss
+- stylesheets/animate/lightSpeed/_lightSpeedOut.scss
+- stylesheets/animate/roll/_rollIn.scss
+- stylesheets/animate/roll/_rollOut.scss
+- stylesheets/animate/rotate/_rotateIn.scss
+- stylesheets/animate/rotate/_rotateOut.scss
+- stylesheets/animate/special/_hinge.scss
+homepage: https://github.com/ericam/compass-animate
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">"
+    - !ruby/object:Gem::Version 
+      hash: 25
+      segments: 
+      - 1
+      - 3
+      - 1
+      version: 1.3.1
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.8.15
+signing_key: 
+specification_version: 3
+summary: Compass port of Animate.css by Dan Eden.
+test_files: []
+