Permalink
Browse files

Lots of refactoring and cleanup and commenting on css/animation, some…

… re-org and testing
  • Loading branch information...
1 parent 2031915 commit c5d5c646e3ceee3bcdf34d4a8c27372206e8ad76 @adamstac committed Nov 26, 2011
@@ -1,8 +1,6 @@
-// Animate mixin
+// The goods.
+@import "helpers";
@import "css3";
-@mixin animate($name: fadeIn, $duration: 1s, $delay: 0.2s, $function: ease, $mode: both) {
- @include experimental(animation, $name $duration $delay $function $mode);
-}
-
+// The animations.
@import "animate/animations";
@@ -0,0 +1 @@
+@import "helpers/mixins";
@@ -1,164 +1,176 @@
// Pulled from Bourbon ~ SHA: 93beb25236
// Bourbon ~ https://github.com/thoughtbot/bourbon
-// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
-// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
-
-@mixin animation-name ($name-1,
- $name-2: false, $name-3: false,
- $name-4: false, $name-5: false,
- $name-6: false, $name-7: false,
- $name-8: false, $name-9: false)
- {
- $full: compact($name-1, $name-2, $name-3, $name-4,
- $name-5, $name-6, $name-7, $name-8, $name-9);
-
+// CSS3 Animations - http://www.w3.org/TR/css3-animations/
+//
+// Each of these mixins support comma separated lists of values, which
+// allows different transitions for individual properties to be described
+// in a single style rule. Each value in the list corresponds to the value
+// at that same position in the other properties.
+
+// animation-name - http://www.w3.org/TR/css3-animations/#the-animation-name-property-
+@mixin animation-name(
+ $name-1,
+ $name-2: false, $name-3: false, $name-4: false, $name-5: false, $name-6: false, $name-7: false, $name-8: false, $name-9: false
+ ) {
+
+ $full: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9);
+
+ // none | animation-name
-webkit-animation-name: $full;
-moz-animation-name: $full;
animation-name: $full;
}
+// animation-duration - http://www.w3.org/TR/css3-animations/#the-animation-duration-property-
+@mixin animation-duration(
+ $time-1: 0,
+ $time-2: false, $time-3: false, $time-4: false, $time-5: false, $time-6: false, $time-7: false, $time-8: false, $time-9: false
+ ) {
-@mixin animation-duration ($time-1: 0,
- $time-2: false, $time-3: false,
- $time-4: false, $time-5: false,
- $time-6: false, $time-7: false,
- $time-8: false, $time-9: false)
- {
- $full: compact($time-1, $time-2, $time-3, $time-4,
- $time-5, $time-6, $time-7, $time-8, $time-9);
+ $full: compact($time-1, $time-2, $time-3, $time-4, $time-5, $time-6, $time-7, $time-8, $time-9);
+ // <time>
-webkit-animation-duration: $full;
-moz-animation-duration: $full;
animation-duration: $full;
}
+// animation-timing-function - http://www.w3.org/TR/css3-animations/#animation-timing-function_tag
+@mixin animation-timing-function(
+ $motion-1: ease,
+ $motion-2: false, $motion-3: false, $motion-4: false, $motion-5: false, $motion-6: false, $motion-7: false, $motion-8: false, $motion-9: false
+ ) {
-@mixin animation-timing-function ($motion-1: ease,
-// ease | linear | ease-in | ease-out | ease-in-out
- $motion-2: false, $motion-3: false,
- $motion-4: false, $motion-5: false,
- $motion-6: false, $motion-7: false,
- $motion-8: false, $motion-9: false)
- {
- $full: compact($motion-1, $motion-2, $motion-3, $motion-4,
- $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
+ $full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
+ // ease | linear | ease-in | ease-out | ease-in-out
-webkit-animation-timing-function: $full;
-moz-animation-timing-function: $full;
animation-timing-function: $full;
}
+// animation-iteration-count - http://www.w3.org/TR/css3-animations/#the-animation-iteration-count-property-
+@mixin animation-iteration-count(
+ $value-1: 1,
+ $value-2: false, $value-3: false, $value-4: false, $value-5: false, $value-6: false, $value-7: false, $value-8: false, $value-9: false
+ ) {
-@mixin animation-iteration-count ($value-1: 1,
-// infinite | <number>
- $value-2: false, $value-3: false,
- $value-4: false, $value-5: false,
- $value-6: false, $value-7: false,
- $value-8: false, $value-9: false)
- {
- $full: compact($value-1, $value-2, $value-3, $value-4,
- $value-5, $value-6, $value-7, $value-8, $value-9);
+ $full: compact($value-1, $value-2, $value-3, $value-4, $value-5, $value-6, $value-7, $value-8, $value-9);
+ // infinite | <number>
-webkit-animation-iteration-count: $full;
-moz-animation-iteration-count: $full;
animation-iteration-count: $full;
}
+// animation-direction - http://www.w3.org/TR/css3-animations/#the-animation-direction-property-
+@mixin animation-direction(
+ $direction-1: normal,
+ $direction-2: false, $direction-3: false, $direction-4: false, $direction-5: false, $direction-6: false, $direction-7: false, $direction-8: false, $direction-9: false
+ ) {
-@mixin animation-direction ($direction-1: normal,
-// normal | alternate
- $direction-2: false, $direction-3: false,
- $direction-4: false, $direction-5: false,
- $direction-6: false, $direction-7: false,
- $direction-8: false, $direction-9: false)
- {
- $full: compact($direction-1, $direction-2, $direction-3, $direction-4,
- $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
+ $full: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
+ // normal | alternate
-webkit-animation-direction: $full;
-moz-animation-direction: $full;
animation-direction: $full;
}
+// animation-play-state - http://www.w3.org/TR/css3-animations/#the-animation-play-state-property-
+@mixin animation-play-state(
+ $state-1: running,
+ $state-2: false, $state-3: false, $state-4: false, $state-5: false, $state-6: false, $state-7: false, $state-8: false, $state-9: false
+ ) {
-@mixin animation-play-state ($state-1: running,
-// running | paused
- $state-2: false, $state-3: false,
- $state-4: false, $state-5: false,
- $state-6: false, $state-7: false,
- $state-8: false, $state-9: false)
- {
- $full: compact($state-1, $state-2, $state-3, $state-4,
- $state-5, $state-6, $state-7, $state-8, $state-9);
+ $full: compact($state-1, $state-2, $state-3, $state-4, $state-5, $state-6, $state-7, $state-8, $state-9);
+ // running | paused
-webkit-animation-play-state: $full;
-moz-animation-play-state: $full;
animation-play-state: $full;
}
+// animation-delay - http://www.w3.org/TR/css3-animations/#the-animation-delay-property-
+@mixin animation-delay(
+ $time-1: 0,
+ $time-2: false, $time-3: false, $time-4: false, $time-5: false, $time-6: false, $time-7: false, $time-8: false, $time-9: false
+ ) {
-@mixin animation-delay ($time-1: 0,
- $time-2: false, $time-3: false,
- $time-4: false, $time-5: false,
- $time-6: false, $time-7: false,
- $time-8: false, $time-9: false)
- {
- $full: compact($time-1, $time-2, $time-3, $time-4,
- $time-5, $time-6, $time-7, $time-8, $time-9);
+ $full: compact($time-1, $time-2, $time-3, $time-4, $time-5, $time-6, $time-7, $time-8, $time-9);
+ // <time>
-webkit-animation-delay: $full;
-moz-animation-delay: $full;
animation-delay: $full;
}
+// -webkit-animation-fill-mode - http://goo.gl/l6ckm
+@mixin animation-fill-mode(
+ $mode-1: none,
+ $mode-2: false, $mode-3: false, $mode-4: false, $mode-5: false, $mode-6: false, $mode-7: false, $mode-8: false, $mode-9: false
+ ) {
-@mixin animation-fill-mode ($mode-1: none,
-// http://goo.gl/l6ckm
-// none | forwards | backwards | both
- $mode-2: false, $mode-3: false,
- $mode-4: false, $mode-5: false,
- $mode-6: false, $mode-7: false,
- $mode-8: false, $mode-9: false)
- {
- $full: compact($mode-1, $mode-2, $mode-3, $mode-4,
- $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
+ $full: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
+ // none | forwards | backwards | both
-webkit-animation-fill-mode: $full;
-moz-animation-fill-mode: $full;
animation-fill-mode: $full;
}
-
// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
-@mixin animation-basic ($name, $time: 0, $motion: ease) {
- $length-of-name: length($name);
- $length-of-time: length($time);
+@mixin animation-basic(
+ $name,
+ $time: 0,
+ $motion: ease
+ ) {
+
+ $length-of-name: length($name);
+ $length-of-time: length($time);
$length-of-motion: length($motion);
@if $length-of-name > 1 {
@include animation-name(zip($name));
} @else {
- @include animation-name( $name);
+ @include animation-name($name);
}
@if $length-of-time > 1 {
@include animation-duration(zip($time));
} @else {
- @include animation-duration( $time);
+ @include animation-duration($time);
}
@if $length-of-motion > 1 {
@include animation-timing-function(zip($motion));
} @else {
- @include animation-timing-function( $motion);
+ @include animation-timing-function($motion);
}
+
}
// Official animation shorthand property. Needs more work to actually be useful.
-@mixin animation ($name, $duration, $timing-function, $delay, $iteration-count, $direction) {
+// Spec - http://www.w3.org/TR/css3-animations/#animation
+// Values: name duration timing-function delay iteration-count direction
+
+@mixin animation(
+
+ $name: fadeIn, // none | keyframe at-rule name
+ $duration: 1s, // <time>
+ $timing-function: ease, // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
+ $delay: 0.2s, // <time>
+ $iteration-count: 1, // infinite | number
+ $direction: normal // normal | alternate
+ ) {
+
-webkit-animation: $name $duration $timing-function $delay $iteration-count $direction;
-moz-animation: $name $duration $timing-function $delay $iteration-count $direction;
animation: $name $duration $timing-function $delay $iteration-count $direction;
-}
+
+ // Compass version
+ // @include experimental($name $duration $timing-function $delay $iteration-count $direction);
+
+}
@@ -1,14 +1,3 @@
-// Declariation mixin to make it easy to write a declaration with or without a prefix
-@mixin declaration($property, $value, $prefix: none) {
- $prefix: unquote($prefix);
- @if $prefix {
- #{-$prefix}-#{$property}: $value;
- }
- @else {
- $property: $value;
- }
-}
-
// transform - https://developer.mozilla.org/en/CSS/transform
// none | <transform-function>
@@ -0,0 +1,10 @@
+// Declariation mixin to make it easy to write a declaration with or without a prefix
+@mixin declaration($property, $value, $prefix: none) {
+ $prefix: unquote($prefix);
+ @if $prefix {
+ #{-$prefix}-#{$property}: $value;
+ }
+ @else {
+ $property: $value;
+ }
+}
@@ -2039,12 +2039,9 @@
}
.foo {
- -moz-animation: fadeIn 5s 0.5s ease both;
- -webkit-animation: fadeIn 5s 0.5s ease both;
- -o-animation: fadeIn 5s 0.5s ease both;
- -ms-animation: fadeIn 5s 0.5s ease both;
- -khtml-animation: fadeIn 5s 0.5s ease both;
- animation: fadeIn 5s 0.5s ease both;
+ -webkit-animation: fadeIn 5s ease 2s 1 normal;
+ -moz-animation: fadeIn 5s ease 2s 1 normal;
+ animation: fadeIn 5s ease 2s 1 normal;
margin: 0 auto;
width: 400px;
}
@@ -2053,9 +2050,23 @@
-webkit-animation-name: bounceIn, fadeIn;
-moz-animation-name: bounceIn, fadeIn;
animation-name: bounceIn, fadeIn;
- -webkit-animation-duration: 2s, 0.5s;
- -moz-animation-duration: 2s, 0.5s;
- animation-duration: 2s, 0.5s;
+ -webkit-animation-duration: 2s, 5s;
+ -moz-animation-duration: 2s, 5s;
+ animation-duration: 2s, 5s;
+ -webkit-animation-timing-function: ease, ease;
+ -moz-animation-timing-function: ease, ease;
+ animation-timing-function: ease, ease;
+ margin: 0 auto;
+ width: 400px;
+}
+
+.baz {
+ -webkit-animation-name: fadeIn;
+ -moz-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-duration: 2s;
+ -moz-animation-duration: 2s;
+ animation-duration: 2s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
View
@@ -7,13 +7,21 @@
@import "../../stylesheets/animate-sass";
.foo {
- @include animate(fadeIn, 5s, 0.5s);
+ @include animation(fadeIn, 5s, ease, 2s);
margin: 0 auto;
width: 400px;
}
.bar {
- @include animation-basic((bounceIn, fadeIn), (2.0s, 0.5s));
+ @include animation-basic((bounceIn, fadeIn), (2.0s, 5s), (ease ease));
+ margin: 0 auto;
+ width: 400px;
+}
+
+.baz {
+ @include animation-name(fadeIn);
+ @include animation-duration(2s);
+ @include animation-timing-function(ease);
margin: 0 auto;
width: 400px;
}

0 comments on commit c5d5c64

Please sign in to comment.