animate 0.1.0 → 0.2.beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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);