Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

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

… re-org and testing
  • Loading branch information...
commit c5d5c646e3ceee3bcdf34d4a8c27372206e8ad76 1 parent 2031915
Adam Stacoviak authored
8 stylesheets/_animate-sass.scss
... ... @@ -1,8 +1,6 @@
1   -// Animate mixin
  1 +// The goods.
  2 +@import "helpers";
2 3 @import "css3";
3 4
4   -@mixin animate($name: fadeIn, $duration: 1s, $delay: 0.2s, $function: ease, $mode: both) {
5   - @include experimental(animation, $name $duration $delay $function $mode);
6   -}
7   -
  5 +// The animations.
8 6 @import "animate/animations";
1  stylesheets/_helpers.scss
... ... @@ -0,0 +1 @@
  1 +@import "helpers/mixins";
178 stylesheets/css3/_animation.scss
... ... @@ -1,164 +1,176 @@
1 1 // Pulled from Bourbon ~ SHA: 93beb25236
2 2 // Bourbon ~ https://github.com/thoughtbot/bourbon
3 3
4   -// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
5   -// 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.
6   -
7   -@mixin animation-name ($name-1,
8   - $name-2: false, $name-3: false,
9   - $name-4: false, $name-5: false,
10   - $name-6: false, $name-7: false,
11   - $name-8: false, $name-9: false)
12   - {
13   - $full: compact($name-1, $name-2, $name-3, $name-4,
14   - $name-5, $name-6, $name-7, $name-8, $name-9);
15   -
  4 +// CSS3 Animations - http://www.w3.org/TR/css3-animations/
  5 +//
  6 +// Each of these mixins support comma separated lists of values, which
  7 +// allows different transitions for individual properties to be described
  8 +// in a single style rule. Each value in the list corresponds to the value
  9 +// at that same position in the other properties.
  10 +
  11 +// animation-name - http://www.w3.org/TR/css3-animations/#the-animation-name-property-
  12 +@mixin animation-name(
  13 + $name-1,
  14 + $name-2: false, $name-3: false, $name-4: false, $name-5: false, $name-6: false, $name-7: false, $name-8: false, $name-9: false
  15 + ) {
  16 +
  17 + $full: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9);
  18 +
  19 + // none | animation-name
16 20 -webkit-animation-name: $full;
17 21 -moz-animation-name: $full;
18 22 animation-name: $full;
19 23 }
20 24
  25 +// animation-duration - http://www.w3.org/TR/css3-animations/#the-animation-duration-property-
  26 +@mixin animation-duration(
  27 + $time-1: 0,
  28 + $time-2: false, $time-3: false, $time-4: false, $time-5: false, $time-6: false, $time-7: false, $time-8: false, $time-9: false
  29 + ) {
21 30
22   -@mixin animation-duration ($time-1: 0,
23   - $time-2: false, $time-3: false,
24   - $time-4: false, $time-5: false,
25   - $time-6: false, $time-7: false,
26   - $time-8: false, $time-9: false)
27   - {
28   - $full: compact($time-1, $time-2, $time-3, $time-4,
29   - $time-5, $time-6, $time-7, $time-8, $time-9);
  31 + $full: compact($time-1, $time-2, $time-3, $time-4, $time-5, $time-6, $time-7, $time-8, $time-9);
30 32
  33 + // <time>
31 34 -webkit-animation-duration: $full;
32 35 -moz-animation-duration: $full;
33 36 animation-duration: $full;
34 37 }
35 38
  39 +// animation-timing-function - http://www.w3.org/TR/css3-animations/#animation-timing-function_tag
  40 +@mixin animation-timing-function(
  41 + $motion-1: ease,
  42 + $motion-2: false, $motion-3: false, $motion-4: false, $motion-5: false, $motion-6: false, $motion-7: false, $motion-8: false, $motion-9: false
  43 + ) {
36 44
37   -@mixin animation-timing-function ($motion-1: ease,
38   -// ease | linear | ease-in | ease-out | ease-in-out
39   - $motion-2: false, $motion-3: false,
40   - $motion-4: false, $motion-5: false,
41   - $motion-6: false, $motion-7: false,
42   - $motion-8: false, $motion-9: false)
43   - {
44   - $full: compact($motion-1, $motion-2, $motion-3, $motion-4,
45   - $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
  45 + $full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
46 46
  47 + // ease | linear | ease-in | ease-out | ease-in-out
47 48 -webkit-animation-timing-function: $full;
48 49 -moz-animation-timing-function: $full;
49 50 animation-timing-function: $full;
50 51 }
51 52
  53 +// animation-iteration-count - http://www.w3.org/TR/css3-animations/#the-animation-iteration-count-property-
  54 +@mixin animation-iteration-count(
  55 + $value-1: 1,
  56 + $value-2: false, $value-3: false, $value-4: false, $value-5: false, $value-6: false, $value-7: false, $value-8: false, $value-9: false
  57 + ) {
52 58
53   -@mixin animation-iteration-count ($value-1: 1,
54   -// infinite | <number>
55   - $value-2: false, $value-3: false,
56   - $value-4: false, $value-5: false,
57   - $value-6: false, $value-7: false,
58   - $value-8: false, $value-9: false)
59   - {
60   - $full: compact($value-1, $value-2, $value-3, $value-4,
61   - $value-5, $value-6, $value-7, $value-8, $value-9);
  59 + $full: compact($value-1, $value-2, $value-3, $value-4, $value-5, $value-6, $value-7, $value-8, $value-9);
62 60
  61 + // infinite | <number>
63 62 -webkit-animation-iteration-count: $full;
64 63 -moz-animation-iteration-count: $full;
65 64 animation-iteration-count: $full;
66 65 }
67 66
  67 +// animation-direction - http://www.w3.org/TR/css3-animations/#the-animation-direction-property-
  68 +@mixin animation-direction(
  69 + $direction-1: normal,
  70 + $direction-2: false, $direction-3: false, $direction-4: false, $direction-5: false, $direction-6: false, $direction-7: false, $direction-8: false, $direction-9: false
  71 + ) {
68 72
69   -@mixin animation-direction ($direction-1: normal,
70   -// normal | alternate
71   - $direction-2: false, $direction-3: false,
72   - $direction-4: false, $direction-5: false,
73   - $direction-6: false, $direction-7: false,
74   - $direction-8: false, $direction-9: false)
75   - {
76   - $full: compact($direction-1, $direction-2, $direction-3, $direction-4,
77   - $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
  73 + $full: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
78 74
  75 + // normal | alternate
79 76 -webkit-animation-direction: $full;
80 77 -moz-animation-direction: $full;
81 78 animation-direction: $full;
82 79 }
83 80
  81 +// animation-play-state - http://www.w3.org/TR/css3-animations/#the-animation-play-state-property-
  82 +@mixin animation-play-state(
  83 + $state-1: running,
  84 + $state-2: false, $state-3: false, $state-4: false, $state-5: false, $state-6: false, $state-7: false, $state-8: false, $state-9: false
  85 + ) {
84 86
85   -@mixin animation-play-state ($state-1: running,
86   -// running | paused
87   - $state-2: false, $state-3: false,
88   - $state-4: false, $state-5: false,
89   - $state-6: false, $state-7: false,
90   - $state-8: false, $state-9: false)
91   - {
92   - $full: compact($state-1, $state-2, $state-3, $state-4,
93   - $state-5, $state-6, $state-7, $state-8, $state-9);
  87 + $full: compact($state-1, $state-2, $state-3, $state-4, $state-5, $state-6, $state-7, $state-8, $state-9);
94 88
  89 + // running | paused
95 90 -webkit-animation-play-state: $full;
96 91 -moz-animation-play-state: $full;
97 92 animation-play-state: $full;
98 93 }
99 94
  95 +// animation-delay - http://www.w3.org/TR/css3-animations/#the-animation-delay-property-
  96 +@mixin animation-delay(
  97 + $time-1: 0,
  98 + $time-2: false, $time-3: false, $time-4: false, $time-5: false, $time-6: false, $time-7: false, $time-8: false, $time-9: false
  99 + ) {
100 100
101   -@mixin animation-delay ($time-1: 0,
102   - $time-2: false, $time-3: false,
103   - $time-4: false, $time-5: false,
104   - $time-6: false, $time-7: false,
105   - $time-8: false, $time-9: false)
106   - {
107   - $full: compact($time-1, $time-2, $time-3, $time-4,
108   - $time-5, $time-6, $time-7, $time-8, $time-9);
  101 + $full: compact($time-1, $time-2, $time-3, $time-4, $time-5, $time-6, $time-7, $time-8, $time-9);
109 102
  103 + // <time>
110 104 -webkit-animation-delay: $full;
111 105 -moz-animation-delay: $full;
112 106 animation-delay: $full;
113 107 }
114 108
  109 +// -webkit-animation-fill-mode - http://goo.gl/l6ckm
  110 +@mixin animation-fill-mode(
  111 + $mode-1: none,
  112 + $mode-2: false, $mode-3: false, $mode-4: false, $mode-5: false, $mode-6: false, $mode-7: false, $mode-8: false, $mode-9: false
  113 + ) {
115 114
116   -@mixin animation-fill-mode ($mode-1: none,
117   -// http://goo.gl/l6ckm
118   -// none | forwards | backwards | both
119   - $mode-2: false, $mode-3: false,
120   - $mode-4: false, $mode-5: false,
121   - $mode-6: false, $mode-7: false,
122   - $mode-8: false, $mode-9: false)
123   - {
124   - $full: compact($mode-1, $mode-2, $mode-3, $mode-4,
125   - $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
  115 + $full: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
126 116
  117 + // none | forwards | backwards | both
127 118 -webkit-animation-fill-mode: $full;
128 119 -moz-animation-fill-mode: $full;
129 120 animation-fill-mode: $full;
130 121 }
131 122
132   -
133 123 // Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
134 124 // Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
135   -@mixin animation-basic ($name, $time: 0, $motion: ease) {
136   - $length-of-name: length($name);
137   - $length-of-time: length($time);
  125 +@mixin animation-basic(
  126 + $name,
  127 + $time: 0,
  128 + $motion: ease
  129 + ) {
  130 +
  131 + $length-of-name: length($name);
  132 + $length-of-time: length($time);
138 133 $length-of-motion: length($motion);
139 134
140 135 @if $length-of-name > 1 {
141 136 @include animation-name(zip($name));
142 137 } @else {
143   - @include animation-name( $name);
  138 + @include animation-name($name);
144 139 }
145 140
146 141 @if $length-of-time > 1 {
147 142 @include animation-duration(zip($time));
148 143 } @else {
149   - @include animation-duration( $time);
  144 + @include animation-duration($time);
150 145 }
151 146
152 147 @if $length-of-motion > 1 {
153 148 @include animation-timing-function(zip($motion));
154 149 } @else {
155   - @include animation-timing-function( $motion);
  150 + @include animation-timing-function($motion);
156 151 }
  152 +
157 153 }
158 154
159 155 // Official animation shorthand property. Needs more work to actually be useful.
160   -@mixin animation ($name, $duration, $timing-function, $delay, $iteration-count, $direction) {
  156 +// Spec - http://www.w3.org/TR/css3-animations/#animation
  157 +// Values: name duration timing-function delay iteration-count direction
  158 +
  159 +@mixin animation(
  160 +
  161 + $name: fadeIn, // none | keyframe at-rule name
  162 + $duration: 1s, // <time>
  163 + $timing-function: ease, // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
  164 + $delay: 0.2s, // <time>
  165 + $iteration-count: 1, // infinite | number
  166 + $direction: normal // normal | alternate
  167 + ) {
  168 +
161 169 -webkit-animation: $name $duration $timing-function $delay $iteration-count $direction;
162 170 -moz-animation: $name $duration $timing-function $delay $iteration-count $direction;
163 171 animation: $name $duration $timing-function $delay $iteration-count $direction;
164   -}
  172 +
  173 + // Compass version
  174 + // @include experimental($name $duration $timing-function $delay $iteration-count $direction);
  175 +
  176 +}
11 stylesheets/css3/_transform.scss
... ... @@ -1,14 +1,3 @@
1   -// Declariation mixin to make it easy to write a declaration with or without a prefix
2   -@mixin declaration($property, $value, $prefix: none) {
3   - $prefix: unquote($prefix);
4   - @if $prefix {
5   - #{-$prefix}-#{$property}: $value;
6   - }
7   - @else {
8   - $property: $value;
9   - }
10   -}
11   -
12 1 // transform - https://developer.mozilla.org/en/CSS/transform
13 2 // none | <transform-function>
14 3
10 stylesheets/helpers/_mixins.scss
... ... @@ -0,0 +1,10 @@
  1 +// Declariation mixin to make it easy to write a declaration with or without a prefix
  2 +@mixin declaration($property, $value, $prefix: none) {
  3 + $prefix: unquote($prefix);
  4 + @if $prefix {
  5 + #{-$prefix}-#{$property}: $value;
  6 + }
  7 + @else {
  8 + $property: $value;
  9 + }
  10 +}
29 test/public/stylesheets/stylesheet.css
@@ -2039,12 +2039,9 @@
2039 2039 }
2040 2040
2041 2041 .foo {
2042   - -moz-animation: fadeIn 5s 0.5s ease both;
2043   - -webkit-animation: fadeIn 5s 0.5s ease both;
2044   - -o-animation: fadeIn 5s 0.5s ease both;
2045   - -ms-animation: fadeIn 5s 0.5s ease both;
2046   - -khtml-animation: fadeIn 5s 0.5s ease both;
2047   - animation: fadeIn 5s 0.5s ease both;
  2042 + -webkit-animation: fadeIn 5s ease 2s 1 normal;
  2043 + -moz-animation: fadeIn 5s ease 2s 1 normal;
  2044 + animation: fadeIn 5s ease 2s 1 normal;
2048 2045 margin: 0 auto;
2049 2046 width: 400px;
2050 2047 }
@@ -2053,9 +2050,23 @@
2053 2050 -webkit-animation-name: bounceIn, fadeIn;
2054 2051 -moz-animation-name: bounceIn, fadeIn;
2055 2052 animation-name: bounceIn, fadeIn;
2056   - -webkit-animation-duration: 2s, 0.5s;
2057   - -moz-animation-duration: 2s, 0.5s;
2058   - animation-duration: 2s, 0.5s;
  2053 + -webkit-animation-duration: 2s, 5s;
  2054 + -moz-animation-duration: 2s, 5s;
  2055 + animation-duration: 2s, 5s;
  2056 + -webkit-animation-timing-function: ease, ease;
  2057 + -moz-animation-timing-function: ease, ease;
  2058 + animation-timing-function: ease, ease;
  2059 + margin: 0 auto;
  2060 + width: 400px;
  2061 +}
  2062 +
  2063 +.baz {
  2064 + -webkit-animation-name: fadeIn;
  2065 + -moz-animation-name: fadeIn;
  2066 + animation-name: fadeIn;
  2067 + -webkit-animation-duration: 2s;
  2068 + -moz-animation-duration: 2s;
  2069 + animation-duration: 2s;
2059 2070 -webkit-animation-timing-function: ease;
2060 2071 -moz-animation-timing-function: ease;
2061 2072 animation-timing-function: ease;
12 test/sass/stylesheet.scss
@@ -7,13 +7,21 @@
7 7 @import "../../stylesheets/animate-sass";
8 8
9 9 .foo {
10   - @include animate(fadeIn, 5s, 0.5s);
  10 + @include animation(fadeIn, 5s, ease, 2s);
11 11 margin: 0 auto;
12 12 width: 400px;
13 13 }
14 14
15 15 .bar {
16   - @include animation-basic((bounceIn, fadeIn), (2.0s, 0.5s));
  16 + @include animation-basic((bounceIn, fadeIn), (2.0s, 5s), (ease ease));
  17 + margin: 0 auto;
  18 + width: 400px;
  19 +}
  20 +
  21 +.baz {
  22 + @include animation-name(fadeIn);
  23 + @include animation-duration(2s);
  24 + @include animation-timing-function(ease);
17 25 margin: 0 auto;
18 26 width: 400px;
19 27 }

0 comments on commit c5d5c64

Please sign in to comment.
Something went wrong with that request. Please try again.