animate 0.1.0 → 0.2.beta.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. data/stylesheets/_animate.scss +15 -9
  2. data/stylesheets/_helpers.scss +10 -6
  3. data/stylesheets/animate/_attention.scss +13 -9
  4. data/stylesheets/animate/_bounce.scss +40 -34
  5. data/stylesheets/animate/_fade.scss +25 -21
  6. data/stylesheets/animate/_flip.scss +47 -33
  7. data/stylesheets/animate/_lightSpeed.scss +7 -3
  8. data/stylesheets/animate/_roll.scss +7 -3
  9. data/stylesheets/animate/_rotate.scss +17 -14
  10. data/stylesheets/animate/_special.scss +6 -2
  11. data/stylesheets/animate/attention/_flash.scss +21 -16
  12. data/stylesheets/animate/attention/_pulse.scss +15 -10
  13. data/stylesheets/animate/attention/_shake.scss +39 -34
  14. data/stylesheets/animate/attention/_swing.scss +24 -19
  15. data/stylesheets/animate/attention/_tada.scss +38 -33
  16. data/stylesheets/animate/attention/_wiggle.scss +39 -34
  17. data/stylesheets/animate/attention/_wobble.scss +27 -22
  18. data/stylesheets/animate/bounce/_bounceIn.scss +100 -75
  19. data/stylesheets/animate/bounce/_bounceOut.scss +88 -63
  20. data/stylesheets/animate/fade/_fadeIn.scss +133 -88
  21. data/stylesheets/animate/fade/_fadeOut.scss +133 -88
  22. data/stylesheets/animate/flip/_flipIn.scss +47 -33
  23. data/stylesheets/animate/flip/_flipOut.scss +35 -21
  24. data/stylesheets/animate/lightSpeed/_lightSpeedIn.scss +22 -17
  25. data/stylesheets/animate/lightSpeed/_lightSpeedOut.scss +14 -9
  26. data/stylesheets/animate/roll/_rollIn.scss +14 -9
  27. data/stylesheets/animate/roll/_rollOut.scss +13 -8
  28. data/stylesheets/animate/rotate/_rotateIn.scss +114 -72
  29. data/stylesheets/animate/rotate/_rotateOut.scss +114 -72
  30. data/stylesheets/animate/special/_hinge.scss +32 -27
  31. metadata +10 -7
data/stylesheets/animate/fade/_fadeOut.scss CHANGED
@@ -8,14 +8,19 @@
8
8
  // ---------------------------------------------------------------------------
9
9
  // fadeOut
10
10
 
11
- @mixin animate-fadeOut($class: $default-animation-class-mode) {
12
- $name: fadeOut;
13
- @include keyframes($name) {
14
- 0% {
15
- opacity: 1;
16
- }
17
- 100% {
18
- opacity: 0;
11
+ @mixin animate-fadeOut(
12
+ $class : $default-animation-class-mode,
13
+ $keyframes : $default-keyframes-output
14
+ ) {
15
+ $name: fadeOut;
16
+ @if $keyframes {
17
+ @include keyframes($name) {
18
+ 0% {
19
+ opacity: 1;
20
+ }
21
+ 100% {
22
+ opacity: 0;
23
+ }
19
24
  }
20
25
  }
21
26
  @include animation-class($name, $class) {}
@@ -24,17 +29,22 @@
24
29
  // ---------------------------------------------------------------------------
25
30
  // fadeOutUp
26
31
 
27
- @mixin animate-fadeOutUp($class: $default-animation-class-mode) {
28
- $name: fadeOutUp;
29
- @include keyframes($name) {
30
- 0% {
31
- @include translateY(0);
32
- opacity: 1;
32
+ @mixin animate-fadeOutUp(
33
+ $class : $default-animation-class-mode,
34
+ $keyframes : $default-keyframes-output
35
+ ) {
36
+ $name: fadeOutUp;
37
+ @if $keyframes {
38
+ @include keyframes($name) {
39
+ 0% {
40
+ @include translateY(0);
41
+ opacity: 1;
42
+ }
43
+ 100% {
44
+ @include translateY(-20px);
45
+ opacity: 0;
46
+ }
33
47
  }
34
- 100% {
35
- @include translateY(-20px);
36
- opacity: 0;
37
- }
38
48
  }
39
49
  @include animation-class($name, $class) {}
40
50
  }
@@ -42,17 +52,22 @@
42
52
  // ---------------------------------------------------------------------------
43
53
  // fadeOutDown
44
54
 
45
- @mixin animate-fadeOutDown($class: $default-animation-class-mode) {
46
- $name: fadeOutDown;
47
- @include keyframes($name) {
48
- 0% {
49
- @include translateY(0);
50
- opacity: 1;
55
+ @mixin animate-fadeOutDown(
56
+ $class : $default-animation-class-mode,
57
+ $keyframes : $default-keyframes-output
58
+ ) {
59
+ $name: fadeOutDown;
60
+ @if $keyframes {
61
+ @include keyframes($name) {
62
+ 0% {
63
+ @include translateY(0);
64
+ opacity: 1;
65
+ }
66
+ 100% {
67
+ @include translateY(20px);
68
+ opacity: 0;
69
+ }
51
70
  }
52
- 100% {
53
- @include translateY(20px);
54
- opacity: 0;
55
- }
56
71
  }
57
72
  @include animation-class($name, $class) {}
58
73
  }
@@ -60,17 +75,22 @@
60
75
  // ---------------------------------------------------------------------------
61
76
  // fadeOutRight
62
77
 
63
- @mixin animate-fadeOutRight($class: $default-animation-class-mode) {
64
- $name: fadeOutRight;
65
- @include keyframes($name) {
66
- 0% {
67
- @include translateX(0);
68
- opacity: 1;
78
+ @mixin animate-fadeOutRight(
79
+ $class : $default-animation-class-mode,
80
+ $keyframes : $default-keyframes-output
81
+ ) {
82
+ $name: fadeOutRight;
83
+ @if $keyframes {
84
+ @include keyframes($name) {
85
+ 0% {
86
+ @include translateX(0);
87
+ opacity: 1;
88
+ }
89
+ 100% {
90
+ @include translateX(20px);
91
+ opacity: 0;
92
+ }
69
93
  }
70
- 100% {
71
- @include translateX(20px);
72
- opacity: 0;
73
- }
74
94
  }
75
95
  @include animation-class($name, $class) {}
76
96
  }
@@ -78,17 +98,22 @@
78
98
  // ---------------------------------------------------------------------------
79
99
  // fadeOutLeft
80
100
 
81
- @mixin animate-fadeOutLeft($class: $default-animation-class-mode) {
82
- $name: fadeOutLeft;
83
- @include keyframes($name) {
84
- 0% {
85
- @include translateX(0);
86
- opacity: 1;
101
+ @mixin animate-fadeOutLeft(
102
+ $class : $default-animation-class-mode,
103
+ $keyframes : $default-keyframes-output
104
+ ) {
105
+ $name: fadeOutLeft;
106
+ @if $keyframes {
107
+ @include keyframes($name) {
108
+ 0% {
109
+ @include translateX(0);
110
+ opacity: 1;
111
+ }
112
+ 100% {
113
+ @include translateX(-20px);
114
+ opacity: 0;
115
+ }
87
116
  }
88
- 100% {
89
- @include translateX(-20px);
90
- opacity: 0;
91
- }
92
117
  }
93
118
  @include animation-class($name, $class) {}
94
119
  }
@@ -96,17 +121,22 @@
96
121
  // ---------------------------------------------------------------------------
97
122
  // fadeOutUpBig
98
123
 
99
- @mixin animate-fadeOutUpBig($class: $default-animation-class-mode) {
100
- $name: fadeOutUpBig;
101
- @include keyframes($name) {
102
- 0% {
103
- @include translateY(0);
104
- opacity: 1;
124
+ @mixin animate-fadeOutUpBig(
125
+ $class : $default-animation-class-mode,
126
+ $keyframes : $default-keyframes-output
127
+ ) {
128
+ $name: fadeOutUpBig;
129
+ @if $keyframes {
130
+ @include keyframes($name) {
131
+ 0% {
132
+ @include translateY(0);
133
+ opacity: 1;
134
+ }
135
+ 100% {
136
+ @include translateY(-2000px);
137
+ opacity: 0;
138
+ }
105
139
  }
106
- 100% {
107
- @include translateY(-2000px);
108
- opacity: 0;
109
- }
110
140
  }
111
141
  @include animation-class($name, $class) {}
112
142
  }
@@ -114,17 +144,22 @@
114
144
  // ---------------------------------------------------------------------------
115
145
  // fadeOutDownBig
116
146
 
117
- @mixin animate-fadeOutDownBig($class: $default-animation-class-mode) {
118
- $name: fadeOutDownBig;
119
- @include keyframes($name) {
120
- 0% {
121
- opacity: 1;
122
- @include translateY(0);
147
+ @mixin animate-fadeOutDownBig(
148
+ $class : $default-animation-class-mode,
149
+ $keyframes : $default-keyframes-output
150
+ ) {
151
+ $name: fadeOutDownBig;
152
+ @if $keyframes {
153
+ @include keyframes($name) {
154
+ 0% {
155
+ opacity: 1;
156
+ @include translateY(0);
157
+ }
158
+ 100% {
159
+ opacity: 0;
160
+ @include translateY(2000px);
161
+ }
123
162
  }
124
- 100% {
125
- opacity: 0;
126
- @include translateY(2000px);
127
- }
128
163
  }
129
164
  @include animation-class($name, $class) {}
130
165
  }
@@ -132,17 +167,22 @@
132
167
  // ---------------------------------------------------------------------------
133
168
  // fadeOutRightBig
134
169
 
135
- @mixin animate-fadeOutRightBig($class: $default-animation-class-mode) {
136
- $name: fadeOutRightBig;
137
- @include keyframes($name) {
138
- 0% {
139
- opacity: 1;
140
- @include translateX(0);
170
+ @mixin animate-fadeOutRightBig(
171
+ $class : $default-animation-class-mode,
172
+ $keyframes : $default-keyframes-output
173
+ ) {
174
+ $name: fadeOutRightBig;
175
+ @if $keyframes {
176
+ @include keyframes($name) {
177
+ 0% {
178
+ opacity: 1;
179
+ @include translateX(0);
180
+ }
181
+ 100% {
182
+ opacity: 0;
183
+ @include translateX(2000px);
184
+ }
141
185
  }
142
- 100% {
143
- opacity: 0;
144
- @include translateX(2000px);
145
- }
146
186
  }
147
187
  @include animation-class($name, $class) {}
148
188
  }
@@ -150,17 +190,22 @@
150
190
  // ---------------------------------------------------------------------------
151
191
  // fadeOutLeftBig
152
192
 
153
- @mixin animate-fadeOutLeftBig($class: $default-animation-class-mode) {
154
- $name: fadeOutLeftBig;
155
- @include keyframes($name) {
156
- 0% {
157
- opacity: 1;
158
- @include translateX(0);
193
+ @mixin animate-fadeOutLeftBig(
194
+ $class : $default-animation-class-mode,
195
+ $keyframes : $default-keyframes-output
196
+ ) {
197
+ $name: fadeOutLeftBig;
198
+ @if $keyframes {
199
+ @include keyframes($name) {
200
+ 0% {
201
+ opacity: 1;
202
+ @include translateX(0);
203
+ }
204
+ 100% {
205
+ opacity: 0;
206
+ @include translateX(-2000px);
207
+ }
159
208
  }
160
- 100% {
161
- opacity: 0;
162
- @include translateX(-2000px);
163
- }
164
209
  }
165
210
  @include animation-class($name, $class) {}
166
211
  }
data/stylesheets/animate/flip/_flipIn.scss CHANGED
@@ -7,33 +7,42 @@
7
7
  // ---------------------------------------------------------------------------
8
8
  // flipIn [ x | y | all ]
9
9
 
10
- @mixin animate-flipIn($sub: all, $class: $default-animation-class-mode) {
10
+ @mixin animate-flipIn(
11
+ $sub : all,
12
+ $class : $default-animation-class-mode,
13
+ $keyframes : $default-keyframes-output
14
+ ) {
11
15
  $sub : compact($sub);
12
16
  $x : yepnope($sub, all x);
13
17
  $y : yepnope($sub, all y);
14
- @if $x { @include animate-flipInX (all, $class); }
15
- @if $y { @include animate-flipInY (all, $class); }
18
+ @if $x { @include animate-flipInX (all, $class, $keyframes); }
19
+ @if $y { @include animate-flipInY (all, $class, $keyframes); }
16
20
  }
17
21
 
18
22
  // ---------------------------------------------------------------------------
19
23
  // flipInX
20
24
 
21
- @mixin animate-flipInX($class: $default-animation-class-mode) {
25
+ @mixin animate-flipInX(
26
+ $class : $default-animation-class-mode,
27
+ $keyframes : $default-keyframes-output
28
+ ) {
22
29
  $name: flipInX;
23
- @include keyframes($name) {
24
- 0% {
25
- @include transform(perspective(400px) rotateX(90deg));
26
- @include opacity(0);
27
- }
28
- 40% {
29
- @include transform(perspective(400px) rotateX(-10deg));
30
- }
31
- 70% {
32
- @include transform(perspective(400px) rotateX(10deg));
33
- }
34
- 100% {
35
- @include transform(perspective(400px) rotateX(0deg));
36
- @include opacity(1);
30
+ @if $keyframes {
31
+ @include keyframes($name) {
32
+ 0% {
33
+ @include transform(perspective(400px) rotateX(90deg));
34
+ @include opacity(0);
35
+ }
36
+ 40% {
37
+ @include transform(perspective(400px) rotateX(-10deg));
38
+ }
39
+ 70% {
40
+ @include transform(perspective(400px) rotateX(10deg));
41
+ }
42
+ 100% {
43
+ @include transform(perspective(400px) rotateX(0deg));
44
+ @include opacity(1);
45
+ }
37
46
  }
38
47
  }
39
48
  @include flip-class($name, $class);
@@ -42,22 +51,27 @@
42
51
  // ---------------------------------------------------------------------------
43
52
  // flipInY
44
53
 
45
- @mixin animate-flipInY($class: $default-animation-class-mode) {
54
+ @mixin animate-flipInY(
55
+ $class : $default-animation-class-mode,
56
+ $keyframes : $default-keyframes-output
57
+ ) {
46
58
  $name: flipInY;
47
- @include keyframes($name) {
48
- 0% {
49
- @include transform(perspective(400px) rotateY(90deg));
50
- @include opacity(0);
51
- }
52
- 40% {
53
- @include transform(perspective(400px) rotateY(-10deg));
54
- }
55
- 70% {
56
- @include transform(perspective(400px) rotateY(10deg));
57
- }
58
- 100% {
59
- @include transform(perspective(400px) rotateY(0deg));
60
- @include opacity(1);
59
+ @if $keyframes {
60
+ @include keyframes($name) {
61
+ 0% {
62
+ @include transform(perspective(400px) rotateY(90deg));
63
+ @include opacity(0);
64
+ }
65
+ 40% {
66
+ @include transform(perspective(400px) rotateY(-10deg));
67
+ }
68
+ 70% {
69
+ @include transform(perspective(400px) rotateY(10deg));
70
+ }
71
+ 100% {
72
+ @include transform(perspective(400px) rotateY(0deg));
73
+ @include opacity(1);
74
+ }
61
75
  }
62
76
  }
63
77
  @include flip-class($name, $class);
data/stylesheets/animate/flip/_flipOut.scss CHANGED
@@ -7,27 +7,36 @@
7
7
  // ---------------------------------------------------------------------------
8
8
  // flipOut [ x | y | all ]
9
9
 
10
- @mixin animate-flipOut($sub: all, $class: $default-animation-class-mode) {
10
+ @mixin animate-flipOut(
11
+ $sub : all,
12
+ $class : $default-animation-class-mode,
13
+ $keyframes : $default-keyframes-output
14
+ ) {
11
15
  $sub : compact($sub);
12
16
  $x : yepnope($sub, all x);
13
17
  $y : yepnope($sub, all y);
14
- @if $x { @include animate-flipOutX (all, $class); }
15
- @if $y { @include animate-flipOutY (all, $class); }
18
+ @if $x { @include animate-flipOutX (all, $class, $keyframes); }
19
+ @if $y { @include animate-flipOutY (all, $class, $keyframes); }
16
20
  }
17
21
 
18
22
  // ---------------------------------------------------------------------------
19
23
  // flipOutX
20
24
 
21
- @mixin animate-flipOutX($class: $default-animation-class-mode) {
25
+ @mixin animate-flipOutX(
26
+ $class : $default-animation-class-mode,
27
+ $keyframes : $default-keyframes-output
28
+ ) {
22
29
  $name: flipOutX;
23
- @include keyframes($name) {
24
- 0% {
25
- @include transform(perspective(400px) rotateX(0deg));
26
- @include opacity(1);
27
- }
28
- 100% {
29
- @include transform(perspective(400px) rotateX(90deg));
30
- @include opacity(0);
30
+ @if $keyframes {
31
+ @include keyframes($name) {
32
+ 0% {
33
+ @include transform(perspective(400px) rotateX(0deg));
34
+ @include opacity(1);
35
+ }
36
+ 100% {
37
+ @include transform(perspective(400px) rotateX(90deg));
38
+ @include opacity(0);
39
+ }
31
40
  }
32
41
  }
33
42
  @include flip-class($name, $class);
@@ -36,16 +45,21 @@
36
45
  // ---------------------------------------------------------------------------
37
46
  // flipOutY
38
47
 
39
- @mixin animate-flipOutY($class: $default-animation-class-mode) {
48
+ @mixin animate-flipOutY(
49
+ $class : $default-animation-class-mode,
50
+ $keyframes : $default-keyframes-output
51
+ ) {
40
52
  $name: flipOutY;
41
- @include keyframes($name) {
42
- 0% {
43
- @include transform(perspective(400px) rotateY(0deg));
44
- @include opacity(1);
45
- }
46
- 100% {
47
- @include transform(perspective(400px) rotateY(90deg));
48
- @include opacity(0);
53
+ @if $keyframes {
54
+ @include keyframes($name) {
55
+ 0% {
56
+ @include transform(perspective(400px) rotateY(0deg));
57
+ @include opacity(1);
58
+ }
59
+ 100% {
60
+ @include transform(perspective(400px) rotateY(90deg));
61
+ @include opacity(0);
62
+ }
49
63
  }
50
64
  }
51
65
  @include flip-class($name, $class);