animation 0.1.alpha.2 → 0.1.alpha.3

data/README.mdown

@@ -1,9 +1,9 @@
 Animation Compass Plugin
 ========================
 
-First and foremost, this plugin gives you all the tools you need to write and apply css3 animations. As a bonus, and only if you so choose, it also supplies you with a "shit-ton" (roughly 2 metric tons) of pre-fabricated animations taken from Dan Eden's "[Animate.css](http://daneden.me/animate/)" project.
+First and foremost, this plugin gives you all the tools you need to write and apply css3 animations in compass. As a bonus, and only if you so choose, it also supplies you with a "shit-ton" (roughly 2 metric tons) of pre-fabricated animations taken from Dan Eden's "[Animate.css](http://daneden.me/animate/)" project.
 
-**This plugin requires the most recent alpha releases of Sass 3.2.0 (alpha.93) and Compass 0.12.0.**
+**This plugin requires the most recent alpha releases of Sass 3.2.0 (alpha.95) and Compass 0.12.0.**
 
     gem install animation --pre
 
@@ -20,13 +20,14 @@ The default import only includes the core mixins for creating animations. They a
       @content
 
     // apply animation(s) and adjust settings
-    +animation-name([$name-1, $name-2, ..., name-10])
-    +animation-duration([$duration-1, $duration-2, ..., duration-10])
-    +animation-delay([$delay-1, $delay-2, ..., delay-10])
-    +animation-timing-function([$function-1, $function-2, ..., function-10])
-    +animation-iteration-count([$count-1, $count-2, ..., count-10])
-    +animation-direction([$direction-1, $direction-2, ..., direction-10])
-    +animation-fill-mode([$mode-1, $mode-2, ..., mode-10])
+    +animation-name([$name-1, $name-2, ..., $name-10])
+    +animation-duration([$duration-1, $duration-2, ..., $duration-10])
+    +animation-delay([$delay-1, $delay-2, ..., $delay-10])
+    +animation-timing-function([$function-1, $function-2, ..., $function-10])
+    +animation-iteration-count([$count-1, $count-2, ..., $count-10])
+    +animation-direction([$direction-1, $direction-2, ..., $direction-10])
+    +animation-fill-mode([$mode-1, $mode-2, ..., $mode-10])
+    +animation-play-state([$state-1, $state-2, ..., $state-10])
 
     // shortcut to apply and adjust
     +animation([$animation-1, $animation-2, ..., animation-10])
@@ -40,6 +41,7 @@ There are default variables available for all of them:
     $default-animation-iteration-count  : false
     $default-animation-direction        : false
     $default-animation-fill-mode        : false
+    $default-animation-play-state       : false
 
 ## Animate.css
 
@@ -63,5 +65,11 @@ That will create the following named animations:
   - `rotateIn` `rotateInDownLeft` `rotateInDownRight` `rotateInUpLeft` `rotateInUpRight`
 * Rotating exits
   - `rotateOut` `rotateOutDownLeft` `rotateOutDownRight` `rotateOutUpLeft` `rotateOutUpRight`
+* Flippers
+  - `flip` `flipInX` `flipInY` `flipOutX` `flipOutY`
 * Specials
   - `hinge` `rollIn` `rollOut`
+
+You can also import a set of predefined classes for each animation:
+
+    @import animation/animate/classes

data/stylesheets/animation/{animate.scss → _animate.scss}

@@ -23,5 +23,6 @@
 @import "animate/fading";
 @import "animate/bouncing";
 @import "animate/rotating";
+@import "animate/flippers";
 @import "animate/attention-seekers";
 @import "animate/specials";

data/stylesheets/animation/{core.scss → _core.scss}

@@ -1,32 +1,39 @@
-@import "animation/experimental";
+@import "shared";
+
+// CSS Animations.
 
-// ---------------------------------------------------------------------------
 // Apply an animation property and value with the correct browser support
 @mixin animation-support($property, $value) {
-  @include experimental($property, $value, -moz, -webkit, not -o, -ms, not -khtml, official); }
-
-// ---------------------------------------------------------------------------
-// Set your animation defaults.
-// $default-animation-name              : Name of any animation as a string. [<name>]
-// $default-animation-duration          : Duration of the entire animation. [<seconds>]
-// $default-animation-delay             : Delay for start of animation. [<seconds>]
-// $default-animation-timing-function   : The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]
-// $default-animation-iteration-count   : The number of times an animation cycle is played. [infinite | <number>]
-// $default-animation-direction         : Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
-// $default-animation-fill-mode         : What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
-
-$default-animation-name: false;
-$default-animation-duration: false;
-$default-animation-delay: false;
-$default-animation-timing-function: false;
-$default-animation-iteration-count: false;
-$default-animation-direction: false;
-$default-animation-fill-mode: false;
-
-// ---------------------------------------------------------------------------
-// Create up a named animation sequesnce that can be applied to elements later.
-// $name    - The name of your animation.
-// @content - The keyframes of the animation.
+  @include experimental($property, $value, -moz, -webkit, -o, -ms, not -khtml, official); }
+
+// Name of any animation as a string.
+$default-animation-name             : false !default;
+
+// Duration of the entire animation in seconds.
+$default-animation-duration         : false !default;
+
+// Delay for start of animation in seconds.
+$default-animation-delay            : false !default;
+
+// The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier($number, $number, $number, $number)]
+$default-animation-timing-function  : false !default;
+
+// The number of times an animation cycle is played. [infinite | $number]
+$default-animation-iteration-count  : false !default;
+
+// Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
+$default-animation-direction        : false !default;
+
+// What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
+$default-animation-fill-mode        : false !default;
+
+// Whether the animation is running or paused. [running | paused]
+$default-animation-play-state       : false !default;
+
+// Create a named animation sequence that can be applied to elements later.
+//
+//     $name    - The name of your animation.
+//     @content - The keyframes of the animation.
 @mixin keyframes(
   $name,
   $moz: $experimental-support-for-mozilla,
@@ -68,48 +75,53 @@ $default-animation-fill-mode: false;
   }
 }
 
-// ---------------------------------------------------------------------------
+// Apply 1-10 animation names.
 @mixin animation-name($name-1: $default-animation-name, $name-2: false, $name-3: false, $name-4: false, $name-5: false, $name-6: false, $name-7: false, $name-8: false, $name-9: false, $name-10: false) {
   $name: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10);
   @include animation-support(animation-name, $name); }
 
-// ---------------------------------------------------------------------------
+// Apply 1-10 animation durations.
 @mixin animation-duration($duration-1: $default-animation-duration, $duration-2: false, $duration-3: false, $duration-4: false, $duration-5: false, $duration-6: false, $duration-7: false, $duration-8: false, $duration-9: false, $duration-10: false) {
   $duration: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);
   @include animation-support(animation-duration, $duration); }
 
-// ---------------------------------------------------------------------------
+// Apply 1-10 animation delays.
 @mixin animation-delay($delay-1: $default-animation-delay, $delay-2: false, $delay-3: false, $delay-4: false, $delay-5: false, $delay-6: false, $delay-7: false, $delay-8: false, $delay-9: false, $delay-10: false) {
   $delay: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);
   @include animation-support(animation-delay, $delay); }
 
-// ---------------------------------------------------------------------------
+// Apply 1-10 animation timing functions.
 @mixin animation-timing-function($function-1: $default-animation-timing-function, $function-2: false, $function-3: false, $function-4: false, $function-5: false, $function-6: false, $function-7: false, $function-8: false, $function-9: false, $function-10: false) {
   $function: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);
   @include animation-support(animation-timing-function, $function); }
 
-// ---------------------------------------------------------------------------
+// Apply 1-10 animation iteration counts.
 @mixin animation-iteration-count($count-1: $default-animation-iteration-count, $count-2: false, $count-3: false, $count-4: false, $count-5: false, $count-6: false, $count-7: false, $count-8: false, $count-9: false, $count-10: false) {
   $count: compact($count-1, $count-2, $count-3, $count-4, $count-5, $count-6, $count-7, $count-8, $count-9, $count-10);
   @include animation-support(animation-iteration-count, $count); }
 
-// ---------------------------------------------------------------------------
+// Apply 1-10 animation directions.
 @mixin animation-direction($direction-1: $default-animation-direction, $direction-2: false, $direction-3: false, $direction-4: false, $direction-5: false, $direction-6: false, $direction-7: false, $direction-8: false, $direction-9: false, $direction-10: false) {
   $direction: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9, $direction-10);
   @include animation-support(animation-direction, $direction); }
 
-// ---------------------------------------------------------------------------
+// Apply 1-10 animation fill modes.
 @mixin animation-fill-mode($mode-1: $default-animation-fill-mode, $mode-2: false, $mode-3: false, $mode-4: false, $mode-5: false, $mode-6: false, $mode-7: false, $mode-8: false, $mode-9: false, $mode-10: false) {
   $mode: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9, $mode-10);
   @include animation-support(animation-fill-mode, $mode); }
 
-// ---------------------------------------------------------------------------
+// Apply 1-10 animation play states.
+@mixin animation-play-state($state-1: $default-animation-play-state, $state-2: false, $state-3: false, $state-4: false, $state-5: false, $state-6: false, $state-7: false, $state-8: false, $state-9: false, $state-10: false) {
+  $state: compact($state-1, $state-2, $state-3, $state-4, $state-5, $state-6, $state-7, $state-8, $state-9, $state-10);
+  @include animation-support(animation-play-state, $state); }
+
 // Shortcut to apply a named animation to an element, with all the settings.
-// $animation-1   : Name and settings for the first animation. [<values> | default]
-// ...
-// $animation-10  : Name and settings for the tenth animation. <values>
+//
+//     $animation-1   : Name and settings for the first animation. [<values> | default]
+//     ...
+//     $animation-10  : Name and settings for the tenth animation. <values>
 @mixin animation($animation-1: default, $animation-2: false, $animation-3: false, $animation-4: false, $animation-5: false, $animation-6: false, $animation-7: false, $animation-8: false, $animation-9: false, $animation-10: false) {
   @if $animation-1 == default {
-    $animation-1: -compass-space-list(compact($default-animation-name, $default-animation-duration, $default-animation-timing-function, $default-animation-delay, $default-animation-iteration-count, $default-animation-direction, $default-animation-fill-mode)); }
+    $animation-1: -compass-space-list(compact($default-animation-name, $default-animation-duration, $default-animation-timing-function, $default-animation-delay, $default-animation-iteration-count, $default-animation-direction, $default-animation-fill-mode, $default-animation-play-state)); }
   $animation: compact($animation-1, $animation-2, $animation-3, $animation-4, $animation-5, $animation-6, $animation-7, $animation-8, $animation-9, $animation-10);
   @include animation-support(animation, $animation); }

data/stylesheets/animation/animate/_classes.scss

@@ -0,0 +1,21 @@
+// .animated and .animated.hinge classes for external use
+.animated {
+  @include animation(1s ease both); }
+
+.animated.hinge {
+  @include animation(2s ease both); }
+
+// Animations list
+$animations: flash, shake, bounce, tada, swing, wobble, pulse, flip, flipInX, flipOutX, flipInY, flipOutY, fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeInUpBig, fadeInDownBig, fadeInLeftBig, fadeInRightBig, fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUpBig, fadeOutDownBig, fadeOutLeftBig, fadeOutRightBig, bounceIn, bounceInDown, bounceInUp, bounceInLeft, bounceInRight, bounceOut, bounceOutDown, bounceOutUp, bounceOutLeft, bounceOutRight, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, hinge, rollIn, rollOut;
+
+// Animations that require backface-visibility
+$backface: flip, flipInX, flipOutX, flipInY, flipOutY;
+
+// Creation of the different classes
+@each $anim in $animations {
+  .#{$anim} {
+    @if index($backface, $anim) {
+      @include backface-visibility(visible); }
+    @if $anim == "swing" {
+      @include transform-origin(top, center); }
+    @include animation-name($anim); } }

data/stylesheets/animation/animate/_flippers.scss

@@ -0,0 +1,87 @@
+// ---------------------------------------------------------------------------
+@include keyframes(flip) {
+  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 keyframes(flipInX) {
+  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 keyframes(flipOutX) {
+  0% {
+    @include transform(perspective(400px) rotateX(0deg));
+    @include opacity(1);
+  }
+  100% {
+    @include transform(perspective(400px) rotateX(90deg));
+    @include opacity(0);
+  }
+}
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(flipInY) {
+  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 keyframes(flipOutY) {
+  0% {
+    @include transform(perspective(400px) rotateY(0deg));
+    @include opacity(1);
+  }
+  100% {
+    @include transform(perspective(400px) rotateY(90deg));
+    @include opacity(0);
+  }
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification 
 name: animation
 version: !ruby/object:Gem::Version 
-  hash: -3702664288
+  hash: -3702664286
   prerelease: 4
   segments: 
   - 0
   - 1
   - alpha
-  - 2
-  version: 0.1.alpha.2
+  - 3
+  version: 0.1.alpha.3
 platform: ruby
 authors: 
 - Eric Meyer
@@ -16,7 +16,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-03-21 00:00:00 Z
+date: 2012-04-04 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: sass
@@ -64,9 +64,14 @@ files:
 - README.mdown
 - lib/animation.rb
 - stylesheets/_animation.scss
+- stylesheets/animation/_animate.scss
+- stylesheets/animation/_core.scss
+- stylesheets/animation/_shared.scss
 - stylesheets/animation/animate/_attention-seekers.scss
 - stylesheets/animation/animate/_bouncing.scss
+- stylesheets/animation/animate/_classes.scss
 - stylesheets/animation/animate/_fading.scss
+- stylesheets/animation/animate/_flippers.scss
 - stylesheets/animation/animate/_rotating.scss
 - stylesheets/animation/animate/_specials.scss
 - stylesheets/animation/animate/bouncing/_bouncing-entrances.scss
@@ -75,9 +80,6 @@ files:
 - stylesheets/animation/animate/fading/_fading-exits.scss
 - stylesheets/animation/animate/rotating/_rotating-entrances.scss
 - stylesheets/animation/animate/rotating/_rotating-exits.scss
-- stylesheets/animation/animate.scss
-- stylesheets/animation/core.scss
-- stylesheets/animation/experimental.scss
 homepage: https://github.com/ericam/compass-animation
 licenses: []