rapido-css 0.1.1 → 0.1.2

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 (46) hide show
  1. data/stylesheets/_default-styles.scss +352 -352
  2. data/stylesheets/_functions.scss +77 -50
  3. data/stylesheets/_susy.scss +15 -12
  4. data/stylesheets/components/_alerts.scss +21 -21
  5. data/stylesheets/components/_breadcrumbs.scss +15 -15
  6. data/stylesheets/components/_button-groups.scss +51 -53
  7. data/stylesheets/components/_buttons.scss +94 -97
  8. data/stylesheets/components/_captions.scss +45 -45
  9. data/stylesheets/components/_close.scss +27 -27
  10. data/stylesheets/components/_dropdowns.scss +121 -121
  11. data/stylesheets/components/_forms.scss +246 -248
  12. data/stylesheets/components/_grids.scss +35 -35
  13. data/stylesheets/components/_labels.scss +38 -38
  14. data/stylesheets/components/_modals.scss +242 -248
  15. data/stylesheets/components/_navs.scss +86 -91
  16. data/stylesheets/components/_pager.scss +53 -53
  17. data/stylesheets/components/_pagination.scss +83 -85
  18. data/stylesheets/components/_responsive-navs.scss +84 -84
  19. data/stylesheets/components/_sliders.scss +54 -58
  20. data/stylesheets/components/_tables.scss +69 -74
  21. data/stylesheets/components/_tabs.scss +54 -54
  22. data/stylesheets/components/_type.scss +134 -140
  23. data/stylesheets/{_rapido.scss → rapido.scss} +0 -8
  24. data/stylesheets/settings/_base.scss +23 -23
  25. data/stylesheets/settings/_colors.scss +13 -13
  26. data/stylesheets/settings/_components.scss +43 -42
  27. data/stylesheets/settings/_dimensions.scss +91 -91
  28. data/stylesheets/settings/_effects.scss +28 -14
  29. data/stylesheets/susy/{_susy_background.scss → _background.scss} +0 -0
  30. data/stylesheets/susy/{_susy_functions.scss → _functions.scss} +0 -0
  31. data/stylesheets/susy/{_susy_grid.scss → _grid.scss} +0 -0
  32. data/stylesheets/susy/{_susy_isolation.scss → _isolation.scss} +1 -0
  33. data/stylesheets/susy/{_susy_margin.scss → _margin.scss} +0 -0
  34. data/stylesheets/susy/{_susy_media.scss → _media.scss} +0 -0
  35. data/stylesheets/susy/{_susy_padding.scss → _padding.scss} +0 -0
  36. data/stylesheets/susy/{_susy_settings.scss → _settings.scss} +0 -0
  37. data/stylesheets/susy/{_susy_support.scss → _support.scss} +0 -0
  38. data/stylesheets/susy/{_susy_units.scss → _units.scss} +0 -0
  39. data/stylesheets/utilities/_animations.scss +638 -597
  40. data/stylesheets/utilities/_debug.scss +43 -43
  41. data/stylesheets/utilities/_helper-classes.scss +70 -54
  42. data/stylesheets/utilities/_icon-fonts.scss +90 -90
  43. data/stylesheets/utilities/_mixins.scss +390 -357
  44. metadata +20 -17
  45. checksums.yaml +0 -15
  46. data/stylesheets/config.rb +0 -8
data/stylesheets/utilities/_animations.scss CHANGED
@@ -1,701 +1,742 @@
1
- /* =================================================================================================================
1
+ /*
2
2
 
3
3
  Animations
4
4
 
5
- All the animations in [theCSSguru](https://twitter.com/theCSSguru)'s [Animate mixin](http://thecssguru.freeiz.com/animate/) are available with the same mixin.
5
+ All the animations in [theCSSguru](https://twitter.com/theCSSguru)'s [Animate mixin](http://thecssguru.freeiz.com/animate/) are available with the same mixin:
6
6
 
7
- #### Use
7
+ * **Attention seekers:** flash, bounce, shake, tada
8
+ * **Fading entrances:** , fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeInUpBig, fadeInDownBig, fadeInLeftBig, fadeInRightBig
9
+ * **Fading exits**: fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUpBig, fadeOutDownBig, fadeOutLeftBig, fadeOutRightBig
10
+ * **Bouncing entrances:** bounceIn, bounceInDown, bounceInUp, bounceInLeft, bounceInRight
11
+ * **Bouncing exits:** bounceOut, bounceOutDown, bounceOutUp, bounceOutLeft, bounceOutRight
12
+ * **Rotating entrances:** rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight
13
+ * **Rotating exits:** rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight
8
14
 
9
- By default are only available `fadeIn` and `fadeOut`. To enable more animations add them to the `$animations` variable in `_effects.scss`.
15
+ Styleguide 20
10
16
 
11
- #### Mixin
17
+ */
12
18
 
13
- @include animate(fadeIn);
19
+ // Disable all animations by default
14
20
 
15
- #### Silent classes
21
+ $fadeIn: false !default;
22
+ $fadeOut: false !default;
23
+ $fadeInUp: false !default;
24
+ $fadeOutUp: false !default;
25
+ $fadeInDown: false !default;
26
+ $fadeOutDown: false !default;
27
+ $fadeInRight: false !default;
28
+ $fadeOutLeft: false !default;
29
+ $fadeInLeft: false !default;
30
+ $fadeOutRight: false !default;
31
+ $fadeInUpBig: false !default;
32
+ $fadeOutUpBig: false !default;
33
+ $fadeInDownBig: false !default;
34
+ $fadeOutDownBig: false !default;
35
+ $fadeInRightBig: false !default;
36
+ $fadeOutLeftBig: false !default;
37
+ $fadeInLeftBig: false !default;
38
+ $fadeOutRightBig: false !default;
39
+ $bounceIn: false !default;
40
+ $bounceInDown: false !default;
41
+ $bounceInUp: false !default;
42
+ $bounceInRight: false !default;
43
+ $bounceInLeft: false !default;
44
+ $bounceOut: false !default;
45
+ $bounceOutUp: false !default;
46
+ $bounceOutDown: false !default;
47
+ $bounceOutLeft: false !default;
48
+ $bounceOutRight: false !default;
49
+ $flash: false !default;
50
+ $bounce: false !default;
51
+ $shake: false !default;
52
+ $rotateInDownLeft: false !default;
53
+ $rotateInUpLeft: false !default;
54
+ $rotateInUpRight: false !default;
55
+ $rotateInDownRight: false !default;
56
+ $rotateOutDownLeft: false !default;
57
+ $rotateOutUpLeft: false !default;
58
+ $rotateOutDownRight: false !default;
59
+ $rotateOutUpRight: false !default;
60
+ $rotateIn: false !default;
61
+ $rotateOut: false !default;
62
+ $tada: false !default;
16
63
 
17
- There are also available silent classes for all enabled animations to use with `@extend`
64
+ // Enable animation from the settings
18
65
 
19
- @extend %fadeIn;
66
+ @each $animation in $animations {
67
+ @if $animation == 'fadeIn' {$fadeIn: true;}
68
+ @if $animation == 'fadeOut' {$fadeOut: true;}
69
+ @if $animation == 'fadeInUp' {$fadeInUp: true;}
70
+ @if $animation == 'fadeOutUp' {$fadeOutUp: true;}
71
+ @if $animation == 'fadeInDown' {$fadeInDown: true;}
72
+ @if $animation == 'fadeOutDown' {$fadeOutDown: true;}
73
+ @if $animation == 'fadeInRight' {$fadeInRight: true;}
74
+ @if $animation == 'fadeOutLeft' {$fadeOutLeft: true;}
75
+ @if $animation == 'fadeInLeft' {$fadeInLeft: true;}
76
+ @if $animation == 'fadeOutRight' {$fadeOutRight: true;}
77
+ @if $animation == 'fadeInUpBig' {$fadeInUpBig: true;}
78
+ @if $animation == 'fadeOutUpBig' {$fadeOutUpBig: true;}
79
+ @if $animation == 'fadeInDownBig' {$fadeInDownBig: true;}
80
+ @if $animation == 'fadeOutDownBig' {$fadeOutDownBig: true;}
81
+ @if $animation == 'fadeInRightBig' {$fadeInRightBig: true;}
82
+ @if $animation == 'fadeOutLeftBig' {$fadeOutLeftBig: true;}
83
+ @if $animation == 'fadeInLeftBig' {$fadeInLeftBig: true;}
84
+ @if $animation == 'fadeOutRightBig' {$fadeOutRightBig: true;}
85
+ @if $animation == 'bounceIn' {$bounceIn: true;}
86
+ @if $animation == 'bounceInDown' {$bounceInDown: true;}
87
+ @if $animation == 'bounceInUp' {$bounceInUp: true;}
88
+ @if $animation == 'bounceInRight' {$bounceInRight: true;}
89
+ @if $animation == 'bounceInLeft' {$bounceInLeft: true;}
90
+ @if $animation == 'bounceOut' {$bounceOut: true;}
91
+ @if $animation == 'bounceOutUp' {$bounceOutUp: true;}
92
+ @if $animation == 'bounceOutDown' {$bounceOutDown: true;}
93
+ @if $animation == 'bounceOutLeft' {$bounceOutLeft: true;}
94
+ @if $animation == 'bounceOutRight' {$bounceOutRight: true;}
95
+ @if $animation == 'flash' {$flash: true;}
96
+ @if $animation == 'bounce' {$bounce: true;}
97
+ @if $animation == 'shake' {$shake: true;}
98
+ @if $animation == 'rotateInDownLeft' {$rotateInDownLeft: true;}
99
+ @if $animation == 'rotateInUpLeft' {$rotateInUpLeft: true;}
100
+ @if $animation == 'rotateInUpRight' {$rotateInUpRight: true;}
101
+ @if $animation == 'rotateInDownRight' {$rotateInDownRight: true;}
102
+ @if $animation == 'rotateOutDownLeft' {$rotateOutDownLeft: true;}
103
+ @if $animation == 'rotateOutUpLeft' {$rotateOutUpLeft: true;}
104
+ @if $animation == 'rotateOutDownRight' {$rotateOutDownRight: true;}
105
+ @if $animation == 'rotateOutUpRight' {$rotateOutUpRight: true;}
106
+ @if $animation == 'rotateIn' {$rotateIn: true;}
107
+ @if $animation == 'rotateOut' {$rotateOut: true;}
108
+ @if $animation == 'tada' {$tada: true;}
109
+ }
20
110
 
21
- Styleguide 20.
22
111
 
23
- ================================================================================================================= */
112
+ /*
24
113
 
25
- // Disable all animations by default
26
- // --------------------------------------------------------------------------------------------------------------------
27
-
28
- $fadeIn: false !default;
29
- $fadeOut: false !default;
30
- $fadeInUp: false !default;
31
- $fadeOutUp: false !default;
32
- $fadeInDown: false !default;
33
- $fadeOutDown: false !default;
34
- $fadeInRight: false !default;
35
- $fadeOutLeft: false !default;
36
- $fadeInLeft: false !default;
37
- $fadeOutRight: false !default;
38
- $fadeInUpBig: false !default;
39
- $fadeOutUpBig: false !default;
40
- $fadeInDownBig: false !default;
41
- $fadeOutDownBig: false !default;
42
- $fadeInRightBig: false !default;
43
- $fadeOutLeftBig: false !default;
44
- $fadeInLeftBig: false !default;
45
- $fadeOutRightBig: false !default;
46
- $bounceIn: false !default;
47
- $bounceInDown: false !default;
48
- $bounceInUp: false !default;
49
- $bounceInRight: false !default;
50
- $bounceInLeft: false !default;
51
- $bounceOut: false !default;
52
- $bounceOutUp: false !default;
53
- $bounceOutDown: false !default;
54
- $bounceOutLeft: false !default;
55
- $bounceOutRight: false !default;
56
- $flash: false !default;
57
- $bounce: false !default;
58
- $shake: false !default;
59
- $rotateInDownLeft: false !default;
60
- $rotateInUpLeft: false !default;
61
- $rotateInUpRight: false !default;
62
- $rotateInDownRight: false !default;
63
- $rotateOutDownLeft: false !default;
64
- $rotateOutUpLeft: false !default;
65
- $rotateOutDownRight: false !default;
66
- $rotateOutUpRight: false !default;
67
- $rotateIn: false !default;
68
- $rotateOut: false !default;
69
- $tada: false !default;
114
+ Classes for animations
70
115
 
71
- // Enable animation from the settings
72
- // --------------------------------------------------------------------------------------------------------------------
116
+ There are available classes for all enabled animations to use with `@extend`.
117
+
118
+ Example:
119
+
120
+ @extend %fadeIn;
121
+
122
+ Styleguide 20.3
123
+
124
+ */
125
+
126
+ @if $animations-classes {
127
+ @each $animation in $animations {
128
+ .#{$animation} {
129
+ @include animate($animation);
130
+ }
131
+ }
132
+ }
133
+
134
+ /*
135
+
136
+ Classes for delays
137
+
138
+ Like classes for the animations are also available 8 classes for delays.
139
+ Available delays: .delay-25, .delay-50, .delay-75, .delay-100, .delay-125, .delay-150, .delay-175, .delay-200.
140
+
141
+ Example:
142
+
143
+ @extend .delay-50;
144
+
145
+ Styleguide 20.4
146
+
147
+ */
73
148
 
74
- @each $animation in $animations {
75
- @if $animation == 'fadeIn' {$fadeIn: true;}
76
- @if $animation == 'fadeOut' {$fadeOut: true;}
77
- @if $animation == 'fadeInUp' {$fadeInUp: true;}
78
- @if $animation == 'fadeOutUp' {$fadeOutUp: true;}
79
- @if $animation == 'fadeInDown' {$fadeInDown: true;}
80
- @if $animation == 'fadeOutDown' {$fadeOutDown: true;}
81
- @if $animation == 'fadeInRight' {$fadeInRight: true;}
82
- @if $animation == 'fadeOutLeft' {$fadeOutLeft: true;}
83
- @if $animation == 'fadeInLeft' {$fadeInLeft: true;}
84
- @if $animation == 'fadeOutRight' {$fadeOutRight: true;}
85
- @if $animation == 'fadeInUpBig' {$fadeInUpBig: true;}
86
- @if $animation == 'fadeOutUpBig' {$fadeOutUpBig: true;}
87
- @if $animation == 'fadeInDownBig' {$fadeInDownBig: true;}
88
- @if $animation == 'fadeOutDownBig' {$fadeOutDownBig: true;}
89
- @if $animation == 'fadeInRightBig' {$fadeInRightBig: true;}
90
- @if $animation == 'fadeOutLeftBig' {$fadeOutLeftBig: true;}
91
- @if $animation == 'fadeInLeftBig' {$fadeInLeftBig: true;}
92
- @if $animation == 'fadeOutRightBig' {$fadeOutRightBig: true;}
93
- @if $animation == 'bounceIn' {$bounceIn: true;}
94
- @if $animation == 'bounceInDown' {$bounceInDown: true;}
95
- @if $animation == 'bounceInUp' {$bounceInUp: true;}
96
- @if $animation == 'bounceInRight' {$bounceInRight: true;}
97
- @if $animation == 'bounceInLeft' {$bounceInLeft: true;}
98
- @if $animation == 'bounceOut' {$bounceOut: true;}
99
- @if $animation == 'bounceOutUp' {$bounceOutUp: true;}
100
- @if $animation == 'bounceOutDown' {$bounceOutDown: true;}
101
- @if $animation == 'bounceOutLeft' {$bounceOutLeft: true;}
102
- @if $animation == 'bounceOutRight' {$bounceOutRight: true;}
103
- @if $animation == 'flash' {$flash: true;}
104
- @if $animation == 'bounce' {$bounce: true;}
105
- @if $animation == 'shake' {$shake: true;}
106
- @if $animation == 'rotateInDownLeft' {$rotateInDownLeft: true;}
107
- @if $animation == 'rotateInUpLeft' {$rotateInUpLeft: true;}
108
- @if $animation == 'rotateInUpRight' {$rotateInUpRight: true;}
109
- @if $animation == 'rotateInDownRight' {$rotateInDownRight: true;}
110
- @if $animation == 'rotateOutDownLeft' {$rotateOutDownLeft: true;}
111
- @if $animation == 'rotateOutUpLeft' {$rotateOutUpLeft: true;}
112
- @if $animation == 'rotateOutDownRight' {$rotateOutDownRight: true;}
113
- @if $animation == 'rotateOutUpRight' {$rotateOutUpRight: true;}
114
- @if $animation == 'rotateIn' {$rotateIn: true;}
115
- @if $animation == 'rotateOut' {$rotateOut: true;}
116
- @if $animation == 'tada' {$tada: true;}
117
- }
118
-
119
-
120
-
121
- // Animate Mixin Plugin;
122
- // --------------------------------------------------------------------------------------------------------------------
123
-
124
- @mixin animate($name, $duration: $animations-duration, $delay: $animations-delay, $function: $animations-function, $mode: $animations-mode) {
125
- @include experimental(animation, $name $duration $delay $function $mode);
126
- }
127
-
128
- // Classes that can be used with @extend;
129
149
  @if $animations-classes {
130
- @each $animation in $animations {
131
- %#{$animation} {
132
- @include animate($animation);
133
- }
134
- }
150
+ $delays: 0.25s, 0.50s, 0.75s, 1.00s, 1.25s, 1.50s, 1.75s, 2.00s;
151
+ @each $delay in $delays {
152
+ $delay-stripped: "";
153
+ @if($delay == 0.25s) { $delay-stripped: 025; }
154
+ @if($delay == 0.50s) { $delay-stripped: 050; }
155
+ @if($delay == 0.75s) { $delay-stripped: 075; }
156
+ @if($delay == 1.00s) { $delay-stripped: 100; }
157
+ @if($delay == 1.25s) { $delay-stripped: 125; }
158
+ @if($delay == 1.50s) { $delay-stripped: 150; }
159
+ @if($delay == 1.75s) { $delay-stripped: 175; }
160
+ @if($delay == 2.00s) { $delay-stripped: 200; }
161
+ .delay-#{$delay-stripped} {
162
+ @include experimental(animation-delay, $delay);
163
+ }
164
+ }
135
165
  }
136
166
 
167
+
168
+ /*
169
+
170
+ Animation mixin
171
+
172
+ Also available is an "animate" mixin, for more information see the Mixins section.
173
+
174
+ Styleguide 20.5
175
+
176
+ */
177
+
178
+
137
179
  // Keyframes
138
- // --------------------------------------------------------------------------------------------------------------------
139
180
 
140
181
  @if $fadeIn == true {
141
- @include keyframes(fadeIn) {
142
- 0% { opacity: 0; }
143
- 100% { opacity: 1; }
144
- }
182
+ @include keyframes(fadeIn) {
183
+ 0% { opacity: 0; }
184
+ 100% { opacity: 1; }
185
+ }
145
186
  }
146
187
  @if $fadeOut == true {
147
- @include keyframes(fadeOut) {
148
- 0% { opacity: 1; }
149
- 100% { opacity: 0; }
150
- }
188
+ @include keyframes(fadeOut) {
189
+ 0% { opacity: 1; }
190
+ 100% { opacity: 0; }
191
+ }
151
192
  }
152
193
  @if $fadeInUp == true {
153
- @include keyframes(fadeInUp) {
154
- 0% {
155
- @include transform(translateY(20px));
156
- opacity: 0;
157
- }
158
- 100% {
159
- @include transform(translateY(0));
160
- opacity: 1;
161
- }
162
- }
194
+ @include keyframes(fadeInUp) {
195
+ 0% {
196
+ @include transform(translateY(20px));
197
+ opacity: 0;
198
+ }
199
+ 100% {
200
+ @include transform(translateY(0));
201
+ opacity: 1;
202
+ }
203
+ }
163
204
  }
164
205
  @if $fadeOutUp == true {
165
- @include keyframes(fadeOutUp) {
166
- 0% {
167
- @include transform(translateY(0));
168
- opacity: 1;
169
- }
170
- 100% {
171
- @include transform(translateY(-20px));
172
- opacity: 0;
173
- }
174
- }
206
+ @include keyframes(fadeOutUp) {
207
+ 0% {
208
+ @include transform(translateY(0));
209
+ opacity: 1;
210
+ }
211
+ 100% {
212
+ @include transform(translateY(-20px));
213
+ opacity: 0;
214
+ }
215
+ }
175
216
  }
176
217
  @if $fadeInDown == true {
177
- @include keyframes(fadeInDown) {
178
- 0% {
179
- @include transform(translateY(-20px));
180
- opacity: 0;
181
- }
182
- 100% {
183
- @include transform(translateY(0));
184
- opacity: 1;
185
- }
186
- }
218
+ @include keyframes(fadeInDown) {
219
+ 0% {
220
+ @include transform(translateY(-20px));
221
+ opacity: 0;
222
+ }
223
+ 100% {
224
+ @include transform(translateY(0));
225
+ opacity: 1;
226
+ }
227
+ }
187
228
  }
188
229
  @if $fadeOutDown == true {
189
- @include keyframes(fadeOutDown) {
190
- 0% {
191
- @include transform(translateY(0));
192
- opacity: 1;
193
- }
194
- 100% {
195
- @include transform(translateY(20px));
196
- opacity: 0;
197
- }
198
- }
230
+ @include keyframes(fadeOutDown) {
231
+ 0% {
232
+ @include transform(translateY(0));
233
+ opacity: 1;
234
+ }
235
+ 100% {
236
+ @include transform(translateY(20px));
237
+ opacity: 0;
238
+ }
239
+ }
199
240
  }
200
241
  @if $fadeInRight == true {
201
- @include keyframes(fadeInRight) {
202
- 0% {
203
- @include transform(translateX(20px));
204
- opacity: 0;
205
- }
206
- 100% {
207
- @include transform(translateX(0));
208
- opacity: 1;
209
- }
210
- }
242
+ @include keyframes(fadeInRight) {
243
+ 0% {
244
+ @include transform(translateX(20px));
245
+ opacity: 0;
246
+ }
247
+ 100% {
248
+ @include transform(translateX(0));
249
+ opacity: 1;
250
+ }
251
+ }
211
252
  }
212
253
  @if $fadeOutLeft == true {
213
- @include keyframes(fadeOutLeft) {
214
- 0% {
215
- @include transform(translateX(0));
216
- opacity: 1;
217
- }
218
- 100% {
219
- @include transform(translateX(-20px));
220
- opacity: 0;
221
- }
222
- }
254
+ @include keyframes(fadeOutLeft) {
255
+ 0% {
256
+ @include transform(translateX(0));
257
+ opacity: 1;
258
+ }
259
+ 100% {
260
+ @include transform(translateX(-20px));
261
+ opacity: 0;
262
+ }
263
+ }
223
264
  }
224
265
  @if $fadeInLeft == true {
225
- @include keyframes(fadeInLeft) {
226
- 0% {
227
- @include transform(translateX(-20px));
228
- opacity: 0;
229
- }
230
- 100% {
231
- @include transform(translateX(0));
232
- opacity: 1;
233
- }
234
- }
266
+ @include keyframes(fadeInLeft) {
267
+ 0% {
268
+ @include transform(translateX(-20px));
269
+ opacity: 0;
270
+ }
271
+ 100% {
272
+ @include transform(translateX(0));
273
+ opacity: 1;
274
+ }
275
+ }
235
276
  }
236
277
  @if $fadeOutRight == true {
237
- @include keyframes(fadeOutRight) {
238
- 0% {
239
- @include transform(translateX(0));
240
- opacity: 1;
241
- }
242
- 100% {
243
- @include transform(translateX(20px));
244
- opacity: 0;
245
- }
246
- }
278
+ @include keyframes(fadeOutRight) {
279
+ 0% {
280
+ @include transform(translateX(0));
281
+ opacity: 1;
282
+ }
283
+ 100% {
284
+ @include transform(translateX(20px));
285
+ opacity: 0;
286
+ }
287
+ }
247
288
  }
248
289
  @if $fadeInUpBig == true {
249
- @include keyframes(fadeInUpBig) {
250
- 0% {
251
- @include transform(translateY(2000px));
252
- opacity: 0;
253
- }
254
- 100% {
255
- @include transform(translateY(0));
256
- opacity: 1;
257
- }
258
- }
290
+ @include keyframes(fadeInUpBig) {
291
+ 0% {
292
+ @include transform(translateY(2000px));
293
+ opacity: 0;
294
+ }
295
+ 100% {
296
+ @include transform(translateY(0));
297
+ opacity: 1;
298
+ }
299
+ }
259
300
  }
260
301
  @if $fadeOutUpBig == true {
261
- @include keyframes(fadeOutUpBig) {
262
- 0% {
263
- @include transform(translateY(0));
264
- opacity: 1;
265
- }
266
- 100% {
267
- @include transform(translateY(-2000px));
268
- opacity: 0;
269
- }
270
- }
302
+ @include keyframes(fadeOutUpBig) {
303
+ 0% {
304
+ @include transform(translateY(0));
305
+ opacity: 1;
306
+ }
307
+ 100% {
308
+ @include transform(translateY(-2000px));
309
+ opacity: 0;
310
+ }
311
+ }
271
312
  }
272
313
  @if $fadeInDownBig == true {
273
- @include keyframes(fadeInDownBig) {
274
- 0% {
275
- @include transform(translateY(-2000px));
276
- opacity: 0;
277
- }
278
- 100% {
279
- @include transform(translateY(0));
280
- opacity: 1;
281
- }
282
- }
314
+ @include keyframes(fadeInDownBig) {
315
+ 0% {
316
+ @include transform(translateY(-2000px));
317
+ opacity: 0;
318
+ }
319
+ 100% {
320
+ @include transform(translateY(0));
321
+ opacity: 1;
322
+ }
323
+ }
283
324
  }
284
325
  @if $fadeOutDownBig == true {
285
- @include keyframes(fadeOutDownBig) {
286
- 0% {
287
- @include transform(translateY(0));
288
- opacity: 1;
289
- }
290
- 100% {
291
- @include transform(translateY(2000px));
292
- opacity: 0;
293
- }
294
- }
326
+ @include keyframes(fadeOutDownBig) {
327
+ 0% {
328
+ @include transform(translateY(0));
329
+ opacity: 1;
330
+ }
331
+ 100% {
332
+ @include transform(translateY(2000px));
333
+ opacity: 0;
334
+ }
335
+ }
295
336
  }
296
337
  @if $fadeInRightBig == true {
297
- @include keyframes(fadeInRightBig) {
298
- 0% {
299
- @include transform(translateX(2000px));
300
- opacity: 0;
301
- }
302
- 100% {
303
- @include transform(translateX(0));
304
- opacity: 1;
305
- }
306
- }
338
+ @include keyframes(fadeInRightBig) {
339
+ 0% {
340
+ @include transform(translateX(2000px));
341
+ opacity: 0;
342
+ }
343
+ 100% {
344
+ @include transform(translateX(0));
345
+ opacity: 1;
346
+ }
347
+ }
307
348
  }
308
349
  @if $fadeOutLeftBig == true {
309
- @include keyframes(fadeOutLeftBig) {
310
- 0% {
311
- @include transform(translateX(0));
312
- opacity: 1;
313
- }
314
- 100% {
315
- @include transform(translateX(-2000px));
316
- opacity: 0;
317
- }
318
- }
350
+ @include keyframes(fadeOutLeftBig) {
351
+ 0% {
352
+ @include transform(translateX(0));
353
+ opacity: 1;
354
+ }
355
+ 100% {
356
+ @include transform(translateX(-2000px));
357
+ opacity: 0;
358
+ }
359
+ }
319
360
  }
320
361
  @if $fadeInLeftBig == true {
321
- @include keyframes(fadeInLeftBig) {
322
- 0% {
323
- @include transform(translateX(-2000px));
324
- opacity: 0;
325
- }
326
- 100% {
327
- @include transform(translateX(0));
328
- opacity: 1;
329
- }
330
- }
362
+ @include keyframes(fadeInLeftBig) {
363
+ 0% {
364
+ @include transform(translateX(-2000px));
365
+ opacity: 0;
366
+ }
367
+ 100% {
368
+ @include transform(translateX(0));
369
+ opacity: 1;
370
+ }
371
+ }
331
372
  }
332
373
  @if $fadeOutRightBig == true {
333
- @include keyframes(fadeOutRightBig) {
334
- 0% {
335
- @include transform(translateX(0));
336
- opacity: 1;
337
- }
338
- 100% {
339
- @include transform(translateX(2000px));
340
- opacity: 0;
341
- }
342
- }
374
+ @include keyframes(fadeOutRightBig) {
375
+ 0% {
376
+ @include transform(translateX(0));
377
+ opacity: 1;
378
+ }
379
+ 100% {
380
+ @include transform(translateX(2000px));
381
+ opacity: 0;
382
+ }
383
+ }
343
384
  }
344
385
  @if $bounceIn == true {
345
- @include keyframes(bounceIn) {
346
- 0% {
347
- @include transform(scale(0.3));
348
- opacity: 0;
349
- }
350
- 50% {
351
- @include transform(scale(1.05));
352
- opacity: 1;
353
- }
354
- 70% {
355
- @include transform(scale(0.9));
356
- }
357
- 100% {
358
- @include transform(scale(1));
359
- }
360
- }
386
+ @include keyframes(bounceIn) {
387
+ 0% {
388
+ @include transform(scale(0.3));
389
+ opacity: 0;
390
+ }
391
+ 50% {
392
+ @include transform(scale(1.05));
393
+ opacity: 1;
394
+ }
395
+ 70% {
396
+ @include transform(scale(0.9));
397
+ }
398
+ 100% {
399
+ @include transform(scale(1));
400
+ }
401
+ }
361
402
  }
362
403
  @if $bounceInDown == true {
363
- @include keyframes(bounceInDown) {
364
- 0% {
365
- @include transform(translateY(-2000px));
366
- opacity: 0;
367
- }
368
- 60% {
369
- @include transform(translateY(30px));
370
- opacity: 1;
371
- }
372
- 80% {
373
- @include transform(translateY(-10px));
374
- }
375
- 100% {
376
- @include transform(translateY(0));
377
- }
378
- }
404
+ @include keyframes(bounceInDown) {
405
+ 0% {
406
+ @include transform(translateY(-2000px));
407
+ opacity: 0;
408
+ }
409
+ 60% {
410
+ @include transform(translateY(30px));
411
+ opacity: 1;
412
+ }
413
+ 80% {
414
+ @include transform(translateY(-10px));
415
+ }
416
+ 100% {
417
+ @include transform(translateY(0));
418
+ }
419
+ }
379
420
  }
380
421
  @if $bounceInUp == true {
381
- @include keyframes(bounceInUp) {
382
- 0% {
383
- @include transform(translateY(2000px));
384
- opacity: 0;
385
- }
386
- 60% {
387
- @include transform(translateY(-30px));
388
- opacity: 1;
389
- }
390
- 80% {
391
- @include transform(translateY(10px));
392
- }
393
- 100% {
394
- @include transform(translateY(0));
395
- }
396
- }
422
+ @include keyframes(bounceInUp) {
423
+ 0% {
424
+ @include transform(translateY(2000px));
425
+ opacity: 0;
426
+ }
427
+ 60% {
428
+ @include transform(translateY(-30px));
429
+ opacity: 1;
430
+ }
431
+ 80% {
432
+ @include transform(translateY(10px));
433
+ }
434
+ 100% {
435
+ @include transform(translateY(0));
436
+ }
437
+ }
397
438
  }
398
439
  @if $bounceInRight == true {
399
- @include keyframes(bounceInRight) {
400
- 0% {
401
- @include transform(translateX(2000px));
402
- opacity: 0;
403
- }
404
- 60% {
405
- @include transform(translateX(-30px));
406
- opacity: 1;
407
- }
408
- 80% {
409
- @include transform(translateX(10px));
410
- }
411
- 100% {
412
- @include transform(translateX(0));
413
- }
414
- }
440
+ @include keyframes(bounceInRight) {
441
+ 0% {
442
+ @include transform(translateX(2000px));
443
+ opacity: 0;
444
+ }
445
+ 60% {
446
+ @include transform(translateX(-30px));
447
+ opacity: 1;
448
+ }
449
+ 80% {
450
+ @include transform(translateX(10px));
451
+ }
452
+ 100% {
453
+ @include transform(translateX(0));
454
+ }
455
+ }
415
456
  }
416
457
  @if $bounceInLeft == true {
417
- @include keyframes(bounceInLeft) {
418
- 0% {
419
- @include transform(translateX(-2000px));
420
- opacity: 0;
421
- }
422
- 60% {
423
- @include transform(translateX(30px));
424
- opacity: 1;
425
- }
426
- 80% {
427
- @include transform(translateX(-10px));
428
- }
429
- 100% {
430
- @include transform(translateX(0));
431
- }
432
- }
458
+ @include keyframes(bounceInLeft) {
459
+ 0% {
460
+ @include transform(translateX(-2000px));
461
+ opacity: 0;
462
+ }
463
+ 60% {
464
+ @include transform(translateX(30px));
465
+ opacity: 1;
466
+ }
467
+ 80% {
468
+ @include transform(translateX(-10px));
469
+ }
470
+ 100% {
471
+ @include transform(translateX(0));
472
+ }
473
+ }
433
474
  }
434
475
  @if $bounceOut == true {
435
- @include keyframes(bounceOut) {
436
- 0% {
437
- @include transform(scale(1));
438
- }
439
- 25% {
440
- @include transform(scale(0.95));
441
- }
442
- 50% {
443
- @include transform(scale(1.1));
444
- opacity: 1;
445
- }
446
- 100% {
447
- @include transform(scale(0.3));
448
- opacity: 0;
449
- }
450
- }
476
+ @include keyframes(bounceOut) {
477
+ 0% {
478
+ @include transform(scale(1));
479
+ }
480
+ 25% {
481
+ @include transform(scale(0.95));
482
+ }
483
+ 50% {
484
+ @include transform(scale(1.1));
485
+ opacity: 1;
486
+ }
487
+ 100% {
488
+ @include transform(scale(0.3));
489
+ opacity: 0;
490
+ }
491
+ }
451
492
  }
452
493
  @if $bounceOutUp == true {
453
- @include keyframes(bounceOutUp) {
454
- 0% {
455
- @include transform(translateY(0));
456
- }
457
- 20% {
458
- @include transform(translateY(20px));
459
- opacity: 1;
460
- }
461
- 100% {
462
- @include transform(translateY(-2000px));
463
- opacity: 0;
464
- }
465
- }
494
+ @include keyframes(bounceOutUp) {
495
+ 0% {
496
+ @include transform(translateY(0));
497
+ }
498
+ 20% {
499
+ @include transform(translateY(20px));
500
+ opacity: 1;
501
+ }
502
+ 100% {
503
+ @include transform(translateY(-2000px));
504
+ opacity: 0;
505
+ }
506
+ }
466
507
  }
467
508
  @if $bounceOutDown == true {
468
- @include keyframes(bounceOutDown) {
469
- 0% {
470
- @include transform(translateY(0));
471
- }
472
- 20% {
473
- @include transform(translateY(-20px));
474
- opacity: 1;
475
- }
476
- 100% {
477
- @include transform(translateY(2000px));
478
- opacity: 0;
479
- }
480
- }
509
+ @include keyframes(bounceOutDown) {
510
+ 0% {
511
+ @include transform(translateY(0));
512
+ }
513
+ 20% {
514
+ @include transform(translateY(-20px));
515
+ opacity: 1;
516
+ }
517
+ 100% {
518
+ @include transform(translateY(2000px));
519
+ opacity: 0;
520
+ }
521
+ }
481
522
  }
482
523
  @if $bounceOutLeft == true {
483
- @include keyframes(bounceOutLeft) {
484
- 0% {
485
- @include transform(translateX(0));
486
- }
487
- 20% {
488
- @include transform(translateX(20px));
489
- opacity: 1;
490
- }
491
- 100% {
492
- @include transform(translateX(-2000px));
493
- opacity: 0;
494
- }
495
- }
524
+ @include keyframes(bounceOutLeft) {
525
+ 0% {
526
+ @include transform(translateX(0));
527
+ }
528
+ 20% {
529
+ @include transform(translateX(20px));
530
+ opacity: 1;
531
+ }
532
+ 100% {
533
+ @include transform(translateX(-2000px));
534
+ opacity: 0;
535
+ }
536
+ }
496
537
  }
497
538
  @if $bounceOutRight == true {
498
- @include keyframes(bounceOutRight) {
499
- 0% {
500
- @include transform(translateX(0));
501
- }
502
- 20% {
503
- @include transform(translateX(-20px));
504
- opacity: 1;
505
- }
506
- 100% {
507
- @include transform(translateX(2000px));
508
- opacity: 0;
509
- }
510
- }
539
+ @include keyframes(bounceOutRight) {
540
+ 0% {
541
+ @include transform(translateX(0));
542
+ }
543
+ 20% {
544
+ @include transform(translateX(-20px));
545
+ opacity: 1;
546
+ }
547
+ 100% {
548
+ @include transform(translateX(2000px));
549
+ opacity: 0;
550
+ }
551
+ }
511
552
  }
512
553
  @if $flash == true {
513
- @include keyframes(flash) {
514
- 0% { opacity: 1; }
515
- 25% { opacity: 0; }
516
- 50% { opacity: 1; }
517
- 75% { opacity: 0; }
518
- 100% { opacity: 1; }
519
- }
554
+ @include keyframes(flash) {
555
+ 0% { opacity: 1; }
556
+ 25% { opacity: 0; }
557
+ 50% { opacity: 1; }
558
+ 75% { opacity: 0; }
559
+ 100% { opacity: 1; }
560
+ }
520
561
  }
521
562
  @if $bounce == true {
522
- @include keyframes(bounce) {
523
- 0% { @include transform(translateY(0)); }
524
- 20% { @include transform(translateY(0)); }
525
- 40% { @include transform(translateY(-30px)); }
526
- 50% { @include transform(translateY(0)); }
527
- 60% { @include transform(translateY(-15px)); }
528
- 80% { @include transform(translateY(0)); }
529
- 100% { @include transform(translateY(0)); }
530
- }
563
+ @include keyframes(bounce) {
564
+ 0% { @include transform(translateY(0)); }
565
+ 20% { @include transform(translateY(0)); }
566
+ 40% { @include transform(translateY(-30px)); }
567
+ 50% { @include transform(translateY(0)); }
568
+ 60% { @include transform(translateY(-15px)); }
569
+ 80% { @include transform(translateY(0)); }
570
+ 100% { @include transform(translateY(0)); }
571
+ }
531
572
  }
532
573
  @if $shake == true {
533
- @include keyframes(shake) {
534
- 0% { @include transform(translateX(0)); }
535
- 10% { @include transform(translateX(-10px)); }
536
- 20% { @include transform(translateX(10px)); }
537
- 30% { @include transform(translateX(-10px)); }
538
- 40% { @include transform(translateX(10px)); }
539
- 50% { @include transform(translateX(-10px)); }
540
- 60% { @include transform(translateX(10px)); }
541
- 70% { @include transform(translateX(-10px)); }
542
- 80% { @include transform(translateX(10px)); }
543
- 90% { @include transform(translateX(-10px)); }
544
- 100% { @include transform(translateX(0)); }
545
- }
574
+ @include keyframes(shake) {
575
+ 0% { @include transform(translateX(0)); }
576
+ 10% { @include transform(translateX(-10px)); }
577
+ 20% { @include transform(translateX(10px)); }
578
+ 30% { @include transform(translateX(-10px)); }
579
+ 40% { @include transform(translateX(10px)); }
580
+ 50% { @include transform(translateX(-10px)); }
581
+ 60% { @include transform(translateX(10px)); }
582
+ 70% { @include transform(translateX(-10px)); }
583
+ 80% { @include transform(translateX(10px)); }
584
+ 90% { @include transform(translateX(-10px)); }
585
+ 100% { @include transform(translateX(0)); }
586
+ }
546
587
  }
547
588
  @if $rotateInDownLeft == true {
548
- @include keyframes(rotateInDownLeft) {
549
- 0% {
550
- @include transform-origin(left, bottom);
551
- @include transform(rotate(-90deg));
552
- opacity: 0;
553
- }
554
- 100% {
555
- @include transform-origin(left, bottom);
556
- @include transform(rotate(0));
557
- opacity: 1;
558
- }
559
- }
589
+ @include keyframes(rotateInDownLeft) {
590
+ 0% {
591
+ @include transform-origin(left, bottom);
592
+ @include transform(rotate(-90deg));
593
+ opacity: 0;
594
+ }
595
+ 100% {
596
+ @include transform-origin(left, bottom);
597
+ @include transform(rotate(0));
598
+ opacity: 1;
599
+ }
600
+ }
560
601
  }
561
602
  @if $rotateInUpLeft == true {
562
- @include keyframes(rotateInUpLeft) {
563
- 0% {
564
- @include transform-origin(left, bottom);
565
- @include transform(rotate(90deg));
566
- opacity: 0;
567
- }
568
- 100% {
569
- @include transform-origin(left, bottom);
570
- @include transform(rotate(0));
571
- opacity: 1;
572
- }
573
- }
603
+ @include keyframes(rotateInUpLeft) {
604
+ 0% {
605
+ @include transform-origin(left, bottom);
606
+ @include transform(rotate(90deg));
607
+ opacity: 0;
608
+ }
609
+ 100% {
610
+ @include transform-origin(left, bottom);
611
+ @include transform(rotate(0));
612
+ opacity: 1;
613
+ }
614
+ }
574
615
  }
575
616
  @if $rotateInUpRight == true {
576
- @include keyframes(rotateInUpRight) {
577
- 0% {
578
- @include transform-origin(right, bottom);
579
- @include transform(rotate(-90deg));
580
- opacity: 0;
581
- }
582
- 100% {
583
- @include transform-origin(right, bottom);
584
- @include transform(rotate(0));
585
- opacity: 1;
586
- }
587
- }
617
+ @include keyframes(rotateInUpRight) {
618
+ 0% {
619
+ @include transform-origin(right, bottom);
620
+ @include transform(rotate(-90deg));
621
+ opacity: 0;
622
+ }
623
+ 100% {
624
+ @include transform-origin(right, bottom);
625
+ @include transform(rotate(0));
626
+ opacity: 1;
627
+ }
628
+ }
588
629
  }
589
630
  @if $rotateInDownRight == true {
590
- @include keyframes(rotateInDownRight) {
591
- 0% {
592
- @include transform-origin(right, bottom);
593
- @include transform(rotate(90deg));
594
- opacity: 0;
595
- }
596
- 100% {
597
- @include transform-origin(right, bottom);
598
- @include transform(rotate(0));
599
- opacity: 1;
600
- }
601
- }
631
+ @include keyframes(rotateInDownRight) {
632
+ 0% {
633
+ @include transform-origin(right, bottom);
634
+ @include transform(rotate(90deg));
635
+ opacity: 0;
636
+ }
637
+ 100% {
638
+ @include transform-origin(right, bottom);
639
+ @include transform(rotate(0));
640
+ opacity: 1;
641
+ }
642
+ }
602
643
  }
603
644
  @if $rotateOutDownLeft == true {
604
- @include keyframes(rotateOutDownLeft) {
605
- 0% {
606
- @include transform-origin(left, bottom);
607
- @include transform(rotate(0));
608
- opacity: 1;
609
- }
610
- 100% {
611
- @include transform-origin(left, bottom);
612
- @include transform(rotate(90deg));
613
- opacity: 0;
614
- }
615
- }
645
+ @include keyframes(rotateOutDownLeft) {
646
+ 0% {
647
+ @include transform-origin(left, bottom);
648
+ @include transform(rotate(0));
649
+ opacity: 1;
650
+ }
651
+ 100% {
652
+ @include transform-origin(left, bottom);
653
+ @include transform(rotate(90deg));
654
+ opacity: 0;
655
+ }
656
+ }
616
657
  }
617
658
  @if $rotateOutUpLeft == true {
618
- @include keyframes(rotateOutUpLeft) {
619
- 0% {
620
- @include transform-origin(left, bottom);
621
- @include transform(rotate(0));
622
- opacity: 1;
623
- }
624
- 100% {
625
- @include transform-origin(left, bottom);
626
- @include transform(rotate(-90deg));
627
- opacity: 0;
628
- }
629
- }
659
+ @include keyframes(rotateOutUpLeft) {
660
+ 0% {
661
+ @include transform-origin(left, bottom);
662
+ @include transform(rotate(0));
663
+ opacity: 1;
664
+ }
665
+ 100% {
666
+ @include transform-origin(left, bottom);
667
+ @include transform(rotate(-90deg));
668
+ opacity: 0;
669
+ }
670
+ }
630
671
  }
631
672
  @if $rotateOutDownRight == true {
632
- @include keyframes(rotateOutDownRight) {
633
- 0% {
634
- @include transform-origin(right, bottom);
635
- @include transform(rotate(0));
636
- opacity: 1;
637
- }
638
- 100% {
639
- @include transform-origin(right, bottom);
640
- @include transform(rotate(-90deg));
641
- opacity: 0;
642
- }
643
- }
673
+ @include keyframes(rotateOutDownRight) {
674
+ 0% {
675
+ @include transform-origin(right, bottom);
676
+ @include transform(rotate(0));
677
+ opacity: 1;
678
+ }
679
+ 100% {
680
+ @include transform-origin(right, bottom);
681
+ @include transform(rotate(-90deg));
682
+ opacity: 0;
683
+ }
684
+ }
644
685
  }
645
686
  @if $rotateOutUpRight == true {
646
- @include keyframes(rotateOutUpRight) {
647
- 0% {
648
- @include transform-origin(right, bottom);
649
- @include transform(rotate(0));
650
- opacity: 1;
651
- }
652
- 100% {
653
- @include transform-origin(right, bottom);
654
- @include transform(rotate(90deg));
655
- opacity: 0;
656
- }
657
- }
687
+ @include keyframes(rotateOutUpRight) {
688
+ 0% {
689
+ @include transform-origin(right, bottom);
690
+ @include transform(rotate(0));
691
+ opacity: 1;
692
+ }
693
+ 100% {
694
+ @include transform-origin(right, bottom);
695
+ @include transform(rotate(90deg));
696
+ opacity: 0;
697
+ }
698
+ }
658
699
  }
659
700
  @if $rotateIn == true {
660
- @include keyframes(rotateIn) {
661
- 0% {
662
- @include transform-origin(center, center);
663
- @include transform(rotate(-200deg));
664
- opacity: 0;
665
- }
666
- 100% {
667
- @include transform-origin(center, center);
668
- @include transform(rotate(0));
669
- opacity: 1;
670
- }
671
- }
701
+ @include keyframes(rotateIn) {
702
+ 0% {
703
+ @include transform-origin(center, center);
704
+ @include transform(rotate(-200deg));
705
+ opacity: 0;
706
+ }
707
+ 100% {
708
+ @include transform-origin(center, center);
709
+ @include transform(rotate(0));
710
+ opacity: 1;
711
+ }
712
+ }
672
713
  }
673
714
  @if $rotateOut == true {
674
- @include keyframes(rotateOut) {
675
- 0% {
676
- @include transform-origin(center, center);
677
- @include transform(rotate(0));
678
- opacity: 1;
679
- }
680
- 100% {
681
- @include transform-origin(center, center);
682
- @include transform(rotate(200deg));
683
- opacity: 0;
684
- }
685
- }
715
+ @include keyframes(rotateOut) {
716
+ 0% {
717
+ @include transform-origin(center, center);
718
+ @include transform(rotate(0));
719
+ opacity: 1;
720
+ }
721
+ 100% {
722
+ @include transform-origin(center, center);
723
+ @include transform(rotate(200deg));
724
+ opacity: 0;
725
+ }
726
+ }
686
727
  }
687
728
  @if $tada == true {
688
- @include keyframes(tada) {
689
- 0% { @include transform(scale(1)); }
690
- 10% { @include transform(scale(0.9) rotate(-3deg)); }
691
- 20% { @include transform(scale(0.9) rotate(-3deg)); }
692
- 30% { @include transform(scale(1.1) rotate(3deg)); }
693
- 40% { @include transform(scale(1.1) rotate(-3deg)); }
694
- 50% { @include transform(scale(1.1) rotate(3deg)); }
695
- 60% { @include transform(scale(1.1) rotate(-3deg)); }
696
- 70% { @include transform(scale(1.1) rotate(3deg)); }
697
- 80% { @include transform(scale(1.1) rotate(-3deg)); }
698
- 90% { @include transform(scale(1.1) rotate(3deg)); }
699
- 100% { @include transform(scale(1) rotate(0)); }
700
- }
729
+ @include keyframes(tada) {
730
+ 0% { @include transform(scale(1)); }
731
+ 10% { @include transform(scale(0.9) rotate(-3deg)); }
732
+ 20% { @include transform(scale(0.9) rotate(-3deg)); }
733
+ 30% { @include transform(scale(1.1) rotate(3deg)); }
734
+ 40% { @include transform(scale(1.1) rotate(-3deg)); }
735
+ 50% { @include transform(scale(1.1) rotate(3deg)); }
736
+ 60% { @include transform(scale(1.1) rotate(-3deg)); }
737
+ 70% { @include transform(scale(1.1) rotate(3deg)); }
738
+ 80% { @include transform(scale(1.1) rotate(-3deg)); }
739
+ 90% { @include transform(scale(1.1) rotate(3deg)); }
740
+ 100% { @include transform(scale(1) rotate(0)); }
741
+ }
701
742
  }