stylesheets/animate/special/_hinge.scss in animate-0.1.0 vs stylesheets/animate/special/_hinge.scss in animate-0.2.beta.0

@@ -5,39 +5,44 @@
 @import "compass/css3/opacity";
 
 // ---------------------------------------------------------------------------
 // hinge
 
-@mixin animate-hinge($class: $default-animation-class-mode) {
+@mixin animate-hinge(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
   $name: hinge;
-  @include keyframes($name) {
-    0% {
-      @include rotate(0);
-      @include transform-origin(top, left);
-      @include animation-timing-function(ease-in-out); 
+  @if $keyframes {
+    @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);
+      }
     }
-    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); }
   }
 }