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/bounce/_bounceIn.scss CHANGED
@@ -8,23 +8,28 @@
8
8
  // ---------------------------------------------------------------------------
9
9
  // bounceIn
10
10
 
11
- @mixin animate-bounceIn($class: $default-animation-class-mode) {
11
+ @mixin animate-bounceIn(
12
+ $class : $default-animation-class-mode,
13
+ $keyframes : $default-keyframes-output
14
+ ) {
12
15
  $name: bounceIn;
13
- @include keyframes($name) {
14
- 0% {
15
- opacity: 0;
16
- @include scale(0.3);
16
+ @if $keyframes {
17
+ @include keyframes($name) {
18
+ 0% {
19
+ opacity: 0;
20
+ @include scale(0.3);
21
+ }
22
+ 50% {
23
+ opacity: 1;
24
+ @include scale(1.05);
25
+ }
26
+ 70% {
27
+ @include scale(0.9);
28
+ }
29
+ 100% {
30
+ @include scale(1);
31
+ }
17
32
  }
18
- 50% {
19
- opacity: 1;
20
- @include scale(1.05);
21
- }
22
- 70% {
23
- @include scale(0.9);
24
- }
25
- 100% {
26
- @include scale(1);
27
- }
28
33
  }
29
34
  @include animation-class($name, $class) {}
30
35
  }
@@ -32,23 +37,28 @@
32
37
  // ---------------------------------------------------------------------------
33
38
  // bounceInDown
34
39
 
35
- @mixin animate-bounceInDown($class: $default-animation-class-mode) {
40
+ @mixin animate-bounceInDown(
41
+ $class : $default-animation-class-mode,
42
+ $keyframes : $default-keyframes-output
43
+ ) {
36
44
  $name: bounceInDown;
37
- @include keyframes($name) {
38
- 0% {
39
- opacity: 0;
40
- @include translateY(-2000px);
41
- }
42
- 60% {
43
- opacity: 1;
44
- @include translateY(30px);
45
+ @if $keyframes {
46
+ @include keyframes($name) {
47
+ 0% {
48
+ opacity: 0;
49
+ @include translateY(-2000px);
50
+ }
51
+ 60% {
52
+ opacity: 1;
53
+ @include translateY(30px);
54
+ }
55
+ 80% {
56
+ @include translateY(-10px);
57
+ }
58
+ 100% {
59
+ @include translateY(0);
60
+ }
45
61
  }
46
- 80% {
47
- @include translateY(-10px);
48
- }
49
- 100% {
50
- @include translateY(0);
51
- }
52
62
  }
53
63
  @include animation-class($name, $class) {}
54
64
  }
@@ -56,23 +66,28 @@
56
66
  // ---------------------------------------------------------------------------
57
67
  // bounceInUp
58
68
 
59
- @mixin animate-bounceInUp($class: $default-animation-class-mode) {
69
+ @mixin animate-bounceInUp(
70
+ $class : $default-animation-class-mode,
71
+ $keyframes : $default-keyframes-output
72
+ ) {
60
73
  $name: bounceInUp;
61
- @include keyframes($name) {
62
- 0% {
63
- opacity: 0;
64
- @include translateY(2000px);
65
- }
66
- 60% {
67
- opacity: 1;
68
- @include translateY(-30px);
74
+ @if $keyframes {
75
+ @include keyframes($name) {
76
+ 0% {
77
+ opacity: 0;
78
+ @include translateY(2000px);
79
+ }
80
+ 60% {
81
+ opacity: 1;
82
+ @include translateY(-30px);
83
+ }
84
+ 80% {
85
+ @include translateY(10px);
86
+ }
87
+ 100% {
88
+ @include translateY(0);
89
+ }
69
90
  }
70
- 80% {
71
- @include translateY(10px);
72
- }
73
- 100% {
74
- @include translateY(0);
75
- }
76
91
  }
77
92
  @include animation-class($name, $class) {}
78
93
  }
@@ -80,23 +95,28 @@
80
95
  // ---------------------------------------------------------------------------
81
96
  // bounceInRight
82
97
 
83
- @mixin animate-bounceInRight($class: $default-animation-class-mode) {
98
+ @mixin animate-bounceInRight(
99
+ $class : $default-animation-class-mode,
100
+ $keyframes : $default-keyframes-output
101
+ ) {
84
102
  $name: bounceInRight;
85
- @include keyframes($name) {
86
- 0% {
87
- opacity: 0;
88
- @include translateX(2000px);
89
- }
90
- 60% {
91
- opacity: 1;
92
- @include translateX(-30px);
93
- }
94
- 80% {
95
- @include translateX(10px);
103
+ @if $keyframes {
104
+ @include keyframes($name) {
105
+ 0% {
106
+ opacity: 0;
107
+ @include translateX(2000px);
108
+ }
109
+ 60% {
110
+ opacity: 1;
111
+ @include translateX(-30px);
112
+ }
113
+ 80% {
114
+ @include translateX(10px);
115
+ }
116
+ 100% {
117
+ @include translateX(0);
118
+ }
96
119
  }
97
- 100% {
98
- @include translateX(0);
99
- }
100
120
  }
101
121
  @include animation-class($name, $class) {}
102
122
  }
@@ -104,23 +124,28 @@
104
124
  // ---------------------------------------------------------------------------
105
125
  // bounceInLeft
106
126
 
107
- @mixin animate-bounceInLeft($class: $default-animation-class-mode) {
127
+ @mixin animate-bounceInLeft(
128
+ $class : $default-animation-class-mode,
129
+ $keyframes : $default-keyframes-output
130
+ ) {
108
131
  $name: bounceInLeft;
109
- @include keyframes($name) {
110
- 0% {
111
- opacity: 0;
112
- @include translateX(-2000px);
113
- }
114
- 60% {
115
- opacity: 1;
116
- @include translateX(30px);
117
- }
118
- 80% {
119
- @include translateX(-10px);
132
+ @if $keyframes {
133
+ @include keyframes($name) {
134
+ 0% {
135
+ opacity: 0;
136
+ @include translateX(-2000px);
137
+ }
138
+ 60% {
139
+ opacity: 1;
140
+ @include translateX(30px);
141
+ }
142
+ 80% {
143
+ @include translateX(-10px);
144
+ }
145
+ 100% {
146
+ @include translateX(0);
147
+ }
120
148
  }
121
- 100% {
122
- @include translateX(0);
123
- }
124
149
  }
125
150
  @include animation-class($name, $class) {}
126
151
  }
data/stylesheets/animate/bounce/_bounceOut.scss CHANGED
@@ -8,23 +8,28 @@
8
8
  // ---------------------------------------------------------------------------
9
9
  // bounceOut
10
10
 
11
- @mixin animate-bounceOut($class: $default-animation-class-mode) {
11
+ @mixin animate-bounceOut(
12
+ $class : $default-animation-class-mode,
13
+ $keyframes : $default-keyframes-output
14
+ ) {
12
15
  $name: bounceOut;
13
- @include keyframes(bounceOut) {
14
- 0% {
15
- @include scale(1);
16
+ @if $keyframes {
17
+ @include keyframes(bounceOut) {
18
+ 0% {
19
+ @include scale(1);
20
+ }
21
+ 25% {
22
+ @include scale(0.95);
23
+ }
24
+ 50% {
25
+ opacity: 1;
26
+ @include scale(1.1);
27
+ }
28
+ 100% {
29
+ opacity: 0;
30
+ @include scale(0.3);
31
+ }
16
32
  }
17
- 25% {
18
- @include scale(0.95);
19
- }
20
- 50% {
21
- opacity: 1;
22
- @include scale(1.1);
23
- }
24
- 100% {
25
- opacity: 0;
26
- @include scale(0.3);
27
- }
28
33
  }
29
34
  @include animation-class($name, $class) {}
30
35
  }
@@ -32,20 +37,25 @@
32
37
  // ---------------------------------------------------------------------------
33
38
  // bounceOutUp
34
39
 
35
- @mixin animate-bounceOutUp($class: $default-animation-class-mode) {
40
+ @mixin animate-bounceOutUp(
41
+ $class : $default-animation-class-mode,
42
+ $keyframes : $default-keyframes-output
43
+ ) {
36
44
  $name: bounceOutUp;
37
- @include keyframes($name) {
38
- 0% {
39
- @include translateY(0);
40
- }
41
- 20% {
42
- opacity: 1;
43
- @include translateY(20px);
45
+ @if $keyframes {
46
+ @include keyframes($name) {
47
+ 0% {
48
+ @include translateY(0);
49
+ }
50
+ 20% {
51
+ opacity: 1;
52
+ @include translateY(20px);
53
+ }
54
+ 100% {
55
+ opacity: 0;
56
+ @include translateY(-2000px);
57
+ }
44
58
  }
45
- 100% {
46
- opacity: 0;
47
- @include translateY(-2000px);
48
- }
49
59
  }
50
60
  @include animation-class($name, $class) {}
51
61
  }
@@ -53,20 +63,25 @@
53
63
  // ---------------------------------------------------------------------------
54
64
  // bounceOutDown
55
65
 
56
- @mixin animate-bounceOutDown($class: $default-animation-class-mode) {
66
+ @mixin animate-bounceOutDown(
67
+ $class : $default-animation-class-mode,
68
+ $keyframes : $default-keyframes-output
69
+ ) {
57
70
  $name: bounceOutDown;
58
- @include keyframes($name) {
59
- 0% {
60
- @include translateY(0);
71
+ @if $keyframes {
72
+ @include keyframes($name) {
73
+ 0% {
74
+ @include translateY(0);
75
+ }
76
+ 20% {
77
+ opacity: 1;
78
+ @include translateY(-20px);
79
+ }
80
+ 100% {
81
+ opacity: 0;
82
+ @include translateY(2000px);
83
+ }
61
84
  }
62
- 20% {
63
- opacity: 1;
64
- @include translateY(-20px);
65
- }
66
- 100% {
67
- opacity: 0;
68
- @include translateY(2000px);
69
- }
70
85
  }
71
86
  @include animation-class($name, $class) {}
72
87
  }
@@ -74,20 +89,25 @@
74
89
  // ---------------------------------------------------------------------------
75
90
  // bounceOutLeft
76
91
 
77
- @mixin animate-bounceOutLeft($class: $default-animation-class-mode) {
92
+ @mixin animate-bounceOutLeft(
93
+ $class : $default-animation-class-mode,
94
+ $keyframes : $default-keyframes-output
95
+ ) {
78
96
  $name: bounceOutLeft;
79
- @include keyframes($name) {
80
- 0% {
81
- @include translateX(0);
82
- }
83
- 20% {
84
- opacity: 1;
85
- @include translateX(20px);
97
+ @if $keyframes {
98
+ @include keyframes($name) {
99
+ 0% {
100
+ @include translateX(0);
101
+ }
102
+ 20% {
103
+ opacity: 1;
104
+ @include translateX(20px);
105
+ }
106
+ 100% {
107
+ opacity: 0;
108
+ @include translateX(-2000px);
109
+ }
86
110
  }
87
- 100% {
88
- opacity: 0;
89
- @include translateX(-2000px);
90
- }
91
111
  }
92
112
  @include animation-class($name, $class) {}
93
113
  }
@@ -95,20 +115,25 @@
95
115
  // ---------------------------------------------------------------------------
96
116
  // bounceOutRight
97
117
 
98
- @mixin animate-bounceOutRight($class: $default-animation-class-mode) {
118
+ @mixin animate-bounceOutRight(
119
+ $class : $default-animation-class-mode,
120
+ $keyframes : $default-keyframes-output
121
+ ) {
99
122
  $name: bounceOutRight;
100
- @include keyframes($name) {
101
- 0% {
102
- @include translateX(0);
103
- }
104
- 20% {
105
- opacity: 1;
106
- @include translateX(-20px);
123
+ @if $keyframes {
124
+ @include keyframes($name) {
125
+ 0% {
126
+ @include translateX(0);
127
+ }
128
+ 20% {
129
+ opacity: 1;
130
+ @include translateX(-20px);
131
+ }
132
+ 100% {
133
+ opacity: 0;
134
+ @include translateX(2000px);
135
+ }
107
136
  }
108
- 100% {
109
- opacity: 0;
110
- @include translateX(2000px);
111
- }
112
137
  }
113
138
  @include animation-class($name, $class) {}
114
139
  }
data/stylesheets/animate/fade/_fadeIn.scss CHANGED
@@ -8,15 +8,20 @@
8
8
  // ---------------------------------------------------------------------------
9
9
  // fadeIn
10
10
 
11
- @mixin animate-fadeIn($class: $default-animation-class-mode) {
12
- $name: fadeIn;
13
- @include keyframes($name) {
14
- 0% {
15
- opacity: 0;
11
+ @mixin animate-fadeIn(
12
+ $class : $default-animation-class-mode,
13
+ $keyframes : $default-keyframes-output
14
+ ) {
15
+ $name: fadeIn;
16
+ @if $keyframes {
17
+ @include keyframes($name) {
18
+ 0% {
19
+ opacity: 0;
20
+ }
21
+ 100% {
22
+ opacity: 1;
23
+ }
16
24
  }
17
- 100% {
18
- opacity: 1;
19
- }
20
25
  }
21
26
  @include animation-class($name, $class) {}
22
27
  }
@@ -24,17 +29,22 @@
24
29
  // ---------------------------------------------------------------------------
25
30
  // fadeInUp
26
31
 
27
- @mixin animate-fadeInUp($class: $default-animation-class-mode) {
28
- $name: fadeInUp;
29
- @include keyframes($name) {
30
- 0% {
31
- @include translateY(20px);
32
- opacity: 0;
32
+ @mixin animate-fadeInUp(
33
+ $class : $default-animation-class-mode,
34
+ $keyframes : $default-keyframes-output
35
+ ) {
36
+ $name: fadeInUp;
37
+ @if $keyframes {
38
+ @include keyframes($name) {
39
+ 0% {
40
+ @include translateY(20px);
41
+ opacity: 0;
42
+ }
43
+ 100% {
44
+ @include translateY(0);
45
+ opacity: 1;
46
+ }
33
47
  }
34
- 100% {
35
- @include translateY(0);
36
- opacity: 1;
37
- }
38
48
  }
39
49
  @include animation-class($name, $class) {}
40
50
  }
@@ -42,17 +52,22 @@
42
52
  // ---------------------------------------------------------------------------
43
53
  // fadeInDown
44
54
 
45
- @mixin animate-fadeInDown($class: $default-animation-class-mode) {
46
- $name: fadeInDown;
47
- @include keyframes($name) {
48
- 0% {
49
- @include translateY(-20px);
50
- opacity: 0;
55
+ @mixin animate-fadeInDown(
56
+ $class : $default-animation-class-mode,
57
+ $keyframes : $default-keyframes-output
58
+ ) {
59
+ $name: fadeInDown;
60
+ @if $keyframes {
61
+ @include keyframes($name) {
62
+ 0% {
63
+ @include translateY(-20px);
64
+ opacity: 0;
65
+ }
66
+ 100% {
67
+ @include translateY(0);
68
+ opacity: 1;
69
+ }
51
70
  }
52
- 100% {
53
- @include translateY(0);
54
- opacity: 1;
55
- }
56
71
  }
57
72
  @include animation-class($name, $class) {}
58
73
  }
@@ -60,17 +75,22 @@
60
75
  // ---------------------------------------------------------------------------
61
76
  // fadeInRight
62
77
 
63
- @mixin animate-fadeInRight($class: $default-animation-class-mode) {
64
- $name: fadeInRight;
65
- @include keyframes($name) {
66
- 0% {
67
- @include translateX(20px);
68
- opacity: 0;
78
+ @mixin animate-fadeInRight(
79
+ $class : $default-animation-class-mode,
80
+ $keyframes : $default-keyframes-output
81
+ ) {
82
+ $name: fadeInRight;
83
+ @if $keyframes {
84
+ @include keyframes($name) {
85
+ 0% {
86
+ @include translateX(20px);
87
+ opacity: 0;
88
+ }
89
+ 100% {
90
+ @include translateX(0);
91
+ opacity: 1;
92
+ }
69
93
  }
70
- 100% {
71
- @include translateX(0);
72
- opacity: 1;
73
- }
74
94
  }
75
95
  @include animation-class($name, $class) {}
76
96
  }
@@ -78,17 +98,22 @@
78
98
  // ---------------------------------------------------------------------------
79
99
  // fadeInLeft
80
100
 
81
- @mixin animate-fadeInLeft($class: $default-animation-class-mode) {
82
- $name: fadeInLeft;
83
- @include keyframes($name) {
84
- 0% {
85
- @include translateX(-20px);
86
- opacity: 0;
101
+ @mixin animate-fadeInLeft(
102
+ $class : $default-animation-class-mode,
103
+ $keyframes : $default-keyframes-output
104
+ ) {
105
+ $name: fadeInLeft;
106
+ @if $keyframes {
107
+ @include keyframes($name) {
108
+ 0% {
109
+ @include translateX(-20px);
110
+ opacity: 0;
111
+ }
112
+ 100% {
113
+ @include translateX(0);
114
+ opacity: 1;
115
+ }
87
116
  }
88
- 100% {
89
- @include translateX(0);
90
- opacity: 1;
91
- }
92
117
  }
93
118
  @include animation-class($name, $class) {}
94
119
  }
@@ -96,17 +121,22 @@
96
121
  // ---------------------------------------------------------------------------
97
122
  // fadeInUpBig
98
123
 
99
- @mixin animate-fadeInUpBig($class: $default-animation-class-mode) {
100
- $name: fadeInUpBig;
101
- @include keyframes($name) {
102
- 0% {
103
- @include translateY(2000px);
104
- opacity: 0;
124
+ @mixin animate-fadeInUpBig(
125
+ $class : $default-animation-class-mode,
126
+ $keyframes : $default-keyframes-output
127
+ ) {
128
+ $name: fadeInUpBig;
129
+ @if $keyframes {
130
+ @include keyframes($name) {
131
+ 0% {
132
+ @include translateY(2000px);
133
+ opacity: 0;
134
+ }
135
+ 100% {
136
+ @include translateY(0);
137
+ opacity: 1;
138
+ }
105
139
  }
106
- 100% {
107
- @include translateY(0);
108
- opacity: 1;
109
- }
110
140
  }
111
141
  @include animation-class($name, $class) {}
112
142
  }
@@ -114,17 +144,22 @@
114
144
  // ---------------------------------------------------------------------------
115
145
  // fadeInDownBig
116
146
 
117
- @mixin animate-fadeInDownBig($class: $default-animation-class-mode) {
118
- $name: fadeInDownBig;
119
- @include keyframes($name) {
120
- 0% {
121
- opacity: 0;
122
- @include translateY(-2000px);
147
+ @mixin animate-fadeInDownBig(
148
+ $class : $default-animation-class-mode,
149
+ $keyframes : $default-keyframes-output
150
+ ) {
151
+ $name: fadeInDownBig;
152
+ @if $keyframes {
153
+ @include keyframes($name) {
154
+ 0% {
155
+ opacity: 0;
156
+ @include translateY(-2000px);
157
+ }
158
+ 100% {
159
+ opacity: 1;
160
+ @include translateY(0);
161
+ }
123
162
  }
124
- 100% {
125
- opacity: 1;
126
- @include translateY(0);
127
- }
128
163
  }
129
164
  @include animation-class($name, $class) {}
130
165
  }
@@ -132,17 +167,22 @@
132
167
  // ---------------------------------------------------------------------------
133
168
  // fadeInRightBig
134
169
 
135
- @mixin animate-fadeInRightBig($class: $default-animation-class-mode) {
136
- $name: fadeInRightBig;
137
- @include keyframes($name) {
138
- 0% {
139
- opacity: 0;
140
- @include translateX(2000px);
170
+ @mixin animate-fadeInRightBig(
171
+ $class : $default-animation-class-mode,
172
+ $keyframes : $default-keyframes-output
173
+ ) {
174
+ $name: fadeInRightBig;
175
+ @if $keyframes {
176
+ @include keyframes($name) {
177
+ 0% {
178
+ opacity: 0;
179
+ @include translateX(2000px);
180
+ }
181
+ 100% {
182
+ opacity: 1;
183
+ @include translateX(0);
184
+ }
141
185
  }
142
- 100% {
143
- opacity: 1;
144
- @include translateX(0);
145
- }
146
186
  }
147
187
  @include animation-class($name, $class) {}
148
188
  }
@@ -150,17 +190,22 @@
150
190
  // ---------------------------------------------------------------------------
151
191
  // fadeInLeftBig
152
192
 
153
- @mixin animate-fadeInLeftBig($class: $default-animation-class-mode) {
154
- $name: fadeInLeftBig;
155
- @include keyframes($name) {
156
- 0% {
157
- opacity: 0;
158
- @include translateX(-2000px);
193
+ @mixin animate-fadeInLeftBig(
194
+ $class : $default-animation-class-mode,
195
+ $keyframes : $default-keyframes-output
196
+ ) {
197
+ $name: fadeInLeftBig;
198
+ @if $keyframes {
199
+ @include keyframes($name) {
200
+ 0% {
201
+ opacity: 0;
202
+ @include translateX(-2000px);
203
+ }
204
+ 100% {
205
+ opacity: 1;
206
+ @include translateX(0);
207
+ }
159
208
  }
160
- 100% {
161
- opacity: 1;
162
- @include translateX(0);
163
- }
164
209
  }
165
210
  @include animation-class($name, $class) {}
166
211
  }