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/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
  }