animate-css-rails 3.2.2 → 3.5.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (4) hide show
  1. checksums.yaml +4 -4
  2. data/lib/animate/css/rails/version.rb +1 -1
  3. data/vendor/assets/stylesheets/animate.css +1077 -895
  4. metadata +3 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 3161b01ba415444c0de8f12e48ab9f18222dc0c7
4
- data.tar.gz: eb2e85b5e1e8897a883ef6ac7ff267bea1141c82
3
+ metadata.gz: c7000e906522d9d12fd8bb4d8e23774569f1af5a
4
+ data.tar.gz: 392839608da8f0ef25a2faa8acfc0a2ff168e2ac
5
5
  SHA512:
6
- metadata.gz: de3e2f1235d053edd02f6de749fe9ce2a2b779ba4b5cda97fe3f559209aa18399bf174872dbd62444b34a400f2796cf349af48b6ac53baff89b7008cf4a6b5a0
7
- data.tar.gz: 5ce7e09de3db89efe51e6db48237c65d98f5b5d4da44a9b5aa1ac4e1604cf926610d498b5912b4dc254c90f6a17225e6094f0c0627da00ccd36bcbbeba911057
6
+ metadata.gz: 966a6a63198125013259f7241755832af765212d3aece4ec003019b347c67f32196e498a740516351a2e3ec3142ad2249a793ef39726c384388f9f8baf53b8a0
7
+ data.tar.gz: dbd5d4c15084bdc48c10b8f2828c152edc872f88a96aab8660abdab039a431bb96f1fbf8fb673cee4b10306718a2c69ba3f26aa5a3ff5ae0c3754fa9dc95cbc7
data/lib/animate/css/rails/version.rb CHANGED
@@ -1,7 +1,7 @@
1
1
  module Animate
2
2
  module Css
3
3
  module Rails
4
- VERSION = "3.2.2"
4
+ VERSION = "3.5.1"
5
5
  end
6
6
  end
7
7
  end
data/vendor/assets/stylesheets/animate.css CHANGED
@@ -1,94 +1,103 @@
1
1
  @charset "UTF-8";
2
- /*!
3
- Animate.css - http://daneden.me/animate
4
- Licensed under the MIT license - http://opensource.org/licenses/MIT
5
2
 
6
- Copyright (c) 2014 Daniel Eden
7
- */
3
+ /*!
4
+ * animate.css -http://daneden.me/animate
5
+ * Version - 3.5.0
6
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
7
+ *
8
+ * Copyright (c) 2016 Daniel Eden
9
+ */
8
10
 
9
11
  .animated {
10
12
  -webkit-animation-duration: 1s;
11
- animation-duration: 1s;
13
+ animation-duration: 1s;
12
14
  -webkit-animation-fill-mode: both;
13
- animation-fill-mode: both;
15
+ animation-fill-mode: both;
14
16
  }
15
17
 
16
18
  .animated.infinite {
17
19
  -webkit-animation-iteration-count: infinite;
18
- animation-iteration-count: infinite;
20
+ animation-iteration-count: infinite;
19
21
  }
20
22
 
21
23
  .animated.hinge {
22
24
  -webkit-animation-duration: 2s;
23
- animation-duration: 2s;
25
+ animation-duration: 2s;
26
+ }
27
+
28
+ .animated.flipOutX,
29
+ .animated.flipOutY,
30
+ .animated.bounceIn,
31
+ .animated.bounceOut {
32
+ -webkit-animation-duration: .75s;
33
+ animation-duration: .75s;
24
34
  }
25
35
 
26
36
  @-webkit-keyframes bounce {
27
- 0%, 20%, 53%, 80%, 100% {
28
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
29
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
37
+ from, 20%, 53%, 80%, to {
38
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
39
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
30
40
  -webkit-transform: translate3d(0,0,0);
31
- transform: translate3d(0,0,0);
41
+ transform: translate3d(0,0,0);
32
42
  }
33
43
 
34
44
  40%, 43% {
35
- -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
36
- transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
45
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
46
+ animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
37
47
  -webkit-transform: translate3d(0, -30px, 0);
38
- transform: translate3d(0, -30px, 0);
48
+ transform: translate3d(0, -30px, 0);
39
49
  }
40
50
 
41
51
  70% {
42
- -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
43
- transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
52
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
53
+ animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
44
54
  -webkit-transform: translate3d(0, -15px, 0);
45
- transform: translate3d(0, -15px, 0);
55
+ transform: translate3d(0, -15px, 0);
46
56
  }
47
57
 
48
58
  90% {
49
59
  -webkit-transform: translate3d(0,-4px,0);
50
- transform: translate3d(0,-4px,0);
60
+ transform: translate3d(0,-4px,0);
51
61
  }
52
62
  }
53
63
 
54
64
  @keyframes bounce {
55
- 0%, 20%, 53%, 80%, 100% {
56
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
57
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
65
+ from, 20%, 53%, 80%, to {
66
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
67
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
58
68
  -webkit-transform: translate3d(0,0,0);
59
- transform: translate3d(0,0,0);
69
+ transform: translate3d(0,0,0);
60
70
  }
61
71
 
62
72
  40%, 43% {
63
- -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
64
- transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
73
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
74
+ animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
65
75
  -webkit-transform: translate3d(0, -30px, 0);
66
- transform: translate3d(0, -30px, 0);
76
+ transform: translate3d(0, -30px, 0);
67
77
  }
68
78
 
69
79
  70% {
70
- -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
71
- transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
80
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
81
+ animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
72
82
  -webkit-transform: translate3d(0, -15px, 0);
73
- transform: translate3d(0, -15px, 0);
83
+ transform: translate3d(0, -15px, 0);
74
84
  }
75
85
 
76
86
  90% {
77
87
  -webkit-transform: translate3d(0,-4px,0);
78
- transform: translate3d(0,-4px,0);
88
+ transform: translate3d(0,-4px,0);
79
89
  }
80
90
  }
81
91
 
82
92
  .bounce {
83
93
  -webkit-animation-name: bounce;
84
- animation-name: bounce;
94
+ animation-name: bounce;
85
95
  -webkit-transform-origin: center bottom;
86
- -ms-transform-origin: center bottom;
87
- transform-origin: center bottom;
96
+ transform-origin: center bottom;
88
97
  }
89
98
 
90
99
  @-webkit-keyframes flash {
91
- 0%, 50%, 100% {
100
+ from, 50%, to {
92
101
  opacity: 1;
93
102
  }
94
103
 
@@ -98,7 +107,7 @@ Copyright (c) 2014 Daniel Eden
98
107
  }
99
108
 
100
109
  @keyframes flash {
101
- 0%, 50%, 100% {
110
+ from, 50%, to {
102
111
  opacity: 1;
103
112
  }
104
113
 
@@ -109,848 +118,1005 @@ Copyright (c) 2014 Daniel Eden
109
118
 
110
119
  .flash {
111
120
  -webkit-animation-name: flash;
112
- animation-name: flash;
121
+ animation-name: flash;
113
122
  }
114
123
 
115
124
  /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
116
125
 
117
126
  @-webkit-keyframes pulse {
118
- 0% {
127
+ from {
119
128
  -webkit-transform: scale3d(1, 1, 1);
120
- transform: scale3d(1, 1, 1);
129
+ transform: scale3d(1, 1, 1);
121
130
  }
122
131
 
123
132
  50% {
124
133
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
125
- transform: scale3d(1.05, 1.05, 1.05);
134
+ transform: scale3d(1.05, 1.05, 1.05);
126
135
  }
127
136
 
128
- 100% {
137
+ to {
129
138
  -webkit-transform: scale3d(1, 1, 1);
130
- transform: scale3d(1, 1, 1);
139
+ transform: scale3d(1, 1, 1);
131
140
  }
132
141
  }
133
142
 
134
143
  @keyframes pulse {
135
- 0% {
144
+ from {
136
145
  -webkit-transform: scale3d(1, 1, 1);
137
- transform: scale3d(1, 1, 1);
146
+ transform: scale3d(1, 1, 1);
138
147
  }
139
148
 
140
149
  50% {
141
150
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
142
- transform: scale3d(1.05, 1.05, 1.05);
151
+ transform: scale3d(1.05, 1.05, 1.05);
143
152
  }
144
153
 
145
- 100% {
154
+ to {
146
155
  -webkit-transform: scale3d(1, 1, 1);
147
- transform: scale3d(1, 1, 1);
156
+ transform: scale3d(1, 1, 1);
148
157
  }
149
158
  }
150
159
 
151
160
  .pulse {
152
161
  -webkit-animation-name: pulse;
153
- animation-name: pulse;
162
+ animation-name: pulse;
154
163
  }
155
164
 
156
165
  @-webkit-keyframes rubberBand {
157
- 0% {
166
+ from {
158
167
  -webkit-transform: scale3d(1, 1, 1);
159
- transform: scale3d(1, 1, 1);
168
+ transform: scale3d(1, 1, 1);
160
169
  }
161
170
 
162
171
  30% {
163
172
  -webkit-transform: scale3d(1.25, 0.75, 1);
164
- transform: scale3d(1.25, 0.75, 1);
173
+ transform: scale3d(1.25, 0.75, 1);
165
174
  }
166
175
 
167
176
  40% {
168
177
  -webkit-transform: scale3d(0.75, 1.25, 1);
169
- transform: scale3d(0.75, 1.25, 1);
178
+ transform: scale3d(0.75, 1.25, 1);
170
179
  }
171
180
 
172
181
  50% {
173
182
  -webkit-transform: scale3d(1.15, 0.85, 1);
174
- transform: scale3d(1.15, 0.85, 1);
183
+ transform: scale3d(1.15, 0.85, 1);
175
184
  }
176
185
 
177
186
  65% {
178
187
  -webkit-transform: scale3d(.95, 1.05, 1);
179
- transform: scale3d(.95, 1.05, 1);
188
+ transform: scale3d(.95, 1.05, 1);
180
189
  }
181
190
 
182
191
  75% {
183
192
  -webkit-transform: scale3d(1.05, .95, 1);
184
- transform: scale3d(1.05, .95, 1);
193
+ transform: scale3d(1.05, .95, 1);
185
194
  }
186
195
 
187
- 100% {
196
+ to {
188
197
  -webkit-transform: scale3d(1, 1, 1);
189
- transform: scale3d(1, 1, 1);
198
+ transform: scale3d(1, 1, 1);
190
199
  }
191
200
  }
192
201
 
193
202
  @keyframes rubberBand {
194
- 0% {
203
+ from {
195
204
  -webkit-transform: scale3d(1, 1, 1);
196
- transform: scale3d(1, 1, 1);
205
+ transform: scale3d(1, 1, 1);
197
206
  }
198
207
 
199
208
  30% {
200
209
  -webkit-transform: scale3d(1.25, 0.75, 1);
201
- transform: scale3d(1.25, 0.75, 1);
210
+ transform: scale3d(1.25, 0.75, 1);
202
211
  }
203
212
 
204
213
  40% {
205
214
  -webkit-transform: scale3d(0.75, 1.25, 1);
206
- transform: scale3d(0.75, 1.25, 1);
215
+ transform: scale3d(0.75, 1.25, 1);
207
216
  }
208
217
 
209
218
  50% {
210
219
  -webkit-transform: scale3d(1.15, 0.85, 1);
211
- transform: scale3d(1.15, 0.85, 1);
220
+ transform: scale3d(1.15, 0.85, 1);
212
221
  }
213
222
 
214
223
  65% {
215
224
  -webkit-transform: scale3d(.95, 1.05, 1);
216
- transform: scale3d(.95, 1.05, 1);
225
+ transform: scale3d(.95, 1.05, 1);
217
226
  }
218
227
 
219
228
  75% {
220
229
  -webkit-transform: scale3d(1.05, .95, 1);
221
- transform: scale3d(1.05, .95, 1);
230
+ transform: scale3d(1.05, .95, 1);
222
231
  }
223
232
 
224
- 100% {
233
+ to {
225
234
  -webkit-transform: scale3d(1, 1, 1);
226
- transform: scale3d(1, 1, 1);
235
+ transform: scale3d(1, 1, 1);
227
236
  }
228
237
  }
229
238
 
230
239
  .rubberBand {
231
240
  -webkit-animation-name: rubberBand;
232
- animation-name: rubberBand;
241
+ animation-name: rubberBand;
233
242
  }
234
243
 
235
244
  @-webkit-keyframes shake {
236
- 0%, 100% {
245
+ from, to {
237
246
  -webkit-transform: translate3d(0, 0, 0);
238
- transform: translate3d(0, 0, 0);
247
+ transform: translate3d(0, 0, 0);
239
248
  }
240
249
 
241
250
  10%, 30%, 50%, 70%, 90% {
242
251
  -webkit-transform: translate3d(-10px, 0, 0);
243
- transform: translate3d(-10px, 0, 0);
252
+ transform: translate3d(-10px, 0, 0);
244
253
  }
245
254
 
246
255
  20%, 40%, 60%, 80% {
247
256
  -webkit-transform: translate3d(10px, 0, 0);
248
- transform: translate3d(10px, 0, 0);
257
+ transform: translate3d(10px, 0, 0);
249
258
  }
250
259
  }
251
260
 
252
261
  @keyframes shake {
253
- 0%, 100% {
262
+ from, to {
254
263
  -webkit-transform: translate3d(0, 0, 0);
255
- transform: translate3d(0, 0, 0);
264
+ transform: translate3d(0, 0, 0);
256
265
  }
257
266
 
258
267
  10%, 30%, 50%, 70%, 90% {
259
268
  -webkit-transform: translate3d(-10px, 0, 0);
260
- transform: translate3d(-10px, 0, 0);
269
+ transform: translate3d(-10px, 0, 0);
261
270
  }
262
271
 
263
272
  20%, 40%, 60%, 80% {
264
273
  -webkit-transform: translate3d(10px, 0, 0);
265
- transform: translate3d(10px, 0, 0);
274
+ transform: translate3d(10px, 0, 0);
266
275
  }
267
276
  }
268
277
 
269
278
  .shake {
270
279
  -webkit-animation-name: shake;
271
- animation-name: shake;
280
+ animation-name: shake;
281
+ }
282
+
283
+ @-webkit-keyframes headShake {
284
+ 0% {
285
+ -webkit-transform: translateX(0);
286
+ transform: translateX(0);
287
+ }
288
+
289
+ 6.5% {
290
+ -webkit-transform: translateX(-6px) rotateY(-9deg);
291
+ transform: translateX(-6px) rotateY(-9deg);
292
+ }
293
+
294
+ 18.5% {
295
+ -webkit-transform: translateX(5px) rotateY(7deg);
296
+ transform: translateX(5px) rotateY(7deg);
297
+ }
298
+
299
+ 31.5% {
300
+ -webkit-transform: translateX(-3px) rotateY(-5deg);
301
+ transform: translateX(-3px) rotateY(-5deg);
302
+ }
303
+
304
+ 43.5% {
305
+ -webkit-transform: translateX(2px) rotateY(3deg);
306
+ transform: translateX(2px) rotateY(3deg);
307
+ }
308
+
309
+ 50% {
310
+ -webkit-transform: translateX(0);
311
+ transform: translateX(0);
312
+ }
313
+ }
314
+
315
+ @keyframes headShake {
316
+ 0% {
317
+ -webkit-transform: translateX(0);
318
+ transform: translateX(0);
319
+ }
320
+
321
+ 6.5% {
322
+ -webkit-transform: translateX(-6px) rotateY(-9deg);
323
+ transform: translateX(-6px) rotateY(-9deg);
324
+ }
325
+
326
+ 18.5% {
327
+ -webkit-transform: translateX(5px) rotateY(7deg);
328
+ transform: translateX(5px) rotateY(7deg);
329
+ }
330
+
331
+ 31.5% {
332
+ -webkit-transform: translateX(-3px) rotateY(-5deg);
333
+ transform: translateX(-3px) rotateY(-5deg);
334
+ }
335
+
336
+ 43.5% {
337
+ -webkit-transform: translateX(2px) rotateY(3deg);
338
+ transform: translateX(2px) rotateY(3deg);
339
+ }
340
+
341
+ 50% {
342
+ -webkit-transform: translateX(0);
343
+ transform: translateX(0);
344
+ }
345
+ }
346
+
347
+ .headShake {
348
+ -webkit-animation-timing-function: ease-in-out;
349
+ animation-timing-function: ease-in-out;
350
+ -webkit-animation-name: headShake;
351
+ animation-name: headShake;
272
352
  }
273
353
 
274
354
  @-webkit-keyframes swing {
275
355
  20% {
276
356
  -webkit-transform: rotate3d(0, 0, 1, 15deg);
277
- transform: rotate3d(0, 0, 1, 15deg);
357
+ transform: rotate3d(0, 0, 1, 15deg);
278
358
  }
279
359
 
280
360
  40% {
281
361
  -webkit-transform: rotate3d(0, 0, 1, -10deg);
282
- transform: rotate3d(0, 0, 1, -10deg);
362
+ transform: rotate3d(0, 0, 1, -10deg);
283
363
  }
284
364
 
285
365
  60% {
286
366
  -webkit-transform: rotate3d(0, 0, 1, 5deg);
287
- transform: rotate3d(0, 0, 1, 5deg);
367
+ transform: rotate3d(0, 0, 1, 5deg);
288
368
  }
289
369
 
290
370
  80% {
291
371
  -webkit-transform: rotate3d(0, 0, 1, -5deg);
292
- transform: rotate3d(0, 0, 1, -5deg);
372
+ transform: rotate3d(0, 0, 1, -5deg);
293
373
  }
294
374
 
295
- 100% {
375
+ to {
296
376
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
297
- transform: rotate3d(0, 0, 1, 0deg);
377
+ transform: rotate3d(0, 0, 1, 0deg);
298
378
  }
299
379
  }
300
380
 
301
381
  @keyframes swing {
302
382
  20% {
303
383
  -webkit-transform: rotate3d(0, 0, 1, 15deg);
304
- transform: rotate3d(0, 0, 1, 15deg);
384
+ transform: rotate3d(0, 0, 1, 15deg);
305
385
  }
306
386
 
307
387
  40% {
308
388
  -webkit-transform: rotate3d(0, 0, 1, -10deg);
309
- transform: rotate3d(0, 0, 1, -10deg);
389
+ transform: rotate3d(0, 0, 1, -10deg);
310
390
  }
311
391
 
312
392
  60% {
313
393
  -webkit-transform: rotate3d(0, 0, 1, 5deg);
314
- transform: rotate3d(0, 0, 1, 5deg);
394
+ transform: rotate3d(0, 0, 1, 5deg);
315
395
  }
316
396
 
317
397
  80% {
318
398
  -webkit-transform: rotate3d(0, 0, 1, -5deg);
319
- transform: rotate3d(0, 0, 1, -5deg);
399
+ transform: rotate3d(0, 0, 1, -5deg);
320
400
  }
321
401
 
322
- 100% {
402
+ to {
323
403
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
324
- transform: rotate3d(0, 0, 1, 0deg);
404
+ transform: rotate3d(0, 0, 1, 0deg);
325
405
  }
326
406
  }
327
407
 
328
408
  .swing {
329
409
  -webkit-transform-origin: top center;
330
- -ms-transform-origin: top center;
331
- transform-origin: top center;
410
+ transform-origin: top center;
332
411
  -webkit-animation-name: swing;
333
- animation-name: swing;
412
+ animation-name: swing;
334
413
  }
335
414
 
336
415
  @-webkit-keyframes tada {
337
- 0% {
416
+ from {
338
417
  -webkit-transform: scale3d(1, 1, 1);
339
- transform: scale3d(1, 1, 1);
418
+ transform: scale3d(1, 1, 1);
340
419
  }
341
420
 
342
421
  10%, 20% {
343
422
  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
344
- transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
423
+ transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
345
424
  }
346
425
 
347
426
  30%, 50%, 70%, 90% {
348
427
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
349
- transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
428
+ transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
350
429
  }
351
430
 
352
431
  40%, 60%, 80% {
353
432
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
354
- transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
433
+ transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
355
434
  }
356
435
 
357
- 100% {
436
+ to {
358
437
  -webkit-transform: scale3d(1, 1, 1);
359
- transform: scale3d(1, 1, 1);
438
+ transform: scale3d(1, 1, 1);
360
439
  }
361
440
  }
362
441
 
363
442
  @keyframes tada {
364
- 0% {
443
+ from {
365
444
  -webkit-transform: scale3d(1, 1, 1);
366
- transform: scale3d(1, 1, 1);
445
+ transform: scale3d(1, 1, 1);
367
446
  }
368
447
 
369
448
  10%, 20% {
370
449
  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
371
- transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
450
+ transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
372
451
  }
373
452
 
374
453
  30%, 50%, 70%, 90% {
375
454
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
376
- transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
455
+ transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
377
456
  }
378
457
 
379
458
  40%, 60%, 80% {
380
459
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
381
- transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
460
+ transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
382
461
  }
383
462
 
384
- 100% {
463
+ to {
385
464
  -webkit-transform: scale3d(1, 1, 1);
386
- transform: scale3d(1, 1, 1);
465
+ transform: scale3d(1, 1, 1);
387
466
  }
388
467
  }
389
468
 
390
469
  .tada {
391
470
  -webkit-animation-name: tada;
392
- animation-name: tada;
471
+ animation-name: tada;
393
472
  }
394
473
 
395
474
  /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
396
475
 
397
476
  @-webkit-keyframes wobble {
398
- 0% {
477
+ from {
399
478
  -webkit-transform: none;
400
- transform: none;
479
+ transform: none;
401
480
  }
402
481
 
403
482
  15% {
404
483
  -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
405
- transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
484
+ transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
406
485
  }
407
486
 
408
487
  30% {
409
488
  -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
410
- transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
489
+ transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
411
490
  }
412
491
 
413
492
  45% {
414
493
  -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
415
- transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
494
+ transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
416
495
  }
417
496
 
418
497
  60% {
419
498
  -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
420
- transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
499
+ transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
421
500
  }
422
501
 
423
502
  75% {
424
503
  -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
425
- transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
504
+ transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
426
505
  }
427
506
 
428
- 100% {
507
+ to {
429
508
  -webkit-transform: none;
430
- transform: none;
509
+ transform: none;
431
510
  }
432
511
  }
433
512
 
434
513
  @keyframes wobble {
435
- 0% {
514
+ from {
436
515
  -webkit-transform: none;
437
- transform: none;
516
+ transform: none;
438
517
  }
439
518
 
440
519
  15% {
441
520
  -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
442
- transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
521
+ transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
443
522
  }
444
523
 
445
524
  30% {
446
525
  -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
447
- transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
526
+ transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
448
527
  }
449
528
 
450
529
  45% {
451
530
  -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
452
- transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
531
+ transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
453
532
  }
454
533
 
455
534
  60% {
456
535
  -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
457
- transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
536
+ transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
458
537
  }
459
538
 
460
539
  75% {
461
540
  -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
462
- transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
541
+ transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
463
542
  }
464
543
 
465
- 100% {
544
+ to {
466
545
  -webkit-transform: none;
467
- transform: none;
546
+ transform: none;
468
547
  }
469
548
  }
470
549
 
471
550
  .wobble {
472
551
  -webkit-animation-name: wobble;
473
- animation-name: wobble;
552
+ animation-name: wobble;
553
+ }
554
+
555
+ @-webkit-keyframes jello {
556
+ from, 11.1%, to {
557
+ -webkit-transform: none;
558
+ transform: none;
559
+ }
560
+
561
+ 22.2% {
562
+ -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
563
+ transform: skewX(-12.5deg) skewY(-12.5deg);
564
+ }
565
+
566
+ 33.3% {
567
+ -webkit-transform: skewX(6.25deg) skewY(6.25deg);
568
+ transform: skewX(6.25deg) skewY(6.25deg);
569
+ }
570
+
571
+ 44.4% {
572
+ -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
573
+ transform: skewX(-3.125deg) skewY(-3.125deg);
574
+ }
575
+
576
+ 55.5% {
577
+ -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
578
+ transform: skewX(1.5625deg) skewY(1.5625deg);
579
+ }
580
+
581
+ 66.6% {
582
+ -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
583
+ transform: skewX(-0.78125deg) skewY(-0.78125deg);
584
+ }
585
+
586
+ 77.7% {
587
+ -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
588
+ transform: skewX(0.390625deg) skewY(0.390625deg);
589
+ }
590
+
591
+ 88.8% {
592
+ -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
593
+ transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
594
+ }
595
+ }
596
+
597
+ @keyframes jello {
598
+ from, 11.1%, to {
599
+ -webkit-transform: none;
600
+ transform: none;
601
+ }
602
+
603
+ 22.2% {
604
+ -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
605
+ transform: skewX(-12.5deg) skewY(-12.5deg);
606
+ }
607
+
608
+ 33.3% {
609
+ -webkit-transform: skewX(6.25deg) skewY(6.25deg);
610
+ transform: skewX(6.25deg) skewY(6.25deg);
611
+ }
612
+
613
+ 44.4% {
614
+ -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
615
+ transform: skewX(-3.125deg) skewY(-3.125deg);
616
+ }
617
+
618
+ 55.5% {
619
+ -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
620
+ transform: skewX(1.5625deg) skewY(1.5625deg);
621
+ }
622
+
623
+ 66.6% {
624
+ -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
625
+ transform: skewX(-0.78125deg) skewY(-0.78125deg);
626
+ }
627
+
628
+ 77.7% {
629
+ -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
630
+ transform: skewX(0.390625deg) skewY(0.390625deg);
631
+ }
632
+
633
+ 88.8% {
634
+ -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
635
+ transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
636
+ }
637
+ }
638
+
639
+ .jello {
640
+ -webkit-animation-name: jello;
641
+ animation-name: jello;
642
+ -webkit-transform-origin: center;
643
+ transform-origin: center;
474
644
  }
475
645
 
476
646
  @-webkit-keyframes bounceIn {
477
- 0%, 20%, 40%, 60%, 80%, 100% {
478
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
479
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
647
+ from, 20%, 40%, 60%, 80%, to {
648
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
649
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
480
650
  }
481
651
 
482
652
  0% {
483
653
  opacity: 0;
484
654
  -webkit-transform: scale3d(.3, .3, .3);
485
- transform: scale3d(.3, .3, .3);
655
+ transform: scale3d(.3, .3, .3);
486
656
  }
487
657
 
488
658
  20% {
489
659
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
490
- transform: scale3d(1.1, 1.1, 1.1);
660
+ transform: scale3d(1.1, 1.1, 1.1);
491
661
  }
492
662
 
493
663
  40% {
494
664
  -webkit-transform: scale3d(.9, .9, .9);
495
- transform: scale3d(.9, .9, .9);
665
+ transform: scale3d(.9, .9, .9);
496
666
  }
497
667
 
498
668
  60% {
499
669
  opacity: 1;
500
670
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
501
- transform: scale3d(1.03, 1.03, 1.03);
671
+ transform: scale3d(1.03, 1.03, 1.03);
502
672
  }
503
673
 
504
674
  80% {
505
675
  -webkit-transform: scale3d(.97, .97, .97);
506
- transform: scale3d(.97, .97, .97);
676
+ transform: scale3d(.97, .97, .97);
507
677
  }
508
678
 
509
- 100% {
679
+ to {
510
680
  opacity: 1;
511
681
  -webkit-transform: scale3d(1, 1, 1);
512
- transform: scale3d(1, 1, 1);
682
+ transform: scale3d(1, 1, 1);
513
683
  }
514
684
  }
515
685
 
516
686
  @keyframes bounceIn {
517
- 0%, 20%, 40%, 60%, 80%, 100% {
518
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
519
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
687
+ from, 20%, 40%, 60%, 80%, to {
688
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
689
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
520
690
  }
521
691
 
522
692
  0% {
523
693
  opacity: 0;
524
694
  -webkit-transform: scale3d(.3, .3, .3);
525
- transform: scale3d(.3, .3, .3);
695
+ transform: scale3d(.3, .3, .3);
526
696
  }
527
697
 
528
698
  20% {
529
699
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
530
- transform: scale3d(1.1, 1.1, 1.1);
700
+ transform: scale3d(1.1, 1.1, 1.1);
531
701
  }
532
702
 
533
703
  40% {
534
704
  -webkit-transform: scale3d(.9, .9, .9);
535
- transform: scale3d(.9, .9, .9);
705
+ transform: scale3d(.9, .9, .9);
536
706
  }
537
707
 
538
708
  60% {
539
709
  opacity: 1;
540
710
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
541
- transform: scale3d(1.03, 1.03, 1.03);
711
+ transform: scale3d(1.03, 1.03, 1.03);
542
712
  }
543
713
 
544
714
  80% {
545
715
  -webkit-transform: scale3d(.97, .97, .97);
546
- transform: scale3d(.97, .97, .97);
716
+ transform: scale3d(.97, .97, .97);
547
717
  }
548
718
 
549
- 100% {
719
+ to {
550
720
  opacity: 1;
551
721
  -webkit-transform: scale3d(1, 1, 1);
552
- transform: scale3d(1, 1, 1);
722
+ transform: scale3d(1, 1, 1);
553
723
  }
554
724
  }
555
725
 
556
726
  .bounceIn {
557
727
  -webkit-animation-name: bounceIn;
558
- animation-name: bounceIn;
559
- -webkit-animation-duration: .75s;
560
- animation-duration: .75s;
728
+ animation-name: bounceIn;
561
729
  }
562
730
 
563
731
  @-webkit-keyframes bounceInDown {
564
- 0%, 60%, 75%, 90%, 100% {
565
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
566
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
732
+ from, 60%, 75%, 90%, to {
733
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
734
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
567
735
  }
568
736
 
569
737
  0% {
570
738
  opacity: 0;
571
739
  -webkit-transform: translate3d(0, -3000px, 0);
572
- transform: translate3d(0, -3000px, 0);
740
+ transform: translate3d(0, -3000px, 0);
573
741
  }
574
742
 
575
743
  60% {
576
744
  opacity: 1;
577
745
  -webkit-transform: translate3d(0, 25px, 0);
578
- transform: translate3d(0, 25px, 0);
746
+ transform: translate3d(0, 25px, 0);
579
747
  }
580
748
 
581
749
  75% {
582
750
  -webkit-transform: translate3d(0, -10px, 0);
583
- transform: translate3d(0, -10px, 0);
751
+ transform: translate3d(0, -10px, 0);
584
752
  }
585
753
 
586
754
  90% {
587
755
  -webkit-transform: translate3d(0, 5px, 0);
588
- transform: translate3d(0, 5px, 0);
756
+ transform: translate3d(0, 5px, 0);
589
757
  }
590
758
 
591
- 100% {
759
+ to {
592
760
  -webkit-transform: none;
593
- transform: none;
761
+ transform: none;
594
762
  }
595
763
  }
596
764
 
597
765
  @keyframes bounceInDown {
598
- 0%, 60%, 75%, 90%, 100% {
599
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
600
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
766
+ from, 60%, 75%, 90%, to {
767
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
768
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
601
769
  }
602
770
 
603
771
  0% {
604
772
  opacity: 0;
605
773
  -webkit-transform: translate3d(0, -3000px, 0);
606
- transform: translate3d(0, -3000px, 0);
774
+ transform: translate3d(0, -3000px, 0);
607
775
  }
608
776
 
609
777
  60% {
610
778
  opacity: 1;
611
779
  -webkit-transform: translate3d(0, 25px, 0);
612
- transform: translate3d(0, 25px, 0);
780
+ transform: translate3d(0, 25px, 0);
613
781
  }
614
782
 
615
783
  75% {
616
784
  -webkit-transform: translate3d(0, -10px, 0);
617
- transform: translate3d(0, -10px, 0);
785
+ transform: translate3d(0, -10px, 0);
618
786
  }
619
787
 
620
788
  90% {
621
789
  -webkit-transform: translate3d(0, 5px, 0);
622
- transform: translate3d(0, 5px, 0);
790
+ transform: translate3d(0, 5px, 0);
623
791
  }
624
792
 
625
- 100% {
793
+ to {
626
794
  -webkit-transform: none;
627
- transform: none;
795
+ transform: none;
628
796
  }
629
797
  }
630
798
 
631
799
  .bounceInDown {
632
800
  -webkit-animation-name: bounceInDown;
633
- animation-name: bounceInDown;
801
+ animation-name: bounceInDown;
634
802
  }
635
803
 
636
804
  @-webkit-keyframes bounceInLeft {
637
- 0%, 60%, 75%, 90%, 100% {
638
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
639
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
805
+ from, 60%, 75%, 90%, to {
806
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
807
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
640
808
  }
641
809
 
642
810
  0% {
643
811
  opacity: 0;
644
812
  -webkit-transform: translate3d(-3000px, 0, 0);
645
- transform: translate3d(-3000px, 0, 0);
813
+ transform: translate3d(-3000px, 0, 0);
646
814
  }
647
815
 
648
816
  60% {
649
817
  opacity: 1;
650
818
  -webkit-transform: translate3d(25px, 0, 0);
651
- transform: translate3d(25px, 0, 0);
819
+ transform: translate3d(25px, 0, 0);
652
820
  }
653
821
 
654
822
  75% {
655
823
  -webkit-transform: translate3d(-10px, 0, 0);
656
- transform: translate3d(-10px, 0, 0);
824
+ transform: translate3d(-10px, 0, 0);
657
825
  }
658
826
 
659
827
  90% {
660
828
  -webkit-transform: translate3d(5px, 0, 0);
661
- transform: translate3d(5px, 0, 0);
829
+ transform: translate3d(5px, 0, 0);
662
830
  }
663
831
 
664
- 100% {
832
+ to {
665
833
  -webkit-transform: none;
666
- transform: none;
834
+ transform: none;
667
835
  }
668
836
  }
669
837
 
670
838
  @keyframes bounceInLeft {
671
- 0%, 60%, 75%, 90%, 100% {
672
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
673
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
839
+ from, 60%, 75%, 90%, to {
840
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
841
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
674
842
  }
675
843
 
676
844
  0% {
677
845
  opacity: 0;
678
846
  -webkit-transform: translate3d(-3000px, 0, 0);
679
- transform: translate3d(-3000px, 0, 0);
847
+ transform: translate3d(-3000px, 0, 0);
680
848
  }
681
849
 
682
850
  60% {
683
851
  opacity: 1;
684
852
  -webkit-transform: translate3d(25px, 0, 0);
685
- transform: translate3d(25px, 0, 0);
853
+ transform: translate3d(25px, 0, 0);
686
854
  }
687
855
 
688
856
  75% {
689
857
  -webkit-transform: translate3d(-10px, 0, 0);
690
- transform: translate3d(-10px, 0, 0);
858
+ transform: translate3d(-10px, 0, 0);
691
859
  }
692
860
 
693
861
  90% {
694
862
  -webkit-transform: translate3d(5px, 0, 0);
695
- transform: translate3d(5px, 0, 0);
863
+ transform: translate3d(5px, 0, 0);
696
864
  }
697
865
 
698
- 100% {
866
+ to {
699
867
  -webkit-transform: none;
700
- transform: none;
868
+ transform: none;
701
869
  }
702
870
  }
703
871
 
704
872
  .bounceInLeft {
705
873
  -webkit-animation-name: bounceInLeft;
706
- animation-name: bounceInLeft;
874
+ animation-name: bounceInLeft;
707
875
  }
708
876
 
709
877
  @-webkit-keyframes bounceInRight {
710
- 0%, 60%, 75%, 90%, 100% {
711
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
712
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
878
+ from, 60%, 75%, 90%, to {
879
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
880
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
713
881
  }
714
882
 
715
- 0% {
883
+ from {
716
884
  opacity: 0;
717
885
  -webkit-transform: translate3d(3000px, 0, 0);
718
- transform: translate3d(3000px, 0, 0);
886
+ transform: translate3d(3000px, 0, 0);
719
887
  }
720
888
 
721
889
  60% {
722
890
  opacity: 1;
723
891
  -webkit-transform: translate3d(-25px, 0, 0);
724
- transform: translate3d(-25px, 0, 0);
892
+ transform: translate3d(-25px, 0, 0);
725
893
  }
726
894
 
727
895
  75% {
728
896
  -webkit-transform: translate3d(10px, 0, 0);
729
- transform: translate3d(10px, 0, 0);
897
+ transform: translate3d(10px, 0, 0);
730
898
  }
731
899
 
732
900
  90% {
733
901
  -webkit-transform: translate3d(-5px, 0, 0);
734
- transform: translate3d(-5px, 0, 0);
902
+ transform: translate3d(-5px, 0, 0);
735
903
  }
736
904
 
737
- 100% {
905
+ to {
738
906
  -webkit-transform: none;
739
- transform: none;
907
+ transform: none;
740
908
  }
741
909
  }
742
910
 
743
911
  @keyframes bounceInRight {
744
- 0%, 60%, 75%, 90%, 100% {
745
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
746
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
912
+ from, 60%, 75%, 90%, to {
913
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
914
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
747
915
  }
748
916
 
749
- 0% {
917
+ from {
750
918
  opacity: 0;
751
919
  -webkit-transform: translate3d(3000px, 0, 0);
752
- transform: translate3d(3000px, 0, 0);
920
+ transform: translate3d(3000px, 0, 0);
753
921
  }
754
922
 
755
923
  60% {
756
924
  opacity: 1;
757
925
  -webkit-transform: translate3d(-25px, 0, 0);
758
- transform: translate3d(-25px, 0, 0);
926
+ transform: translate3d(-25px, 0, 0);
759
927
  }
760
928
 
761
929
  75% {
762
930
  -webkit-transform: translate3d(10px, 0, 0);
763
- transform: translate3d(10px, 0, 0);
931
+ transform: translate3d(10px, 0, 0);
764
932
  }
765
933
 
766
934
  90% {
767
935
  -webkit-transform: translate3d(-5px, 0, 0);
768
- transform: translate3d(-5px, 0, 0);
936
+ transform: translate3d(-5px, 0, 0);
769
937
  }
770
938
 
771
- 100% {
939
+ to {
772
940
  -webkit-transform: none;
773
- transform: none;
941
+ transform: none;
774
942
  }
775
943
  }
776
944
 
777
945
  .bounceInRight {
778
946
  -webkit-animation-name: bounceInRight;
779
- animation-name: bounceInRight;
947
+ animation-name: bounceInRight;
780
948
  }
781
949
 
782
950
  @-webkit-keyframes bounceInUp {
783
- 0%, 60%, 75%, 90%, 100% {
784
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
785
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
951
+ from, 60%, 75%, 90%, to {
952
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
953
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
786
954
  }
787
955
 
788
- 0% {
956
+ from {
789
957
  opacity: 0;
790
958
  -webkit-transform: translate3d(0, 3000px, 0);
791
- transform: translate3d(0, 3000px, 0);
959
+ transform: translate3d(0, 3000px, 0);
792
960
  }
793
961
 
794
962
  60% {
795
963
  opacity: 1;
796
964
  -webkit-transform: translate3d(0, -20px, 0);
797
- transform: translate3d(0, -20px, 0);
965
+ transform: translate3d(0, -20px, 0);
798
966
  }
799
967
 
800
968
  75% {
801
969
  -webkit-transform: translate3d(0, 10px, 0);
802
- transform: translate3d(0, 10px, 0);
970
+ transform: translate3d(0, 10px, 0);
803
971
  }
804
972
 
805
973
  90% {
806
974
  -webkit-transform: translate3d(0, -5px, 0);
807
- transform: translate3d(0, -5px, 0);
975
+ transform: translate3d(0, -5px, 0);
808
976
  }
809
977
 
810
- 100% {
978
+ to {
811
979
  -webkit-transform: translate3d(0, 0, 0);
812
- transform: translate3d(0, 0, 0);
980
+ transform: translate3d(0, 0, 0);
813
981
  }
814
982
  }
815
983
 
816
984
  @keyframes bounceInUp {
817
- 0%, 60%, 75%, 90%, 100% {
818
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
819
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
985
+ from, 60%, 75%, 90%, to {
986
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
987
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
820
988
  }
821
989
 
822
- 0% {
990
+ from {
823
991
  opacity: 0;
824
992
  -webkit-transform: translate3d(0, 3000px, 0);
825
- transform: translate3d(0, 3000px, 0);
993
+ transform: translate3d(0, 3000px, 0);
826
994
  }
827
995
 
828
996
  60% {
829
997
  opacity: 1;
830
998
  -webkit-transform: translate3d(0, -20px, 0);
831
- transform: translate3d(0, -20px, 0);
999
+ transform: translate3d(0, -20px, 0);
832
1000
  }
833
1001
 
834
1002
  75% {
835
1003
  -webkit-transform: translate3d(0, 10px, 0);
836
- transform: translate3d(0, 10px, 0);
1004
+ transform: translate3d(0, 10px, 0);
837
1005
  }
838
1006
 
839
1007
  90% {
840
1008
  -webkit-transform: translate3d(0, -5px, 0);
841
- transform: translate3d(0, -5px, 0);
1009
+ transform: translate3d(0, -5px, 0);
842
1010
  }
843
1011
 
844
- 100% {
1012
+ to {
845
1013
  -webkit-transform: translate3d(0, 0, 0);
846
- transform: translate3d(0, 0, 0);
1014
+ transform: translate3d(0, 0, 0);
847
1015
  }
848
1016
  }
849
1017
 
850
1018
  .bounceInUp {
851
1019
  -webkit-animation-name: bounceInUp;
852
- animation-name: bounceInUp;
1020
+ animation-name: bounceInUp;
853
1021
  }
854
1022
 
855
1023
  @-webkit-keyframes bounceOut {
856
1024
  20% {
857
1025
  -webkit-transform: scale3d(.9, .9, .9);
858
- transform: scale3d(.9, .9, .9);
1026
+ transform: scale3d(.9, .9, .9);
859
1027
  }
860
1028
 
861
1029
  50%, 55% {
862
1030
  opacity: 1;
863
1031
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
864
- transform: scale3d(1.1, 1.1, 1.1);
1032
+ transform: scale3d(1.1, 1.1, 1.1);
865
1033
  }
866
1034
 
867
- 100% {
1035
+ to {
868
1036
  opacity: 0;
869
1037
  -webkit-transform: scale3d(.3, .3, .3);
870
- transform: scale3d(.3, .3, .3);
1038
+ transform: scale3d(.3, .3, .3);
871
1039
  }
872
1040
  }
873
1041
 
874
1042
  @keyframes bounceOut {
875
1043
  20% {
876
1044
  -webkit-transform: scale3d(.9, .9, .9);
877
- transform: scale3d(.9, .9, .9);
1045
+ transform: scale3d(.9, .9, .9);
878
1046
  }
879
1047
 
880
1048
  50%, 55% {
881
1049
  opacity: 1;
882
1050
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
883
- transform: scale3d(1.1, 1.1, 1.1);
1051
+ transform: scale3d(1.1, 1.1, 1.1);
884
1052
  }
885
1053
 
886
- 100% {
1054
+ to {
887
1055
  opacity: 0;
888
1056
  -webkit-transform: scale3d(.3, .3, .3);
889
- transform: scale3d(.3, .3, .3);
1057
+ transform: scale3d(.3, .3, .3);
890
1058
  }
891
1059
  }
892
1060
 
893
1061
  .bounceOut {
894
1062
  -webkit-animation-name: bounceOut;
895
- animation-name: bounceOut;
896
- -webkit-animation-duration: .75s;
897
- animation-duration: .75s;
1063
+ animation-name: bounceOut;
898
1064
  }
899
1065
 
900
1066
  @-webkit-keyframes bounceOutDown {
901
1067
  20% {
902
1068
  -webkit-transform: translate3d(0, 10px, 0);
903
- transform: translate3d(0, 10px, 0);
1069
+ transform: translate3d(0, 10px, 0);
904
1070
  }
905
1071
 
906
1072
  40%, 45% {
907
1073
  opacity: 1;
908
1074
  -webkit-transform: translate3d(0, -20px, 0);
909
- transform: translate3d(0, -20px, 0);
1075
+ transform: translate3d(0, -20px, 0);
910
1076
  }
911
1077
 
912
- 100% {
1078
+ to {
913
1079
  opacity: 0;
914
1080
  -webkit-transform: translate3d(0, 2000px, 0);
915
- transform: translate3d(0, 2000px, 0);
1081
+ transform: translate3d(0, 2000px, 0);
916
1082
  }
917
1083
  }
918
1084
 
919
1085
  @keyframes bounceOutDown {
920
1086
  20% {
921
1087
  -webkit-transform: translate3d(0, 10px, 0);
922
- transform: translate3d(0, 10px, 0);
1088
+ transform: translate3d(0, 10px, 0);
923
1089
  }
924
1090
 
925
1091
  40%, 45% {
926
1092
  opacity: 1;
927
1093
  -webkit-transform: translate3d(0, -20px, 0);
928
- transform: translate3d(0, -20px, 0);
1094
+ transform: translate3d(0, -20px, 0);
929
1095
  }
930
1096
 
931
- 100% {
1097
+ to {
932
1098
  opacity: 0;
933
1099
  -webkit-transform: translate3d(0, 2000px, 0);
934
- transform: translate3d(0, 2000px, 0);
1100
+ transform: translate3d(0, 2000px, 0);
935
1101
  }
936
1102
  }
937
1103
 
938
1104
  .bounceOutDown {
939
1105
  -webkit-animation-name: bounceOutDown;
940
- animation-name: bounceOutDown;
1106
+ animation-name: bounceOutDown;
941
1107
  }
942
1108
 
943
1109
  @-webkit-keyframes bounceOutLeft {
944
1110
  20% {
945
1111
  opacity: 1;
946
1112
  -webkit-transform: translate3d(20px, 0, 0);
947
- transform: translate3d(20px, 0, 0);
1113
+ transform: translate3d(20px, 0, 0);
948
1114
  }
949
1115
 
950
- 100% {
1116
+ to {
951
1117
  opacity: 0;
952
1118
  -webkit-transform: translate3d(-2000px, 0, 0);
953
- transform: translate3d(-2000px, 0, 0);
1119
+ transform: translate3d(-2000px, 0, 0);
954
1120
  }
955
1121
  }
956
1122
 
@@ -958,32 +1124,32 @@ Copyright (c) 2014 Daniel Eden
958
1124
  20% {
959
1125
  opacity: 1;
960
1126
  -webkit-transform: translate3d(20px, 0, 0);
961
- transform: translate3d(20px, 0, 0);
1127
+ transform: translate3d(20px, 0, 0);
962
1128
  }
963
1129
 
964
- 100% {
1130
+ to {
965
1131
  opacity: 0;
966
1132
  -webkit-transform: translate3d(-2000px, 0, 0);
967
- transform: translate3d(-2000px, 0, 0);
1133
+ transform: translate3d(-2000px, 0, 0);
968
1134
  }
969
1135
  }
970
1136
 
971
1137
  .bounceOutLeft {
972
1138
  -webkit-animation-name: bounceOutLeft;
973
- animation-name: bounceOutLeft;
1139
+ animation-name: bounceOutLeft;
974
1140
  }
975
1141
 
976
1142
  @-webkit-keyframes bounceOutRight {
977
1143
  20% {
978
1144
  opacity: 1;
979
1145
  -webkit-transform: translate3d(-20px, 0, 0);
980
- transform: translate3d(-20px, 0, 0);
1146
+ transform: translate3d(-20px, 0, 0);
981
1147
  }
982
1148
 
983
- 100% {
1149
+ to {
984
1150
  opacity: 0;
985
1151
  -webkit-transform: translate3d(2000px, 0, 0);
986
- transform: translate3d(2000px, 0, 0);
1152
+ transform: translate3d(2000px, 0, 0);
987
1153
  }
988
1154
  }
989
1155
 
@@ -991,1421 +1157,1437 @@ Copyright (c) 2014 Daniel Eden
991
1157
  20% {
992
1158
  opacity: 1;
993
1159
  -webkit-transform: translate3d(-20px, 0, 0);
994
- transform: translate3d(-20px, 0, 0);
1160
+ transform: translate3d(-20px, 0, 0);
995
1161
  }
996
1162
 
997
- 100% {
1163
+ to {
998
1164
  opacity: 0;
999
1165
  -webkit-transform: translate3d(2000px, 0, 0);
1000
- transform: translate3d(2000px, 0, 0);
1166
+ transform: translate3d(2000px, 0, 0);
1001
1167
  }
1002
1168
  }
1003
1169
 
1004
1170
  .bounceOutRight {
1005
1171
  -webkit-animation-name: bounceOutRight;
1006
- animation-name: bounceOutRight;
1172
+ animation-name: bounceOutRight;
1007
1173
  }
1008
1174
 
1009
1175
  @-webkit-keyframes bounceOutUp {
1010
1176
  20% {
1011
1177
  -webkit-transform: translate3d(0, -10px, 0);
1012
- transform: translate3d(0, -10px, 0);
1178
+ transform: translate3d(0, -10px, 0);
1013
1179
  }
1014
1180
 
1015
1181
  40%, 45% {
1016
1182
  opacity: 1;
1017
1183
  -webkit-transform: translate3d(0, 20px, 0);
1018
- transform: translate3d(0, 20px, 0);
1184
+ transform: translate3d(0, 20px, 0);
1019
1185
  }
1020
1186
 
1021
- 100% {
1187
+ to {
1022
1188
  opacity: 0;
1023
1189
  -webkit-transform: translate3d(0, -2000px, 0);
1024
- transform: translate3d(0, -2000px, 0);
1190
+ transform: translate3d(0, -2000px, 0);
1025
1191
  }
1026
1192
  }
1027
1193
 
1028
1194
  @keyframes bounceOutUp {
1029
1195
  20% {
1030
1196
  -webkit-transform: translate3d(0, -10px, 0);
1031
- transform: translate3d(0, -10px, 0);
1197
+ transform: translate3d(0, -10px, 0);
1032
1198
  }
1033
1199
 
1034
1200
  40%, 45% {
1035
1201
  opacity: 1;
1036
1202
  -webkit-transform: translate3d(0, 20px, 0);
1037
- transform: translate3d(0, 20px, 0);
1203
+ transform: translate3d(0, 20px, 0);
1038
1204
  }
1039
1205
 
1040
- 100% {
1206
+ to {
1041
1207
  opacity: 0;
1042
1208
  -webkit-transform: translate3d(0, -2000px, 0);
1043
- transform: translate3d(0, -2000px, 0);
1209
+ transform: translate3d(0, -2000px, 0);
1044
1210
  }
1045
1211
  }
1046
1212
 
1047
1213
  .bounceOutUp {
1048
1214
  -webkit-animation-name: bounceOutUp;
1049
- animation-name: bounceOutUp;
1215
+ animation-name: bounceOutUp;
1050
1216
  }
1051
1217
 
1052
1218
  @-webkit-keyframes fadeIn {
1053
- 0% {opacity: 0;}
1054
- 100% {opacity: 1;}
1219
+ from {
1220
+ opacity: 0;
1221
+ }
1222
+
1223
+ to {
1224
+ opacity: 1;
1225
+ }
1055
1226
  }
1056
1227
 
1057
1228
  @keyframes fadeIn {
1058
- 0% {opacity: 0;}
1059
- 100% {opacity: 1;}
1229
+ from {
1230
+ opacity: 0;
1231
+ }
1232
+
1233
+ to {
1234
+ opacity: 1;
1235
+ }
1060
1236
  }
1061
1237
 
1062
1238
  .fadeIn {
1063
1239
  -webkit-animation-name: fadeIn;
1064
- animation-name: fadeIn;
1240
+ animation-name: fadeIn;
1065
1241
  }
1066
1242
 
1067
1243
  @-webkit-keyframes fadeInDown {
1068
- 0% {
1244
+ from {
1069
1245
  opacity: 0;
1070
1246
  -webkit-transform: translate3d(0, -100%, 0);
1071
- transform: translate3d(0, -100%, 0);
1247
+ transform: translate3d(0, -100%, 0);
1072
1248
  }
1073
1249
 
1074
- 100% {
1250
+ to {
1075
1251
  opacity: 1;
1076
1252
  -webkit-transform: none;
1077
- transform: none;
1253
+ transform: none;
1078
1254
  }
1079
1255
  }
1080
1256
 
1081
1257
  @keyframes fadeInDown {
1082
- 0% {
1258
+ from {
1083
1259
  opacity: 0;
1084
1260
  -webkit-transform: translate3d(0, -100%, 0);
1085
- transform: translate3d(0, -100%, 0);
1261
+ transform: translate3d(0, -100%, 0);
1086
1262
  }
1087
1263
 
1088
- 100% {
1264
+ to {
1089
1265
  opacity: 1;
1090
1266
  -webkit-transform: none;
1091
- transform: none;
1267
+ transform: none;
1092
1268
  }
1093
1269
  }
1094
1270
 
1095
1271
  .fadeInDown {
1096
1272
  -webkit-animation-name: fadeInDown;
1097
- animation-name: fadeInDown;
1273
+ animation-name: fadeInDown;
1098
1274
  }
1099
1275
 
1100
1276
  @-webkit-keyframes fadeInDownBig {
1101
- 0% {
1277
+ from {
1102
1278
  opacity: 0;
1103
1279
  -webkit-transform: translate3d(0, -2000px, 0);
1104
- transform: translate3d(0, -2000px, 0);
1280
+ transform: translate3d(0, -2000px, 0);
1105
1281
  }
1106
1282
 
1107
- 100% {
1283
+ to {
1108
1284
  opacity: 1;
1109
1285
  -webkit-transform: none;
1110
- transform: none;
1286
+ transform: none;
1111
1287
  }
1112
1288
  }
1113
1289
 
1114
1290
  @keyframes fadeInDownBig {
1115
- 0% {
1291
+ from {
1116
1292
  opacity: 0;
1117
1293
  -webkit-transform: translate3d(0, -2000px, 0);
1118
- transform: translate3d(0, -2000px, 0);
1294
+ transform: translate3d(0, -2000px, 0);
1119
1295
  }
1120
1296
 
1121
- 100% {
1297
+ to {
1122
1298
  opacity: 1;
1123
1299
  -webkit-transform: none;
1124
- transform: none;
1300
+ transform: none;
1125
1301
  }
1126
1302
  }
1127
1303
 
1128
1304
  .fadeInDownBig {
1129
1305
  -webkit-animation-name: fadeInDownBig;
1130
- animation-name: fadeInDownBig;
1306
+ animation-name: fadeInDownBig;
1131
1307
  }
1132
1308
 
1133
1309
  @-webkit-keyframes fadeInLeft {
1134
- 0% {
1310
+ from {
1135
1311
  opacity: 0;
1136
1312
  -webkit-transform: translate3d(-100%, 0, 0);
1137
- transform: translate3d(-100%, 0, 0);
1313
+ transform: translate3d(-100%, 0, 0);
1138
1314
  }
1139
1315
 
1140
- 100% {
1316
+ to {
1141
1317
  opacity: 1;
1142
1318
  -webkit-transform: none;
1143
- transform: none;
1319
+ transform: none;
1144
1320
  }
1145
1321
  }
1146
1322
 
1147
1323
  @keyframes fadeInLeft {
1148
- 0% {
1324
+ from {
1149
1325
  opacity: 0;
1150
1326
  -webkit-transform: translate3d(-100%, 0, 0);
1151
- transform: translate3d(-100%, 0, 0);
1327
+ transform: translate3d(-100%, 0, 0);
1152
1328
  }
1153
1329
 
1154
- 100% {
1330
+ to {
1155
1331
  opacity: 1;
1156
1332
  -webkit-transform: none;
1157
- transform: none;
1333
+ transform: none;
1158
1334
  }
1159
1335
  }
1160
1336
 
1161
1337
  .fadeInLeft {
1162
1338
  -webkit-animation-name: fadeInLeft;
1163
- animation-name: fadeInLeft;
1339
+ animation-name: fadeInLeft;
1164
1340
  }
1165
1341
 
1166
1342
  @-webkit-keyframes fadeInLeftBig {
1167
- 0% {
1343
+ from {
1168
1344
  opacity: 0;
1169
1345
  -webkit-transform: translate3d(-2000px, 0, 0);
1170
- transform: translate3d(-2000px, 0, 0);
1346
+ transform: translate3d(-2000px, 0, 0);
1171
1347
  }
1172
1348
 
1173
- 100% {
1349
+ to {
1174
1350
  opacity: 1;
1175
1351
  -webkit-transform: none;
1176
- transform: none;
1352
+ transform: none;
1177
1353
  }
1178
1354
  }
1179
1355
 
1180
1356
  @keyframes fadeInLeftBig {
1181
- 0% {
1357
+ from {
1182
1358
  opacity: 0;
1183
1359
  -webkit-transform: translate3d(-2000px, 0, 0);
1184
- transform: translate3d(-2000px, 0, 0);
1360
+ transform: translate3d(-2000px, 0, 0);
1185
1361
  }
1186
1362
 
1187
- 100% {
1363
+ to {
1188
1364
  opacity: 1;
1189
1365
  -webkit-transform: none;
1190
- transform: none;
1366
+ transform: none;
1191
1367
  }
1192
1368
  }
1193
1369
 
1194
1370
  .fadeInLeftBig {
1195
1371
  -webkit-animation-name: fadeInLeftBig;
1196
- animation-name: fadeInLeftBig;
1372
+ animation-name: fadeInLeftBig;
1197
1373
  }
1198
1374
 
1199
1375
  @-webkit-keyframes fadeInRight {
1200
- 0% {
1376
+ from {
1201
1377
  opacity: 0;
1202
1378
  -webkit-transform: translate3d(100%, 0, 0);
1203
- transform: translate3d(100%, 0, 0);
1379
+ transform: translate3d(100%, 0, 0);
1204
1380
  }
1205
1381
 
1206
- 100% {
1382
+ to {
1207
1383
  opacity: 1;
1208
1384
  -webkit-transform: none;
1209
- transform: none;
1385
+ transform: none;
1210
1386
  }
1211
1387
  }
1212
1388
 
1213
1389
  @keyframes fadeInRight {
1214
- 0% {
1390
+ from {
1215
1391
  opacity: 0;
1216
1392
  -webkit-transform: translate3d(100%, 0, 0);
1217
- transform: translate3d(100%, 0, 0);
1393
+ transform: translate3d(100%, 0, 0);
1218
1394
  }
1219
1395
 
1220
- 100% {
1396
+ to {
1221
1397
  opacity: 1;
1222
1398
  -webkit-transform: none;
1223
- transform: none;
1399
+ transform: none;
1224
1400
  }
1225
1401
  }
1226
1402
 
1227
1403
  .fadeInRight {
1228
1404
  -webkit-animation-name: fadeInRight;
1229
- animation-name: fadeInRight;
1405
+ animation-name: fadeInRight;
1230
1406
  }
1231
1407
 
1232
1408
  @-webkit-keyframes fadeInRightBig {
1233
- 0% {
1409
+ from {
1234
1410
  opacity: 0;
1235
1411
  -webkit-transform: translate3d(2000px, 0, 0);
1236
- transform: translate3d(2000px, 0, 0);
1412
+ transform: translate3d(2000px, 0, 0);
1237
1413
  }
1238
1414
 
1239
- 100% {
1415
+ to {
1240
1416
  opacity: 1;
1241
1417
  -webkit-transform: none;
1242
- transform: none;
1418
+ transform: none;
1243
1419
  }
1244
1420
  }
1245
1421
 
1246
1422
  @keyframes fadeInRightBig {
1247
- 0% {
1423
+ from {
1248
1424
  opacity: 0;
1249
1425
  -webkit-transform: translate3d(2000px, 0, 0);
1250
- transform: translate3d(2000px, 0, 0);
1426
+ transform: translate3d(2000px, 0, 0);
1251
1427
  }
1252
1428
 
1253
- 100% {
1429
+ to {
1254
1430
  opacity: 1;
1255
1431
  -webkit-transform: none;
1256
- transform: none;
1432
+ transform: none;
1257
1433
  }
1258
1434
  }
1259
1435
 
1260
1436
  .fadeInRightBig {
1261
1437
  -webkit-animation-name: fadeInRightBig;
1262
- animation-name: fadeInRightBig;
1438
+ animation-name: fadeInRightBig;
1263
1439
  }
1264
1440
 
1265
1441
  @-webkit-keyframes fadeInUp {
1266
- 0% {
1442
+ from {
1267
1443
  opacity: 0;
1268
1444
  -webkit-transform: translate3d(0, 100%, 0);
1269
- transform: translate3d(0, 100%, 0);
1445
+ transform: translate3d(0, 100%, 0);
1270
1446
  }
1271
1447
 
1272
- 100% {
1448
+ to {
1273
1449
  opacity: 1;
1274
1450
  -webkit-transform: none;
1275
- transform: none;
1451
+ transform: none;
1276
1452
  }
1277
1453
  }
1278
1454
 
1279
1455
  @keyframes fadeInUp {
1280
- 0% {
1456
+ from {
1281
1457
  opacity: 0;
1282
1458
  -webkit-transform: translate3d(0, 100%, 0);
1283
- transform: translate3d(0, 100%, 0);
1459
+ transform: translate3d(0, 100%, 0);
1284
1460
  }
1285
1461
 
1286
- 100% {
1462
+ to {
1287
1463
  opacity: 1;
1288
1464
  -webkit-transform: none;
1289
- transform: none;
1465
+ transform: none;
1290
1466
  }
1291
1467
  }
1292
1468
 
1293
1469
  .fadeInUp {
1294
1470
  -webkit-animation-name: fadeInUp;
1295
- animation-name: fadeInUp;
1471
+ animation-name: fadeInUp;
1296
1472
  }
1297
1473
 
1298
1474
  @-webkit-keyframes fadeInUpBig {
1299
- 0% {
1475
+ from {
1300
1476
  opacity: 0;
1301
1477
  -webkit-transform: translate3d(0, 2000px, 0);
1302
- transform: translate3d(0, 2000px, 0);
1478
+ transform: translate3d(0, 2000px, 0);
1303
1479
  }
1304
1480
 
1305
- 100% {
1481
+ to {
1306
1482
  opacity: 1;
1307
1483
  -webkit-transform: none;
1308
- transform: none;
1484
+ transform: none;
1309
1485
  }
1310
1486
  }
1311
1487
 
1312
1488
  @keyframes fadeInUpBig {
1313
- 0% {
1489
+ from {
1314
1490
  opacity: 0;
1315
1491
  -webkit-transform: translate3d(0, 2000px, 0);
1316
- transform: translate3d(0, 2000px, 0);
1492
+ transform: translate3d(0, 2000px, 0);
1317
1493
  }
1318
1494
 
1319
- 100% {
1495
+ to {
1320
1496
  opacity: 1;
1321
1497
  -webkit-transform: none;
1322
- transform: none;
1498
+ transform: none;
1323
1499
  }
1324
1500
  }
1325
1501
 
1326
1502
  .fadeInUpBig {
1327
1503
  -webkit-animation-name: fadeInUpBig;
1328
- animation-name: fadeInUpBig;
1504
+ animation-name: fadeInUpBig;
1329
1505
  }
1330
1506
 
1331
1507
  @-webkit-keyframes fadeOut {
1332
- 0% {opacity: 1;}
1333
- 100% {opacity: 0;}
1508
+ from {
1509
+ opacity: 1;
1510
+ }
1511
+
1512
+ to {
1513
+ opacity: 0;
1514
+ }
1334
1515
  }
1335
1516
 
1336
1517
  @keyframes fadeOut {
1337
- 0% {opacity: 1;}
1338
- 100% {opacity: 0;}
1518
+ from {
1519
+ opacity: 1;
1520
+ }
1521
+
1522
+ to {
1523
+ opacity: 0;
1524
+ }
1339
1525
  }
1340
1526
 
1341
1527
  .fadeOut {
1342
1528
  -webkit-animation-name: fadeOut;
1343
- animation-name: fadeOut;
1529
+ animation-name: fadeOut;
1344
1530
  }
1345
1531
 
1346
1532
  @-webkit-keyframes fadeOutDown {
1347
- 0% {
1533
+ from {
1348
1534
  opacity: 1;
1349
1535
  }
1350
1536
 
1351
- 100% {
1537
+ to {
1352
1538
  opacity: 0;
1353
1539
  -webkit-transform: translate3d(0, 100%, 0);
1354
- transform: translate3d(0, 100%, 0);
1540
+ transform: translate3d(0, 100%, 0);
1355
1541
  }
1356
1542
  }
1357
1543
 
1358
1544
  @keyframes fadeOutDown {
1359
- 0% {
1545
+ from {
1360
1546
  opacity: 1;
1361
1547
  }
1362
1548
 
1363
- 100% {
1549
+ to {
1364
1550
  opacity: 0;
1365
1551
  -webkit-transform: translate3d(0, 100%, 0);
1366
- transform: translate3d(0, 100%, 0);
1552
+ transform: translate3d(0, 100%, 0);
1367
1553
  }
1368
1554
  }
1369
1555
 
1370
1556
  .fadeOutDown {
1371
1557
  -webkit-animation-name: fadeOutDown;
1372
- animation-name: fadeOutDown;
1558
+ animation-name: fadeOutDown;
1373
1559
  }
1374
1560
 
1375
1561
  @-webkit-keyframes fadeOutDownBig {
1376
- 0% {
1562
+ from {
1377
1563
  opacity: 1;
1378
1564
  }
1379
1565
 
1380
- 100% {
1566
+ to {
1381
1567
  opacity: 0;
1382
1568
  -webkit-transform: translate3d(0, 2000px, 0);
1383
- transform: translate3d(0, 2000px, 0);
1569
+ transform: translate3d(0, 2000px, 0);
1384
1570
  }
1385
1571
  }
1386
1572
 
1387
1573
  @keyframes fadeOutDownBig {
1388
- 0% {
1574
+ from {
1389
1575
  opacity: 1;
1390
1576
  }
1391
1577
 
1392
- 100% {
1578
+ to {
1393
1579
  opacity: 0;
1394
1580
  -webkit-transform: translate3d(0, 2000px, 0);
1395
- transform: translate3d(0, 2000px, 0);
1581
+ transform: translate3d(0, 2000px, 0);
1396
1582
  }
1397
1583
  }
1398
1584
 
1399
1585
  .fadeOutDownBig {
1400
1586
  -webkit-animation-name: fadeOutDownBig;
1401
- animation-name: fadeOutDownBig;
1587
+ animation-name: fadeOutDownBig;
1402
1588
  }
1403
1589
 
1404
1590
  @-webkit-keyframes fadeOutLeft {
1405
- 0% {
1591
+ from {
1406
1592
  opacity: 1;
1407
1593
  }
1408
1594
 
1409
- 100% {
1595
+ to {
1410
1596
  opacity: 0;
1411
1597
  -webkit-transform: translate3d(-100%, 0, 0);
1412
- transform: translate3d(-100%, 0, 0);
1598
+ transform: translate3d(-100%, 0, 0);
1413
1599
  }
1414
1600
  }
1415
1601
 
1416
1602
  @keyframes fadeOutLeft {
1417
- 0% {
1603
+ from {
1418
1604
  opacity: 1;
1419
1605
  }
1420
1606
 
1421
- 100% {
1607
+ to {
1422
1608
  opacity: 0;
1423
1609
  -webkit-transform: translate3d(-100%, 0, 0);
1424
- transform: translate3d(-100%, 0, 0);
1610
+ transform: translate3d(-100%, 0, 0);
1425
1611
  }
1426
1612
  }
1427
1613
 
1428
1614
  .fadeOutLeft {
1429
1615
  -webkit-animation-name: fadeOutLeft;
1430
- animation-name: fadeOutLeft;
1616
+ animation-name: fadeOutLeft;
1431
1617
  }
1432
1618
 
1433
1619
  @-webkit-keyframes fadeOutLeftBig {
1434
- 0% {
1620
+ from {
1435
1621
  opacity: 1;
1436
1622
  }
1437
1623
 
1438
- 100% {
1624
+ to {
1439
1625
  opacity: 0;
1440
1626
  -webkit-transform: translate3d(-2000px, 0, 0);
1441
- transform: translate3d(-2000px, 0, 0);
1627
+ transform: translate3d(-2000px, 0, 0);
1442
1628
  }
1443
1629
  }
1444
1630
 
1445
1631
  @keyframes fadeOutLeftBig {
1446
- 0% {
1632
+ from {
1447
1633
  opacity: 1;
1448
1634
  }
1449
1635
 
1450
- 100% {
1636
+ to {
1451
1637
  opacity: 0;
1452
1638
  -webkit-transform: translate3d(-2000px, 0, 0);
1453
- transform: translate3d(-2000px, 0, 0);
1639
+ transform: translate3d(-2000px, 0, 0);
1454
1640
  }
1455
1641
  }
1456
1642
 
1457
1643
  .fadeOutLeftBig {
1458
1644
  -webkit-animation-name: fadeOutLeftBig;
1459
- animation-name: fadeOutLeftBig;
1645
+ animation-name: fadeOutLeftBig;
1460
1646
  }
1461
1647
 
1462
1648
  @-webkit-keyframes fadeOutRight {
1463
- 0% {
1649
+ from {
1464
1650
  opacity: 1;
1465
1651
  }
1466
1652
 
1467
- 100% {
1653
+ to {
1468
1654
  opacity: 0;
1469
1655
  -webkit-transform: translate3d(100%, 0, 0);
1470
- transform: translate3d(100%, 0, 0);
1656
+ transform: translate3d(100%, 0, 0);
1471
1657
  }
1472
1658
  }
1473
1659
 
1474
1660
  @keyframes fadeOutRight {
1475
- 0% {
1661
+ from {
1476
1662
  opacity: 1;
1477
1663
  }
1478
1664
 
1479
- 100% {
1665
+ to {
1480
1666
  opacity: 0;
1481
1667
  -webkit-transform: translate3d(100%, 0, 0);
1482
- transform: translate3d(100%, 0, 0);
1668
+ transform: translate3d(100%, 0, 0);
1483
1669
  }
1484
1670
  }
1485
1671
 
1486
1672
  .fadeOutRight {
1487
1673
  -webkit-animation-name: fadeOutRight;
1488
- animation-name: fadeOutRight;
1674
+ animation-name: fadeOutRight;
1489
1675
  }
1490
1676
 
1491
1677
  @-webkit-keyframes fadeOutRightBig {
1492
- 0% {
1678
+ from {
1493
1679
  opacity: 1;
1494
1680
  }
1495
1681
 
1496
- 100% {
1682
+ to {
1497
1683
  opacity: 0;
1498
1684
  -webkit-transform: translate3d(2000px, 0, 0);
1499
- transform: translate3d(2000px, 0, 0);
1685
+ transform: translate3d(2000px, 0, 0);
1500
1686
  }
1501
1687
  }
1502
1688
 
1503
1689
  @keyframes fadeOutRightBig {
1504
- 0% {
1690
+ from {
1505
1691
  opacity: 1;
1506
1692
  }
1507
1693
 
1508
- 100% {
1694
+ to {
1509
1695
  opacity: 0;
1510
1696
  -webkit-transform: translate3d(2000px, 0, 0);
1511
- transform: translate3d(2000px, 0, 0);
1697
+ transform: translate3d(2000px, 0, 0);
1512
1698
  }
1513
1699
  }
1514
1700
 
1515
1701
  .fadeOutRightBig {
1516
1702
  -webkit-animation-name: fadeOutRightBig;
1517
- animation-name: fadeOutRightBig;
1703
+ animation-name: fadeOutRightBig;
1518
1704
  }
1519
1705
 
1520
1706
  @-webkit-keyframes fadeOutUp {
1521
- 0% {
1707
+ from {
1522
1708
  opacity: 1;
1523
1709
  }
1524
1710
 
1525
- 100% {
1711
+ to {
1526
1712
  opacity: 0;
1527
1713
  -webkit-transform: translate3d(0, -100%, 0);
1528
- transform: translate3d(0, -100%, 0);
1714
+ transform: translate3d(0, -100%, 0);
1529
1715
  }
1530
1716
  }
1531
1717
 
1532
1718
  @keyframes fadeOutUp {
1533
- 0% {
1719
+ from {
1534
1720
  opacity: 1;
1535
1721
  }
1536
1722
 
1537
- 100% {
1723
+ to {
1538
1724
  opacity: 0;
1539
1725
  -webkit-transform: translate3d(0, -100%, 0);
1540
- transform: translate3d(0, -100%, 0);
1726
+ transform: translate3d(0, -100%, 0);
1541
1727
  }
1542
1728
  }
1543
1729
 
1544
1730
  .fadeOutUp {
1545
1731
  -webkit-animation-name: fadeOutUp;
1546
- animation-name: fadeOutUp;
1732
+ animation-name: fadeOutUp;
1547
1733
  }
1548
1734
 
1549
1735
  @-webkit-keyframes fadeOutUpBig {
1550
- 0% {
1736
+ from {
1551
1737
  opacity: 1;
1552
1738
  }
1553
1739
 
1554
- 100% {
1740
+ to {
1555
1741
  opacity: 0;
1556
1742
  -webkit-transform: translate3d(0, -2000px, 0);
1557
- transform: translate3d(0, -2000px, 0);
1743
+ transform: translate3d(0, -2000px, 0);
1558
1744
  }
1559
1745
  }
1560
1746
 
1561
1747
  @keyframes fadeOutUpBig {
1562
- 0% {
1748
+ from {
1563
1749
  opacity: 1;
1564
1750
  }
1565
1751
 
1566
- 100% {
1752
+ to {
1567
1753
  opacity: 0;
1568
1754
  -webkit-transform: translate3d(0, -2000px, 0);
1569
- transform: translate3d(0, -2000px, 0);
1755
+ transform: translate3d(0, -2000px, 0);
1570
1756
  }
1571
1757
  }
1572
1758
 
1573
1759
  .fadeOutUpBig {
1574
1760
  -webkit-animation-name: fadeOutUpBig;
1575
- animation-name: fadeOutUpBig;
1761
+ animation-name: fadeOutUpBig;
1576
1762
  }
1577
1763
 
1578
1764
  @-webkit-keyframes flip {
1579
- 0% {
1765
+ from {
1580
1766
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1581
- transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1767
+ transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1582
1768
  -webkit-animation-timing-function: ease-out;
1583
- animation-timing-function: ease-out;
1769
+ animation-timing-function: ease-out;
1584
1770
  }
1585
1771
 
1586
1772
  40% {
1587
1773
  -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1588
- transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1774
+ transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1589
1775
  -webkit-animation-timing-function: ease-out;
1590
- animation-timing-function: ease-out;
1776
+ animation-timing-function: ease-out;
1591
1777
  }
1592
1778
 
1593
1779
  50% {
1594
1780
  -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1595
- transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1781
+ transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1596
1782
  -webkit-animation-timing-function: ease-in;
1597
- animation-timing-function: ease-in;
1783
+ animation-timing-function: ease-in;
1598
1784
  }
1599
1785
 
1600
1786
  80% {
1601
1787
  -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
1602
- transform: perspective(400px) scale3d(.95, .95, .95);
1788
+ transform: perspective(400px) scale3d(.95, .95, .95);
1603
1789
  -webkit-animation-timing-function: ease-in;
1604
- animation-timing-function: ease-in;
1790
+ animation-timing-function: ease-in;
1605
1791
  }
1606
1792
 
1607
- 100% {
1793
+ to {
1608
1794
  -webkit-transform: perspective(400px);
1609
- transform: perspective(400px);
1795
+ transform: perspective(400px);
1610
1796
  -webkit-animation-timing-function: ease-in;
1611
- animation-timing-function: ease-in;
1797
+ animation-timing-function: ease-in;
1612
1798
  }
1613
1799
  }
1614
1800
 
1615
1801
  @keyframes flip {
1616
- 0% {
1802
+ from {
1617
1803
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1618
- transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1804
+ transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1619
1805
  -webkit-animation-timing-function: ease-out;
1620
- animation-timing-function: ease-out;
1806
+ animation-timing-function: ease-out;
1621
1807
  }
1622
1808
 
1623
1809
  40% {
1624
1810
  -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1625
- transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1811
+ transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1626
1812
  -webkit-animation-timing-function: ease-out;
1627
- animation-timing-function: ease-out;
1813
+ animation-timing-function: ease-out;
1628
1814
  }
1629
1815
 
1630
1816
  50% {
1631
1817
  -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1632
- transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1818
+ transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1633
1819
  -webkit-animation-timing-function: ease-in;
1634
- animation-timing-function: ease-in;
1820
+ animation-timing-function: ease-in;
1635
1821
  }
1636
1822
 
1637
1823
  80% {
1638
1824
  -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
1639
- transform: perspective(400px) scale3d(.95, .95, .95);
1825
+ transform: perspective(400px) scale3d(.95, .95, .95);
1640
1826
  -webkit-animation-timing-function: ease-in;
1641
- animation-timing-function: ease-in;
1827
+ animation-timing-function: ease-in;
1642
1828
  }
1643
1829
 
1644
- 100% {
1830
+ to {
1645
1831
  -webkit-transform: perspective(400px);
1646
- transform: perspective(400px);
1832
+ transform: perspective(400px);
1647
1833
  -webkit-animation-timing-function: ease-in;
1648
- animation-timing-function: ease-in;
1834
+ animation-timing-function: ease-in;
1649
1835
  }
1650
1836
  }
1651
1837
 
1652
1838
  .animated.flip {
1653
1839
  -webkit-backface-visibility: visible;
1654
- backface-visibility: visible;
1840
+ backface-visibility: visible;
1655
1841
  -webkit-animation-name: flip;
1656
- animation-name: flip;
1842
+ animation-name: flip;
1657
1843
  }
1658
1844
 
1659
1845
  @-webkit-keyframes flipInX {
1660
- 0% {
1846
+ from {
1661
1847
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1662
- transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1663
- -webkit-transition-timing-function: ease-in;
1664
- transition-timing-function: ease-in;
1848
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1849
+ -webkit-animation-timing-function: ease-in;
1850
+ animation-timing-function: ease-in;
1665
1851
  opacity: 0;
1666
1852
  }
1667
1853
 
1668
1854
  40% {
1669
1855
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1670
- transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1671
- -webkit-transition-timing-function: ease-in;
1672
- transition-timing-function: ease-in;
1856
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1857
+ -webkit-animation-timing-function: ease-in;
1858
+ animation-timing-function: ease-in;
1673
1859
  }
1674
1860
 
1675
1861
  60% {
1676
1862
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1677
- transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1863
+ transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1678
1864
  opacity: 1;
1679
1865
  }
1680
1866
 
1681
1867
  80% {
1682
1868
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1683
- transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1869
+ transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1684
1870
  }
1685
1871
 
1686
- 100% {
1872
+ to {
1687
1873
  -webkit-transform: perspective(400px);
1688
- transform: perspective(400px);
1874
+ transform: perspective(400px);
1689
1875
  }
1690
1876
  }
1691
1877
 
1692
1878
  @keyframes flipInX {
1693
- 0% {
1879
+ from {
1694
1880
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1695
- transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1696
- -webkit-transition-timing-function: ease-in;
1697
- transition-timing-function: ease-in;
1881
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1882
+ -webkit-animation-timing-function: ease-in;
1883
+ animation-timing-function: ease-in;
1698
1884
  opacity: 0;
1699
1885
  }
1700
1886
 
1701
1887
  40% {
1702
1888
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1703
- transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1704
- -webkit-transition-timing-function: ease-in;
1705
- transition-timing-function: ease-in;
1889
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1890
+ -webkit-animation-timing-function: ease-in;
1891
+ animation-timing-function: ease-in;
1706
1892
  }
1707
1893
 
1708
1894
  60% {
1709
1895
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1710
- transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1896
+ transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1711
1897
  opacity: 1;
1712
1898
  }
1713
1899
 
1714
1900
  80% {
1715
1901
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1716
- transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1902
+ transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1717
1903
  }
1718
1904
 
1719
- 100% {
1905
+ to {
1720
1906
  -webkit-transform: perspective(400px);
1721
- transform: perspective(400px);
1907
+ transform: perspective(400px);
1722
1908
  }
1723
1909
  }
1724
1910
 
1725
1911
  .flipInX {
1726
1912
  -webkit-backface-visibility: visible !important;
1727
- backface-visibility: visible !important;
1913
+ backface-visibility: visible !important;
1728
1914
  -webkit-animation-name: flipInX;
1729
- animation-name: flipInX;
1915
+ animation-name: flipInX;
1730
1916
  }
1731
1917
 
1732
1918
  @-webkit-keyframes flipInY {
1733
- 0% {
1919
+ from {
1734
1920
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1735
- transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1736
- -webkit-transition-timing-function: ease-in;
1737
- transition-timing-function: ease-in;
1921
+ transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1922
+ -webkit-animation-timing-function: ease-in;
1923
+ animation-timing-function: ease-in;
1738
1924
  opacity: 0;
1739
1925
  }
1740
1926
 
1741
1927
  40% {
1742
1928
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1743
- transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1744
- -webkit-transition-timing-function: ease-in;
1745
- transition-timing-function: ease-in;
1929
+ transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1930
+ -webkit-animation-timing-function: ease-in;
1931
+ animation-timing-function: ease-in;
1746
1932
  }
1747
1933
 
1748
1934
  60% {
1749
1935
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1750
- transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1936
+ transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1751
1937
  opacity: 1;
1752
1938
  }
1753
1939
 
1754
1940
  80% {
1755
1941
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1756
- transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1942
+ transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1757
1943
  }
1758
1944
 
1759
- 100% {
1945
+ to {
1760
1946
  -webkit-transform: perspective(400px);
1761
- transform: perspective(400px);
1947
+ transform: perspective(400px);
1762
1948
  }
1763
1949
  }
1764
1950
 
1765
1951
  @keyframes flipInY {
1766
- 0% {
1952
+ from {
1767
1953
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1768
- transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1769
- -webkit-transition-timing-function: ease-in;
1770
- transition-timing-function: ease-in;
1954
+ transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1955
+ -webkit-animation-timing-function: ease-in;
1956
+ animation-timing-function: ease-in;
1771
1957
  opacity: 0;
1772
1958
  }
1773
1959
 
1774
1960
  40% {
1775
1961
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1776
- transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1777
- -webkit-transition-timing-function: ease-in;
1778
- transition-timing-function: ease-in;
1962
+ transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1963
+ -webkit-animation-timing-function: ease-in;
1964
+ animation-timing-function: ease-in;
1779
1965
  }
1780
1966
 
1781
1967
  60% {
1782
1968
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1783
- transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1969
+ transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1784
1970
  opacity: 1;
1785
1971
  }
1786
1972
 
1787
1973
  80% {
1788
1974
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1789
- transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1975
+ transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1790
1976
  }
1791
1977
 
1792
- 100% {
1978
+ to {
1793
1979
  -webkit-transform: perspective(400px);
1794
- transform: perspective(400px);
1980
+ transform: perspective(400px);
1795
1981
  }
1796
1982
  }
1797
1983
 
1798
1984
  .flipInY {
1799
1985
  -webkit-backface-visibility: visible !important;
1800
- backface-visibility: visible !important;
1986
+ backface-visibility: visible !important;
1801
1987
  -webkit-animation-name: flipInY;
1802
- animation-name: flipInY;
1988
+ animation-name: flipInY;
1803
1989
  }
1804
1990
 
1805
1991
  @-webkit-keyframes flipOutX {
1806
- 0% {
1992
+ from {
1807
1993
  -webkit-transform: perspective(400px);
1808
- transform: perspective(400px);
1994
+ transform: perspective(400px);
1809
1995
  }
1810
1996
 
1811
1997
  30% {
1812
1998
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1813
- transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1999
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1814
2000
  opacity: 1;
1815
2001
  }
1816
2002
 
1817
- 100% {
2003
+ to {
1818
2004
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1819
- transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2005
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1820
2006
  opacity: 0;
1821
2007
  }
1822
2008
  }
1823
2009
 
1824
2010
  @keyframes flipOutX {
1825
- 0% {
2011
+ from {
1826
2012
  -webkit-transform: perspective(400px);
1827
- transform: perspective(400px);
2013
+ transform: perspective(400px);
1828
2014
  }
1829
2015
 
1830
2016
  30% {
1831
2017
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1832
- transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2018
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1833
2019
  opacity: 1;
1834
2020
  }
1835
2021
 
1836
- 100% {
2022
+ to {
1837
2023
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1838
- transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2024
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1839
2025
  opacity: 0;
1840
2026
  }
1841
2027
  }
1842
2028
 
1843
2029
  .flipOutX {
1844
2030
  -webkit-animation-name: flipOutX;
1845
- animation-name: flipOutX;
1846
- -webkit-animation-duration: .75s;
1847
- animation-duration: .75s;
2031
+ animation-name: flipOutX;
1848
2032
  -webkit-backface-visibility: visible !important;
1849
- backface-visibility: visible !important;
2033
+ backface-visibility: visible !important;
1850
2034
  }
1851
2035
 
1852
2036
  @-webkit-keyframes flipOutY {
1853
- 0% {
2037
+ from {
1854
2038
  -webkit-transform: perspective(400px);
1855
- transform: perspective(400px);
2039
+ transform: perspective(400px);
1856
2040
  }
1857
2041
 
1858
2042
  30% {
1859
2043
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
1860
- transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2044
+ transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
1861
2045
  opacity: 1;
1862
2046
  }
1863
2047
 
1864
- 100% {
2048
+ to {
1865
2049
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1866
- transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2050
+ transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1867
2051
  opacity: 0;
1868
2052
  }
1869
2053
  }
1870
2054
 
1871
2055
  @keyframes flipOutY {
1872
- 0% {
2056
+ from {
1873
2057
  -webkit-transform: perspective(400px);
1874
- transform: perspective(400px);
2058
+ transform: perspective(400px);
1875
2059
  }
1876
2060
 
1877
2061
  30% {
1878
2062
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
1879
- transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2063
+ transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
1880
2064
  opacity: 1;
1881
2065
  }
1882
2066
 
1883
- 100% {
2067
+ to {
1884
2068
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1885
- transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2069
+ transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1886
2070
  opacity: 0;
1887
2071
  }
1888
2072
  }
1889
2073
 
1890
2074
  .flipOutY {
1891
2075
  -webkit-backface-visibility: visible !important;
1892
- backface-visibility: visible !important;
2076
+ backface-visibility: visible !important;
1893
2077
  -webkit-animation-name: flipOutY;
1894
- animation-name: flipOutY;
1895
- -webkit-animation-duration: .75s;
1896
- animation-duration: .75s;
2078
+ animation-name: flipOutY;
1897
2079
  }
1898
2080
 
1899
2081
  @-webkit-keyframes lightSpeedIn {
1900
- 0% {
2082
+ from {
1901
2083
  -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
1902
- transform: translate3d(100%, 0, 0) skewX(-30deg);
2084
+ transform: translate3d(100%, 0, 0) skewX(-30deg);
1903
2085
  opacity: 0;
1904
2086
  }
1905
2087
 
1906
2088
  60% {
1907
2089
  -webkit-transform: skewX(20deg);
1908
- transform: skewX(20deg);
2090
+ transform: skewX(20deg);
1909
2091
  opacity: 1;
1910
2092
  }
1911
2093
 
1912
2094
  80% {
1913
2095
  -webkit-transform: skewX(-5deg);
1914
- transform: skewX(-5deg);
2096
+ transform: skewX(-5deg);
1915
2097
  opacity: 1;
1916
2098
  }
1917
2099
 
1918
- 100% {
2100
+ to {
1919
2101
  -webkit-transform: none;
1920
- transform: none;
2102
+ transform: none;
1921
2103
  opacity: 1;
1922
2104
  }
1923
2105
  }
1924
2106
 
1925
2107
  @keyframes lightSpeedIn {
1926
- 0% {
2108
+ from {
1927
2109
  -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
1928
- transform: translate3d(100%, 0, 0) skewX(-30deg);
2110
+ transform: translate3d(100%, 0, 0) skewX(-30deg);
1929
2111
  opacity: 0;
1930
2112
  }
1931
2113
 
1932
2114
  60% {
1933
2115
  -webkit-transform: skewX(20deg);
1934
- transform: skewX(20deg);
2116
+ transform: skewX(20deg);
1935
2117
  opacity: 1;
1936
2118
  }
1937
2119
 
1938
2120
  80% {
1939
2121
  -webkit-transform: skewX(-5deg);
1940
- transform: skewX(-5deg);
2122
+ transform: skewX(-5deg);
1941
2123
  opacity: 1;
1942
2124
  }
1943
2125
 
1944
- 100% {
2126
+ to {
1945
2127
  -webkit-transform: none;
1946
- transform: none;
2128
+ transform: none;
1947
2129
  opacity: 1;
1948
2130
  }
1949
2131
  }
1950
2132
 
1951
2133
  .lightSpeedIn {
1952
2134
  -webkit-animation-name: lightSpeedIn;
1953
- animation-name: lightSpeedIn;
2135
+ animation-name: lightSpeedIn;
1954
2136
  -webkit-animation-timing-function: ease-out;
1955
- animation-timing-function: ease-out;
2137
+ animation-timing-function: ease-out;
1956
2138
  }
1957
2139
 
1958
2140
  @-webkit-keyframes lightSpeedOut {
1959
- 0% {
2141
+ from {
1960
2142
  opacity: 1;
1961
2143
  }
1962
2144
 
1963
- 100% {
2145
+ to {
1964
2146
  -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
1965
- transform: translate3d(100%, 0, 0) skewX(30deg);
2147
+ transform: translate3d(100%, 0, 0) skewX(30deg);
1966
2148
  opacity: 0;
1967
2149
  }
1968
2150
  }
1969
2151
 
1970
2152
  @keyframes lightSpeedOut {
1971
- 0% {
2153
+ from {
1972
2154
  opacity: 1;
1973
2155
  }
1974
2156
 
1975
- 100% {
2157
+ to {
1976
2158
  -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
1977
- transform: translate3d(100%, 0, 0) skewX(30deg);
2159
+ transform: translate3d(100%, 0, 0) skewX(30deg);
1978
2160
  opacity: 0;
1979
2161
  }
1980
2162
  }
1981
2163
 
1982
2164
  .lightSpeedOut {
1983
2165
  -webkit-animation-name: lightSpeedOut;
1984
- animation-name: lightSpeedOut;
2166
+ animation-name: lightSpeedOut;
1985
2167
  -webkit-animation-timing-function: ease-in;
1986
- animation-timing-function: ease-in;
2168
+ animation-timing-function: ease-in;
1987
2169
  }
1988
2170
 
1989
2171
  @-webkit-keyframes rotateIn {
1990
- 0% {
2172
+ from {
1991
2173
  -webkit-transform-origin: center;
1992
- transform-origin: center;
2174
+ transform-origin: center;
1993
2175
  -webkit-transform: rotate3d(0, 0, 1, -200deg);
1994
- transform: rotate3d(0, 0, 1, -200deg);
2176
+ transform: rotate3d(0, 0, 1, -200deg);
1995
2177
  opacity: 0;
1996
2178
  }
1997
2179
 
1998
- 100% {
2180
+ to {
1999
2181
  -webkit-transform-origin: center;
2000
- transform-origin: center;
2182
+ transform-origin: center;
2001
2183
  -webkit-transform: none;
2002
- transform: none;
2184
+ transform: none;
2003
2185
  opacity: 1;
2004
2186
  }
2005
2187
  }
2006
2188
 
2007
2189
  @keyframes rotateIn {
2008
- 0% {
2190
+ from {
2009
2191
  -webkit-transform-origin: center;
2010
- transform-origin: center;
2192
+ transform-origin: center;
2011
2193
  -webkit-transform: rotate3d(0, 0, 1, -200deg);
2012
- transform: rotate3d(0, 0, 1, -200deg);
2194
+ transform: rotate3d(0, 0, 1, -200deg);
2013
2195
  opacity: 0;
2014
2196
  }
2015
2197
 
2016
- 100% {
2198
+ to {
2017
2199
  -webkit-transform-origin: center;
2018
- transform-origin: center;
2200
+ transform-origin: center;
2019
2201
  -webkit-transform: none;
2020
- transform: none;
2202
+ transform: none;
2021
2203
  opacity: 1;
2022
2204
  }
2023
2205
  }
2024
2206
 
2025
2207
  .rotateIn {
2026
2208
  -webkit-animation-name: rotateIn;
2027
- animation-name: rotateIn;
2209
+ animation-name: rotateIn;
2028
2210
  }
2029
2211
 
2030
2212
  @-webkit-keyframes rotateInDownLeft {
2031
- 0% {
2213
+ from {
2032
2214
  -webkit-transform-origin: left bottom;
2033
- transform-origin: left bottom;
2215
+ transform-origin: left bottom;
2034
2216
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
2035
- transform: rotate3d(0, 0, 1, -45deg);
2217
+ transform: rotate3d(0, 0, 1, -45deg);
2036
2218
  opacity: 0;
2037
2219
  }
2038
2220
 
2039
- 100% {
2221
+ to {
2040
2222
  -webkit-transform-origin: left bottom;
2041
- transform-origin: left bottom;
2223
+ transform-origin: left bottom;
2042
2224
  -webkit-transform: none;
2043
- transform: none;
2225
+ transform: none;
2044
2226
  opacity: 1;
2045
2227
  }
2046
2228
  }
2047
2229
 
2048
2230
  @keyframes rotateInDownLeft {
2049
- 0% {
2231
+ from {
2050
2232
  -webkit-transform-origin: left bottom;
2051
- transform-origin: left bottom;
2233
+ transform-origin: left bottom;
2052
2234
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
2053
- transform: rotate3d(0, 0, 1, -45deg);
2235
+ transform: rotate3d(0, 0, 1, -45deg);
2054
2236
  opacity: 0;
2055
2237
  }
2056
2238
 
2057
- 100% {
2239
+ to {
2058
2240
  -webkit-transform-origin: left bottom;
2059
- transform-origin: left bottom;
2241
+ transform-origin: left bottom;
2060
2242
  -webkit-transform: none;
2061
- transform: none;
2243
+ transform: none;
2062
2244
  opacity: 1;
2063
2245
  }
2064
2246
  }
2065
2247
 
2066
2248
  .rotateInDownLeft {
2067
2249
  -webkit-animation-name: rotateInDownLeft;
2068
- animation-name: rotateInDownLeft;
2250
+ animation-name: rotateInDownLeft;
2069
2251
  }
2070
2252
 
2071
2253
  @-webkit-keyframes rotateInDownRight {
2072
- 0% {
2254
+ from {
2073
2255
  -webkit-transform-origin: right bottom;
2074
- transform-origin: right bottom;
2256
+ transform-origin: right bottom;
2075
2257
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
2076
- transform: rotate3d(0, 0, 1, 45deg);
2258
+ transform: rotate3d(0, 0, 1, 45deg);
2077
2259
  opacity: 0;
2078
2260
  }
2079
2261
 
2080
- 100% {
2262
+ to {
2081
2263
  -webkit-transform-origin: right bottom;
2082
- transform-origin: right bottom;
2264
+ transform-origin: right bottom;
2083
2265
  -webkit-transform: none;
2084
- transform: none;
2266
+ transform: none;
2085
2267
  opacity: 1;
2086
2268
  }
2087
2269
  }
2088
2270
 
2089
2271
  @keyframes rotateInDownRight {
2090
- 0% {
2272
+ from {
2091
2273
  -webkit-transform-origin: right bottom;
2092
- transform-origin: right bottom;
2274
+ transform-origin: right bottom;
2093
2275
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
2094
- transform: rotate3d(0, 0, 1, 45deg);
2276
+ transform: rotate3d(0, 0, 1, 45deg);
2095
2277
  opacity: 0;
2096
2278
  }
2097
2279
 
2098
- 100% {
2280
+ to {
2099
2281
  -webkit-transform-origin: right bottom;
2100
- transform-origin: right bottom;
2282
+ transform-origin: right bottom;
2101
2283
  -webkit-transform: none;
2102
- transform: none;
2284
+ transform: none;
2103
2285
  opacity: 1;
2104
2286
  }
2105
2287
  }
2106
2288
 
2107
2289
  .rotateInDownRight {
2108
2290
  -webkit-animation-name: rotateInDownRight;
2109
- animation-name: rotateInDownRight;
2291
+ animation-name: rotateInDownRight;
2110
2292
  }
2111
2293
 
2112
2294
  @-webkit-keyframes rotateInUpLeft {
2113
- 0% {
2295
+ from {
2114
2296
  -webkit-transform-origin: left bottom;
2115
- transform-origin: left bottom;
2297
+ transform-origin: left bottom;
2116
2298
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
2117
- transform: rotate3d(0, 0, 1, 45deg);
2299
+ transform: rotate3d(0, 0, 1, 45deg);
2118
2300
  opacity: 0;
2119
2301
  }
2120
2302
 
2121
- 100% {
2303
+ to {
2122
2304
  -webkit-transform-origin: left bottom;
2123
- transform-origin: left bottom;
2305
+ transform-origin: left bottom;
2124
2306
  -webkit-transform: none;
2125
- transform: none;
2307
+ transform: none;
2126
2308
  opacity: 1;
2127
2309
  }
2128
2310
  }
2129
2311
 
2130
2312
  @keyframes rotateInUpLeft {
2131
- 0% {
2313
+ from {
2132
2314
  -webkit-transform-origin: left bottom;
2133
- transform-origin: left bottom;
2315
+ transform-origin: left bottom;
2134
2316
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
2135
- transform: rotate3d(0, 0, 1, 45deg);
2317
+ transform: rotate3d(0, 0, 1, 45deg);
2136
2318
  opacity: 0;
2137
2319
  }
2138
2320
 
2139
- 100% {
2321
+ to {
2140
2322
  -webkit-transform-origin: left bottom;
2141
- transform-origin: left bottom;
2323
+ transform-origin: left bottom;
2142
2324
  -webkit-transform: none;
2143
- transform: none;
2325
+ transform: none;
2144
2326
  opacity: 1;
2145
2327
  }
2146
2328
  }
2147
2329
 
2148
2330
  .rotateInUpLeft {
2149
2331
  -webkit-animation-name: rotateInUpLeft;
2150
- animation-name: rotateInUpLeft;
2332
+ animation-name: rotateInUpLeft;
2151
2333
  }
2152
2334
 
2153
2335
  @-webkit-keyframes rotateInUpRight {
2154
- 0% {
2336
+ from {
2155
2337
  -webkit-transform-origin: right bottom;
2156
- transform-origin: right bottom;
2338
+ transform-origin: right bottom;
2157
2339
  -webkit-transform: rotate3d(0, 0, 1, -90deg);
2158
- transform: rotate3d(0, 0, 1, -90deg);
2340
+ transform: rotate3d(0, 0, 1, -90deg);
2159
2341
  opacity: 0;
2160
2342
  }
2161
2343
 
2162
- 100% {
2344
+ to {
2163
2345
  -webkit-transform-origin: right bottom;
2164
- transform-origin: right bottom;
2346
+ transform-origin: right bottom;
2165
2347
  -webkit-transform: none;
2166
- transform: none;
2348
+ transform: none;
2167
2349
  opacity: 1;
2168
2350
  }
2169
2351
  }
2170
2352
 
2171
2353
  @keyframes rotateInUpRight {
2172
- 0% {
2354
+ from {
2173
2355
  -webkit-transform-origin: right bottom;
2174
- transform-origin: right bottom;
2356
+ transform-origin: right bottom;
2175
2357
  -webkit-transform: rotate3d(0, 0, 1, -90deg);
2176
- transform: rotate3d(0, 0, 1, -90deg);
2358
+ transform: rotate3d(0, 0, 1, -90deg);
2177
2359
  opacity: 0;
2178
2360
  }
2179
2361
 
2180
- 100% {
2362
+ to {
2181
2363
  -webkit-transform-origin: right bottom;
2182
- transform-origin: right bottom;
2364
+ transform-origin: right bottom;
2183
2365
  -webkit-transform: none;
2184
- transform: none;
2366
+ transform: none;
2185
2367
  opacity: 1;
2186
2368
  }
2187
2369
  }
2188
2370
 
2189
2371
  .rotateInUpRight {
2190
2372
  -webkit-animation-name: rotateInUpRight;
2191
- animation-name: rotateInUpRight;
2373
+ animation-name: rotateInUpRight;
2192
2374
  }
2193
2375
 
2194
2376
  @-webkit-keyframes rotateOut {
2195
- 0% {
2377
+ from {
2196
2378
  -webkit-transform-origin: center;
2197
- transform-origin: center;
2379
+ transform-origin: center;
2198
2380
  opacity: 1;
2199
2381
  }
2200
2382
 
2201
- 100% {
2383
+ to {
2202
2384
  -webkit-transform-origin: center;
2203
- transform-origin: center;
2385
+ transform-origin: center;
2204
2386
  -webkit-transform: rotate3d(0, 0, 1, 200deg);
2205
- transform: rotate3d(0, 0, 1, 200deg);
2387
+ transform: rotate3d(0, 0, 1, 200deg);
2206
2388
  opacity: 0;
2207
2389
  }
2208
2390
  }
2209
2391
 
2210
2392
  @keyframes rotateOut {
2211
- 0% {
2393
+ from {
2212
2394
  -webkit-transform-origin: center;
2213
- transform-origin: center;
2395
+ transform-origin: center;
2214
2396
  opacity: 1;
2215
2397
  }
2216
2398
 
2217
- 100% {
2399
+ to {
2218
2400
  -webkit-transform-origin: center;
2219
- transform-origin: center;
2401
+ transform-origin: center;
2220
2402
  -webkit-transform: rotate3d(0, 0, 1, 200deg);
2221
- transform: rotate3d(0, 0, 1, 200deg);
2403
+ transform: rotate3d(0, 0, 1, 200deg);
2222
2404
  opacity: 0;
2223
2405
  }
2224
2406
  }
2225
2407
 
2226
2408
  .rotateOut {
2227
2409
  -webkit-animation-name: rotateOut;
2228
- animation-name: rotateOut;
2410
+ animation-name: rotateOut;
2229
2411
  }
2230
2412
 
2231
2413
  @-webkit-keyframes rotateOutDownLeft {
2232
- 0% {
2414
+ from {
2233
2415
  -webkit-transform-origin: left bottom;
2234
- transform-origin: left bottom;
2416
+ transform-origin: left bottom;
2235
2417
  opacity: 1;
2236
2418
  }
2237
2419
 
2238
- 100% {
2420
+ to {
2239
2421
  -webkit-transform-origin: left bottom;
2240
- transform-origin: left bottom;
2422
+ transform-origin: left bottom;
2241
2423
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
2242
- transform: rotate3d(0, 0, 1, 45deg);
2424
+ transform: rotate3d(0, 0, 1, 45deg);
2243
2425
  opacity: 0;
2244
2426
  }
2245
2427
  }
2246
2428
 
2247
2429
  @keyframes rotateOutDownLeft {
2248
- 0% {
2430
+ from {
2249
2431
  -webkit-transform-origin: left bottom;
2250
- transform-origin: left bottom;
2432
+ transform-origin: left bottom;
2251
2433
  opacity: 1;
2252
2434
  }
2253
2435
 
2254
- 100% {
2436
+ to {
2255
2437
  -webkit-transform-origin: left bottom;
2256
- transform-origin: left bottom;
2438
+ transform-origin: left bottom;
2257
2439
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
2258
- transform: rotate3d(0, 0, 1, 45deg);
2440
+ transform: rotate3d(0, 0, 1, 45deg);
2259
2441
  opacity: 0;
2260
2442
  }
2261
2443
  }
2262
2444
 
2263
2445
  .rotateOutDownLeft {
2264
2446
  -webkit-animation-name: rotateOutDownLeft;
2265
- animation-name: rotateOutDownLeft;
2447
+ animation-name: rotateOutDownLeft;
2266
2448
  }
2267
2449
 
2268
2450
  @-webkit-keyframes rotateOutDownRight {
2269
- 0% {
2451
+ from {
2270
2452
  -webkit-transform-origin: right bottom;
2271
- transform-origin: right bottom;
2453
+ transform-origin: right bottom;
2272
2454
  opacity: 1;
2273
2455
  }
2274
2456
 
2275
- 100% {
2457
+ to {
2276
2458
  -webkit-transform-origin: right bottom;
2277
- transform-origin: right bottom;
2459
+ transform-origin: right bottom;
2278
2460
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
2279
- transform: rotate3d(0, 0, 1, -45deg);
2461
+ transform: rotate3d(0, 0, 1, -45deg);
2280
2462
  opacity: 0;
2281
2463
  }
2282
2464
  }
2283
2465
 
2284
2466
  @keyframes rotateOutDownRight {
2285
- 0% {
2467
+ from {
2286
2468
  -webkit-transform-origin: right bottom;
2287
- transform-origin: right bottom;
2469
+ transform-origin: right bottom;
2288
2470
  opacity: 1;
2289
2471
  }
2290
2472
 
2291
- 100% {
2473
+ to {
2292
2474
  -webkit-transform-origin: right bottom;
2293
- transform-origin: right bottom;
2475
+ transform-origin: right bottom;
2294
2476
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
2295
- transform: rotate3d(0, 0, 1, -45deg);
2477
+ transform: rotate3d(0, 0, 1, -45deg);
2296
2478
  opacity: 0;
2297
2479
  }
2298
2480
  }
2299
2481
 
2300
2482
  .rotateOutDownRight {
2301
2483
  -webkit-animation-name: rotateOutDownRight;
2302
- animation-name: rotateOutDownRight;
2484
+ animation-name: rotateOutDownRight;
2303
2485
  }
2304
2486
 
2305
2487
  @-webkit-keyframes rotateOutUpLeft {
2306
- 0% {
2488
+ from {
2307
2489
  -webkit-transform-origin: left bottom;
2308
- transform-origin: left bottom;
2490
+ transform-origin: left bottom;
2309
2491
  opacity: 1;
2310
2492
  }
2311
2493
 
2312
- 100% {
2494
+ to {
2313
2495
  -webkit-transform-origin: left bottom;
2314
- transform-origin: left bottom;
2496
+ transform-origin: left bottom;
2315
2497
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
2316
- transform: rotate3d(0, 0, 1, -45deg);
2498
+ transform: rotate3d(0, 0, 1, -45deg);
2317
2499
  opacity: 0;
2318
2500
  }
2319
2501
  }
2320
2502
 
2321
2503
  @keyframes rotateOutUpLeft {
2322
- 0% {
2504
+ from {
2323
2505
  -webkit-transform-origin: left bottom;
2324
- transform-origin: left bottom;
2506
+ transform-origin: left bottom;
2325
2507
  opacity: 1;
2326
2508
  }
2327
2509
 
2328
- 100% {
2510
+ to {
2329
2511
  -webkit-transform-origin: left bottom;
2330
- transform-origin: left bottom;
2512
+ transform-origin: left bottom;
2331
2513
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
2332
- transform: rotate3d(0, 0, 1, -45deg);
2514
+ transform: rotate3d(0, 0, 1, -45deg);
2333
2515
  opacity: 0;
2334
2516
  }
2335
2517
  }
2336
2518
 
2337
2519
  .rotateOutUpLeft {
2338
2520
  -webkit-animation-name: rotateOutUpLeft;
2339
- animation-name: rotateOutUpLeft;
2521
+ animation-name: rotateOutUpLeft;
2340
2522
  }
2341
2523
 
2342
2524
  @-webkit-keyframes rotateOutUpRight {
2343
- 0% {
2525
+ from {
2344
2526
  -webkit-transform-origin: right bottom;
2345
- transform-origin: right bottom;
2527
+ transform-origin: right bottom;
2346
2528
  opacity: 1;
2347
2529
  }
2348
2530
 
2349
- 100% {
2531
+ to {
2350
2532
  -webkit-transform-origin: right bottom;
2351
- transform-origin: right bottom;
2533
+ transform-origin: right bottom;
2352
2534
  -webkit-transform: rotate3d(0, 0, 1, 90deg);
2353
- transform: rotate3d(0, 0, 1, 90deg);
2535
+ transform: rotate3d(0, 0, 1, 90deg);
2354
2536
  opacity: 0;
2355
2537
  }
2356
2538
  }
2357
2539
 
2358
2540
  @keyframes rotateOutUpRight {
2359
- 0% {
2541
+ from {
2360
2542
  -webkit-transform-origin: right bottom;
2361
- transform-origin: right bottom;
2543
+ transform-origin: right bottom;
2362
2544
  opacity: 1;
2363
2545
  }
2364
2546
 
2365
- 100% {
2547
+ to {
2366
2548
  -webkit-transform-origin: right bottom;
2367
- transform-origin: right bottom;
2549
+ transform-origin: right bottom;
2368
2550
  -webkit-transform: rotate3d(0, 0, 1, 90deg);
2369
- transform: rotate3d(0, 0, 1, 90deg);
2551
+ transform: rotate3d(0, 0, 1, 90deg);
2370
2552
  opacity: 0;
2371
2553
  }
2372
2554
  }
2373
2555
 
2374
2556
  .rotateOutUpRight {
2375
2557
  -webkit-animation-name: rotateOutUpRight;
2376
- animation-name: rotateOutUpRight;
2558
+ animation-name: rotateOutUpRight;
2377
2559
  }
2378
2560
 
2379
2561
  @-webkit-keyframes hinge {
2380
2562
  0% {
2381
2563
  -webkit-transform-origin: top left;
2382
- transform-origin: top left;
2564
+ transform-origin: top left;
2383
2565
  -webkit-animation-timing-function: ease-in-out;
2384
- animation-timing-function: ease-in-out;
2566
+ animation-timing-function: ease-in-out;
2385
2567
  }
2386
2568
 
2387
2569
  20%, 60% {
2388
2570
  -webkit-transform: rotate3d(0, 0, 1, 80deg);
2389
- transform: rotate3d(0, 0, 1, 80deg);
2571
+ transform: rotate3d(0, 0, 1, 80deg);
2390
2572
  -webkit-transform-origin: top left;
2391
- transform-origin: top left;
2573
+ transform-origin: top left;
2392
2574
  -webkit-animation-timing-function: ease-in-out;
2393
- animation-timing-function: ease-in-out;
2575
+ animation-timing-function: ease-in-out;
2394
2576
  }
2395
2577
 
2396
2578
  40%, 80% {
2397
2579
  -webkit-transform: rotate3d(0, 0, 1, 60deg);
2398
- transform: rotate3d(0, 0, 1, 60deg);
2580
+ transform: rotate3d(0, 0, 1, 60deg);
2399
2581
  -webkit-transform-origin: top left;
2400
- transform-origin: top left;
2582
+ transform-origin: top left;
2401
2583
  -webkit-animation-timing-function: ease-in-out;
2402
- animation-timing-function: ease-in-out;
2584
+ animation-timing-function: ease-in-out;
2403
2585
  opacity: 1;
2404
2586
  }
2405
2587
 
2406
- 100% {
2588
+ to {
2407
2589
  -webkit-transform: translate3d(0, 700px, 0);
2408
- transform: translate3d(0, 700px, 0);
2590
+ transform: translate3d(0, 700px, 0);
2409
2591
  opacity: 0;
2410
2592
  }
2411
2593
  }
@@ -2413,113 +2595,113 @@ Copyright (c) 2014 Daniel Eden
2413
2595
  @keyframes hinge {
2414
2596
  0% {
2415
2597
  -webkit-transform-origin: top left;
2416
- transform-origin: top left;
2598
+ transform-origin: top left;
2417
2599
  -webkit-animation-timing-function: ease-in-out;
2418
- animation-timing-function: ease-in-out;
2600
+ animation-timing-function: ease-in-out;
2419
2601
  }
2420
2602
 
2421
2603
  20%, 60% {
2422
2604
  -webkit-transform: rotate3d(0, 0, 1, 80deg);
2423
- transform: rotate3d(0, 0, 1, 80deg);
2605
+ transform: rotate3d(0, 0, 1, 80deg);
2424
2606
  -webkit-transform-origin: top left;
2425
- transform-origin: top left;
2607
+ transform-origin: top left;
2426
2608
  -webkit-animation-timing-function: ease-in-out;
2427
- animation-timing-function: ease-in-out;
2609
+ animation-timing-function: ease-in-out;
2428
2610
  }
2429
2611
 
2430
2612
  40%, 80% {
2431
2613
  -webkit-transform: rotate3d(0, 0, 1, 60deg);
2432
- transform: rotate3d(0, 0, 1, 60deg);
2614
+ transform: rotate3d(0, 0, 1, 60deg);
2433
2615
  -webkit-transform-origin: top left;
2434
- transform-origin: top left;
2616
+ transform-origin: top left;
2435
2617
  -webkit-animation-timing-function: ease-in-out;
2436
- animation-timing-function: ease-in-out;
2618
+ animation-timing-function: ease-in-out;
2437
2619
  opacity: 1;
2438
2620
  }
2439
2621
 
2440
- 100% {
2622
+ to {
2441
2623
  -webkit-transform: translate3d(0, 700px, 0);
2442
- transform: translate3d(0, 700px, 0);
2624
+ transform: translate3d(0, 700px, 0);
2443
2625
  opacity: 0;
2444
2626
  }
2445
2627
  }
2446
2628
 
2447
2629
  .hinge {
2448
2630
  -webkit-animation-name: hinge;
2449
- animation-name: hinge;
2631
+ animation-name: hinge;
2450
2632
  }
2451
2633
 
2452
2634
  /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
2453
2635
 
2454
2636
  @-webkit-keyframes rollIn {
2455
- 0% {
2637
+ from {
2456
2638
  opacity: 0;
2457
2639
  -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2458
- transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2640
+ transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2459
2641
  }
2460
2642
 
2461
- 100% {
2643
+ to {
2462
2644
  opacity: 1;
2463
2645
  -webkit-transform: none;
2464
- transform: none;
2646
+ transform: none;
2465
2647
  }
2466
2648
  }
2467
2649
 
2468
2650
  @keyframes rollIn {
2469
- 0% {
2651
+ from {
2470
2652
  opacity: 0;
2471
2653
  -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2472
- transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2654
+ transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2473
2655
  }
2474
2656
 
2475
- 100% {
2657
+ to {
2476
2658
  opacity: 1;
2477
2659
  -webkit-transform: none;
2478
- transform: none;
2660
+ transform: none;
2479
2661
  }
2480
2662
  }
2481
2663
 
2482
2664
  .rollIn {
2483
2665
  -webkit-animation-name: rollIn;
2484
- animation-name: rollIn;
2666
+ animation-name: rollIn;
2485
2667
  }
2486
2668
 
2487
2669
  /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
2488
2670
 
2489
2671
  @-webkit-keyframes rollOut {
2490
- 0% {
2672
+ from {
2491
2673
  opacity: 1;
2492
2674
  }
2493
2675
 
2494
- 100% {
2676
+ to {
2495
2677
  opacity: 0;
2496
2678
  -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2497
- transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2679
+ transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2498
2680
  }
2499
2681
  }
2500
2682
 
2501
2683
  @keyframes rollOut {
2502
- 0% {
2684
+ from {
2503
2685
  opacity: 1;
2504
2686
  }
2505
2687
 
2506
- 100% {
2688
+ to {
2507
2689
  opacity: 0;
2508
2690
  -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2509
- transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2691
+ transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2510
2692
  }
2511
2693
  }
2512
2694
 
2513
2695
  .rollOut {
2514
2696
  -webkit-animation-name: rollOut;
2515
- animation-name: rollOut;
2697
+ animation-name: rollOut;
2516
2698
  }
2517
2699
 
2518
2700
  @-webkit-keyframes zoomIn {
2519
- 0% {
2701
+ from {
2520
2702
  opacity: 0;
2521
2703
  -webkit-transform: scale3d(.3, .3, .3);
2522
- transform: scale3d(.3, .3, .3);
2704
+ transform: scale3d(.3, .3, .3);
2523
2705
  }
2524
2706
 
2525
2707
  50% {
@@ -2528,10 +2710,10 @@ Copyright (c) 2014 Daniel Eden
2528
2710
  }
2529
2711
 
2530
2712
  @keyframes zoomIn {
2531
- 0% {
2713
+ from {
2532
2714
  opacity: 0;
2533
2715
  -webkit-transform: scale3d(.3, .3, .3);
2534
- transform: scale3d(.3, .3, .3);
2716
+ transform: scale3d(.3, .3, .3);
2535
2717
  }
2536
2718
 
2537
2719
  50% {
@@ -2541,227 +2723,227 @@ Copyright (c) 2014 Daniel Eden
2541
2723
 
2542
2724
  .zoomIn {
2543
2725
  -webkit-animation-name: zoomIn;
2544
- animation-name: zoomIn;
2726
+ animation-name: zoomIn;
2545
2727
  }
2546
2728
 
2547
2729
  @-webkit-keyframes zoomInDown {
2548
- 0% {
2730
+ from {
2549
2731
  opacity: 0;
2550
2732
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2551
- transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2733
+ transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2552
2734
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2553
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2735
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2554
2736
  }
2555
2737
 
2556
2738
  60% {
2557
2739
  opacity: 1;
2558
2740
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2559
- transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2741
+ transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2560
2742
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2561
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2743
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2562
2744
  }
2563
2745
  }
2564
2746
 
2565
2747
  @keyframes zoomInDown {
2566
- 0% {
2748
+ from {
2567
2749
  opacity: 0;
2568
2750
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2569
- transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2751
+ transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2570
2752
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2571
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2753
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2572
2754
  }
2573
2755
 
2574
2756
  60% {
2575
2757
  opacity: 1;
2576
2758
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2577
- transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2759
+ transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2578
2760
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2579
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2761
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2580
2762
  }
2581
2763
  }
2582
2764
 
2583
2765
  .zoomInDown {
2584
2766
  -webkit-animation-name: zoomInDown;
2585
- animation-name: zoomInDown;
2767
+ animation-name: zoomInDown;
2586
2768
  }
2587
2769
 
2588
2770
  @-webkit-keyframes zoomInLeft {
2589
- 0% {
2771
+ from {
2590
2772
  opacity: 0;
2591
2773
  -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2592
- transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2774
+ transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2593
2775
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2594
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2776
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2595
2777
  }
2596
2778
 
2597
2779
  60% {
2598
2780
  opacity: 1;
2599
2781
  -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2600
- transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2782
+ transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2601
2783
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2602
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2784
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2603
2785
  }
2604
2786
  }
2605
2787
 
2606
2788
  @keyframes zoomInLeft {
2607
- 0% {
2789
+ from {
2608
2790
  opacity: 0;
2609
2791
  -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2610
- transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2792
+ transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2611
2793
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2612
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2794
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2613
2795
  }
2614
2796
 
2615
2797
  60% {
2616
2798
  opacity: 1;
2617
2799
  -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2618
- transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2800
+ transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2619
2801
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2620
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2802
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2621
2803
  }
2622
2804
  }
2623
2805
 
2624
2806
  .zoomInLeft {
2625
2807
  -webkit-animation-name: zoomInLeft;
2626
- animation-name: zoomInLeft;
2808
+ animation-name: zoomInLeft;
2627
2809
  }
2628
2810
 
2629
2811
  @-webkit-keyframes zoomInRight {
2630
- 0% {
2812
+ from {
2631
2813
  opacity: 0;
2632
2814
  -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2633
- transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2815
+ transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2634
2816
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2635
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2817
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2636
2818
  }
2637
2819
 
2638
2820
  60% {
2639
2821
  opacity: 1;
2640
2822
  -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2641
- transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2823
+ transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2642
2824
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2643
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2825
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2644
2826
  }
2645
2827
  }
2646
2828
 
2647
2829
  @keyframes zoomInRight {
2648
- 0% {
2830
+ from {
2649
2831
  opacity: 0;
2650
2832
  -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2651
- transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2833
+ transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2652
2834
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2653
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2835
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2654
2836
  }
2655
2837
 
2656
2838
  60% {
2657
2839
  opacity: 1;
2658
2840
  -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2659
- transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2841
+ transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2660
2842
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2661
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2843
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2662
2844
  }
2663
2845
  }
2664
2846
 
2665
2847
  .zoomInRight {
2666
2848
  -webkit-animation-name: zoomInRight;
2667
- animation-name: zoomInRight;
2849
+ animation-name: zoomInRight;
2668
2850
  }
2669
2851
 
2670
2852
  @-webkit-keyframes zoomInUp {
2671
- 0% {
2853
+ from {
2672
2854
  opacity: 0;
2673
2855
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2674
- transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2856
+ transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2675
2857
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2676
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2858
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2677
2859
  }
2678
2860
 
2679
2861
  60% {
2680
2862
  opacity: 1;
2681
2863
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2682
- transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2864
+ transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2683
2865
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2684
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2866
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2685
2867
  }
2686
2868
  }
2687
2869
 
2688
2870
  @keyframes zoomInUp {
2689
- 0% {
2871
+ from {
2690
2872
  opacity: 0;
2691
2873
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2692
- transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2874
+ transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2693
2875
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2694
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2876
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2695
2877
  }
2696
2878
 
2697
2879
  60% {
2698
2880
  opacity: 1;
2699
2881
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2700
- transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2882
+ transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2701
2883
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2702
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2884
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2703
2885
  }
2704
2886
  }
2705
2887
 
2706
2888
  .zoomInUp {
2707
2889
  -webkit-animation-name: zoomInUp;
2708
- animation-name: zoomInUp;
2890
+ animation-name: zoomInUp;
2709
2891
  }
2710
2892
 
2711
2893
  @-webkit-keyframes zoomOut {
2712
- 0% {
2894
+ from {
2713
2895
  opacity: 1;
2714
2896
  }
2715
2897
 
2716
2898
  50% {
2717
2899
  opacity: 0;
2718
2900
  -webkit-transform: scale3d(.3, .3, .3);
2719
- transform: scale3d(.3, .3, .3);
2901
+ transform: scale3d(.3, .3, .3);
2720
2902
  }
2721
2903
 
2722
- 100% {
2904
+ to {
2723
2905
  opacity: 0;
2724
2906
  }
2725
2907
  }
2726
2908
 
2727
2909
  @keyframes zoomOut {
2728
- 0% {
2910
+ from {
2729
2911
  opacity: 1;
2730
2912
  }
2731
2913
 
2732
2914
  50% {
2733
2915
  opacity: 0;
2734
2916
  -webkit-transform: scale3d(.3, .3, .3);
2735
- transform: scale3d(.3, .3, .3);
2917
+ transform: scale3d(.3, .3, .3);
2736
2918
  }
2737
2919
 
2738
- 100% {
2920
+ to {
2739
2921
  opacity: 0;
2740
2922
  }
2741
2923
  }
2742
2924
 
2743
2925
  .zoomOut {
2744
2926
  -webkit-animation-name: zoomOut;
2745
- animation-name: zoomOut;
2927
+ animation-name: zoomOut;
2746
2928
  }
2747
2929
 
2748
2930
  @-webkit-keyframes zoomOutDown {
2749
2931
  40% {
2750
2932
  opacity: 1;
2751
2933
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2752
- transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2934
+ transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2753
2935
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2754
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2936
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2755
2937
  }
2756
2938
 
2757
- 100% {
2939
+ to {
2758
2940
  opacity: 0;
2759
2941
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2760
- transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2942
+ transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2761
2943
  -webkit-transform-origin: center bottom;
2762
- transform-origin: center bottom;
2944
+ transform-origin: center bottom;
2763
2945
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2764
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2946
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2765
2947
  }
2766
2948
  }
2767
2949
 
@@ -2769,40 +2951,40 @@ Copyright (c) 2014 Daniel Eden
2769
2951
  40% {
2770
2952
  opacity: 1;
2771
2953
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2772
- transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2954
+ transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2773
2955
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2774
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2956
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2775
2957
  }
2776
2958
 
2777
- 100% {
2959
+ to {
2778
2960
  opacity: 0;
2779
2961
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2780
- transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2962
+ transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2781
2963
  -webkit-transform-origin: center bottom;
2782
- transform-origin: center bottom;
2964
+ transform-origin: center bottom;
2783
2965
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2784
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2966
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2785
2967
  }
2786
2968
  }
2787
2969
 
2788
2970
  .zoomOutDown {
2789
2971
  -webkit-animation-name: zoomOutDown;
2790
- animation-name: zoomOutDown;
2972
+ animation-name: zoomOutDown;
2791
2973
  }
2792
2974
 
2793
2975
  @-webkit-keyframes zoomOutLeft {
2794
2976
  40% {
2795
2977
  opacity: 1;
2796
2978
  -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2797
- transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2979
+ transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2798
2980
  }
2799
2981
 
2800
- 100% {
2982
+ to {
2801
2983
  opacity: 0;
2802
2984
  -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
2803
- transform: scale(.1) translate3d(-2000px, 0, 0);
2985
+ transform: scale(.1) translate3d(-2000px, 0, 0);
2804
2986
  -webkit-transform-origin: left center;
2805
- transform-origin: left center;
2987
+ transform-origin: left center;
2806
2988
  }
2807
2989
  }
2808
2990
 
@@ -2810,36 +2992,36 @@ Copyright (c) 2014 Daniel Eden
2810
2992
  40% {
2811
2993
  opacity: 1;
2812
2994
  -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2813
- transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2995
+ transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2814
2996
  }
2815
2997
 
2816
- 100% {
2998
+ to {
2817
2999
  opacity: 0;
2818
3000
  -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
2819
- transform: scale(.1) translate3d(-2000px, 0, 0);
3001
+ transform: scale(.1) translate3d(-2000px, 0, 0);
2820
3002
  -webkit-transform-origin: left center;
2821
- transform-origin: left center;
3003
+ transform-origin: left center;
2822
3004
  }
2823
3005
  }
2824
3006
 
2825
3007
  .zoomOutLeft {
2826
3008
  -webkit-animation-name: zoomOutLeft;
2827
- animation-name: zoomOutLeft;
3009
+ animation-name: zoomOutLeft;
2828
3010
  }
2829
3011
 
2830
3012
  @-webkit-keyframes zoomOutRight {
2831
3013
  40% {
2832
3014
  opacity: 1;
2833
3015
  -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
2834
- transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
3016
+ transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
2835
3017
  }
2836
3018
 
2837
- 100% {
3019
+ to {
2838
3020
  opacity: 0;
2839
3021
  -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
2840
- transform: scale(.1) translate3d(2000px, 0, 0);
3022
+ transform: scale(.1) translate3d(2000px, 0, 0);
2841
3023
  -webkit-transform-origin: right center;
2842
- transform-origin: right center;
3024
+ transform-origin: right center;
2843
3025
  }
2844
3026
  }
2845
3027
 
@@ -2847,40 +3029,40 @@ Copyright (c) 2014 Daniel Eden
2847
3029
  40% {
2848
3030
  opacity: 1;
2849
3031
  -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
2850
- transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
3032
+ transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
2851
3033
  }
2852
3034
 
2853
- 100% {
3035
+ to {
2854
3036
  opacity: 0;
2855
3037
  -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
2856
- transform: scale(.1) translate3d(2000px, 0, 0);
3038
+ transform: scale(.1) translate3d(2000px, 0, 0);
2857
3039
  -webkit-transform-origin: right center;
2858
- transform-origin: right center;
3040
+ transform-origin: right center;
2859
3041
  }
2860
3042
  }
2861
3043
 
2862
3044
  .zoomOutRight {
2863
3045
  -webkit-animation-name: zoomOutRight;
2864
- animation-name: zoomOutRight;
3046
+ animation-name: zoomOutRight;
2865
3047
  }
2866
3048
 
2867
3049
  @-webkit-keyframes zoomOutUp {
2868
3050
  40% {
2869
3051
  opacity: 1;
2870
3052
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2871
- transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
3053
+ transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2872
3054
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2873
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
3055
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2874
3056
  }
2875
3057
 
2876
- 100% {
3058
+ to {
2877
3059
  opacity: 0;
2878
3060
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
2879
- transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
3061
+ transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
2880
3062
  -webkit-transform-origin: center bottom;
2881
- transform-origin: center bottom;
3063
+ transform-origin: center bottom;
2882
3064
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2883
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
3065
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2884
3066
  }
2885
3067
  }
2886
3068
 
@@ -2888,271 +3070,271 @@ Copyright (c) 2014 Daniel Eden
2888
3070
  40% {
2889
3071
  opacity: 1;
2890
3072
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2891
- transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
3073
+ transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2892
3074
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2893
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
3075
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2894
3076
  }
2895
3077
 
2896
- 100% {
3078
+ to {
2897
3079
  opacity: 0;
2898
3080
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
2899
- transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
3081
+ transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
2900
3082
  -webkit-transform-origin: center bottom;
2901
- transform-origin: center bottom;
3083
+ transform-origin: center bottom;
2902
3084
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2903
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
3085
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2904
3086
  }
2905
3087
  }
2906
3088
 
2907
3089
  .zoomOutUp {
2908
3090
  -webkit-animation-name: zoomOutUp;
2909
- animation-name: zoomOutUp;
3091
+ animation-name: zoomOutUp;
2910
3092
  }
2911
3093
 
2912
3094
  @-webkit-keyframes slideInDown {
2913
- 0% {
2914
- -webkit-transform: translateY(-100%);
2915
- transform: translateY(-100%);
3095
+ from {
3096
+ -webkit-transform: translate3d(0, -100%, 0);
3097
+ transform: translate3d(0, -100%, 0);
2916
3098
  visibility: visible;
2917
3099
  }
2918
3100
 
2919
- 100% {
2920
- -webkit-transform: translateY(0);
2921
- transform: translateY(0);
3101
+ to {
3102
+ -webkit-transform: translate3d(0, 0, 0);
3103
+ transform: translate3d(0, 0, 0);
2922
3104
  }
2923
3105
  }
2924
3106
 
2925
3107
  @keyframes slideInDown {
2926
- 0% {
2927
- -webkit-transform: translateY(-100%);
2928
- transform: translateY(-100%);
3108
+ from {
3109
+ -webkit-transform: translate3d(0, -100%, 0);
3110
+ transform: translate3d(0, -100%, 0);
2929
3111
  visibility: visible;
2930
3112
  }
2931
3113
 
2932
- 100% {
2933
- -webkit-transform: translateY(0);
2934
- transform: translateY(0);
3114
+ to {
3115
+ -webkit-transform: translate3d(0, 0, 0);
3116
+ transform: translate3d(0, 0, 0);
2935
3117
  }
2936
3118
  }
2937
3119
 
2938
3120
  .slideInDown {
2939
3121
  -webkit-animation-name: slideInDown;
2940
- animation-name: slideInDown;
3122
+ animation-name: slideInDown;
2941
3123
  }
2942
3124
 
2943
3125
  @-webkit-keyframes slideInLeft {
2944
- 0% {
2945
- -webkit-transform: translateX(-100%);
2946
- transform: translateX(-100%);
3126
+ from {
3127
+ -webkit-transform: translate3d(-100%, 0, 0);
3128
+ transform: translate3d(-100%, 0, 0);
2947
3129
  visibility: visible;
2948
3130
  }
2949
3131
 
2950
- 100% {
2951
- -webkit-transform: translateX(0);
2952
- transform: translateX(0);
3132
+ to {
3133
+ -webkit-transform: translate3d(0, 0, 0);
3134
+ transform: translate3d(0, 0, 0);
2953
3135
  }
2954
3136
  }
2955
3137
 
2956
3138
  @keyframes slideInLeft {
2957
- 0% {
2958
- -webkit-transform: translateX(-100%);
2959
- transform: translateX(-100%);
3139
+ from {
3140
+ -webkit-transform: translate3d(-100%, 0, 0);
3141
+ transform: translate3d(-100%, 0, 0);
2960
3142
  visibility: visible;
2961
3143
  }
2962
3144
 
2963
- 100% {
2964
- -webkit-transform: translateX(0);
2965
- transform: translateX(0);
3145
+ to {
3146
+ -webkit-transform: translate3d(0, 0, 0);
3147
+ transform: translate3d(0, 0, 0);
2966
3148
  }
2967
3149
  }
2968
3150
 
2969
3151
  .slideInLeft {
2970
3152
  -webkit-animation-name: slideInLeft;
2971
- animation-name: slideInLeft;
3153
+ animation-name: slideInLeft;
2972
3154
  }
2973
3155
 
2974
3156
  @-webkit-keyframes slideInRight {
2975
- 0% {
2976
- -webkit-transform: translateX(100%);
2977
- transform: translateX(100%);
3157
+ from {
3158
+ -webkit-transform: translate3d(100%, 0, 0);
3159
+ transform: translate3d(100%, 0, 0);
2978
3160
  visibility: visible;
2979
3161
  }
2980
3162
 
2981
- 100% {
2982
- -webkit-transform: translateX(0);
2983
- transform: translateX(0);
3163
+ to {
3164
+ -webkit-transform: translate3d(0, 0, 0);
3165
+ transform: translate3d(0, 0, 0);
2984
3166
  }
2985
3167
  }
2986
3168
 
2987
3169
  @keyframes slideInRight {
2988
- 0% {
2989
- -webkit-transform: translateX(100%);
2990
- transform: translateX(100%);
3170
+ from {
3171
+ -webkit-transform: translate3d(100%, 0, 0);
3172
+ transform: translate3d(100%, 0, 0);
2991
3173
  visibility: visible;
2992
3174
  }
2993
3175
 
2994
- 100% {
2995
- -webkit-transform: translateX(0);
2996
- transform: translateX(0);
3176
+ to {
3177
+ -webkit-transform: translate3d(0, 0, 0);
3178
+ transform: translate3d(0, 0, 0);
2997
3179
  }
2998
3180
  }
2999
3181
 
3000
3182
  .slideInRight {
3001
3183
  -webkit-animation-name: slideInRight;
3002
- animation-name: slideInRight;
3184
+ animation-name: slideInRight;
3003
3185
  }
3004
3186
 
3005
3187
  @-webkit-keyframes slideInUp {
3006
- 0% {
3007
- -webkit-transform: translateY(100%);
3008
- transform: translateY(100%);
3188
+ from {
3189
+ -webkit-transform: translate3d(0, 100%, 0);
3190
+ transform: translate3d(0, 100%, 0);
3009
3191
  visibility: visible;
3010
3192
  }
3011
3193
 
3012
- 100% {
3013
- -webkit-transform: translateY(0);
3014
- transform: translateY(0);
3194
+ to {
3195
+ -webkit-transform: translate3d(0, 0, 0);
3196
+ transform: translate3d(0, 0, 0);
3015
3197
  }
3016
3198
  }
3017
3199
 
3018
3200
  @keyframes slideInUp {
3019
- 0% {
3020
- -webkit-transform: translateY(100%);
3021
- transform: translateY(100%);
3201
+ from {
3202
+ -webkit-transform: translate3d(0, 100%, 0);
3203
+ transform: translate3d(0, 100%, 0);
3022
3204
  visibility: visible;
3023
3205
  }
3024
3206
 
3025
- 100% {
3026
- -webkit-transform: translateY(0);
3027
- transform: translateY(0);
3207
+ to {
3208
+ -webkit-transform: translate3d(0, 0, 0);
3209
+ transform: translate3d(0, 0, 0);
3028
3210
  }
3029
3211
  }
3030
3212
 
3031
3213
  .slideInUp {
3032
3214
  -webkit-animation-name: slideInUp;
3033
- animation-name: slideInUp;
3215
+ animation-name: slideInUp;
3034
3216
  }
3035
3217
 
3036
3218
  @-webkit-keyframes slideOutDown {
3037
- 0% {
3038
- -webkit-transform: translateY(0);
3039
- transform: translateY(0);
3219
+ from {
3220
+ -webkit-transform: translate3d(0, 0, 0);
3221
+ transform: translate3d(0, 0, 0);
3040
3222
  }
3041
3223
 
3042
- 100% {
3224
+ to {
3043
3225
  visibility: hidden;
3044
- -webkit-transform: translateY(100%);
3045
- transform: translateY(100%);
3226
+ -webkit-transform: translate3d(0, 100%, 0);
3227
+ transform: translate3d(0, 100%, 0);
3046
3228
  }
3047
3229
  }
3048
3230
 
3049
3231
  @keyframes slideOutDown {
3050
- 0% {
3051
- -webkit-transform: translateY(0);
3052
- transform: translateY(0);
3232
+ from {
3233
+ -webkit-transform: translate3d(0, 0, 0);
3234
+ transform: translate3d(0, 0, 0);
3053
3235
  }
3054
3236
 
3055
- 100% {
3237
+ to {
3056
3238
  visibility: hidden;
3057
- -webkit-transform: translateY(100%);
3058
- transform: translateY(100%);
3239
+ -webkit-transform: translate3d(0, 100%, 0);
3240
+ transform: translate3d(0, 100%, 0);
3059
3241
  }
3060
3242
  }
3061
3243
 
3062
3244
  .slideOutDown {
3063
3245
  -webkit-animation-name: slideOutDown;
3064
- animation-name: slideOutDown;
3246
+ animation-name: slideOutDown;
3065
3247
  }
3066
3248
 
3067
3249
  @-webkit-keyframes slideOutLeft {
3068
- 0% {
3069
- -webkit-transform: translateX(0);
3070
- transform: translateX(0);
3250
+ from {
3251
+ -webkit-transform: translate3d(0, 0, 0);
3252
+ transform: translate3d(0, 0, 0);
3071
3253
  }
3072
3254
 
3073
- 100% {
3255
+ to {
3074
3256
  visibility: hidden;
3075
- -webkit-transform: translateX(-100%);
3076
- transform: translateX(-100%);
3257
+ -webkit-transform: translate3d(-100%, 0, 0);
3258
+ transform: translate3d(-100%, 0, 0);
3077
3259
  }
3078
3260
  }
3079
3261
 
3080
3262
  @keyframes slideOutLeft {
3081
- 0% {
3082
- -webkit-transform: translateX(0);
3083
- transform: translateX(0);
3263
+ from {
3264
+ -webkit-transform: translate3d(0, 0, 0);
3265
+ transform: translate3d(0, 0, 0);
3084
3266
  }
3085
3267
 
3086
- 100% {
3268
+ to {
3087
3269
  visibility: hidden;
3088
- -webkit-transform: translateX(-100%);
3089
- transform: translateX(-100%);
3270
+ -webkit-transform: translate3d(-100%, 0, 0);
3271
+ transform: translate3d(-100%, 0, 0);
3090
3272
  }
3091
3273
  }
3092
3274
 
3093
3275
  .slideOutLeft {
3094
3276
  -webkit-animation-name: slideOutLeft;
3095
- animation-name: slideOutLeft;
3277
+ animation-name: slideOutLeft;
3096
3278
  }
3097
3279
 
3098
3280
  @-webkit-keyframes slideOutRight {
3099
- 0% {
3100
- -webkit-transform: translateX(0);
3101
- transform: translateX(0);
3281
+ from {
3282
+ -webkit-transform: translate3d(0, 0, 0);
3283
+ transform: translate3d(0, 0, 0);
3102
3284
  }
3103
3285
 
3104
- 100% {
3286
+ to {
3105
3287
  visibility: hidden;
3106
- -webkit-transform: translateX(100%);
3107
- transform: translateX(100%);
3288
+ -webkit-transform: translate3d(100%, 0, 0);
3289
+ transform: translate3d(100%, 0, 0);
3108
3290
  }
3109
3291
  }
3110
3292
 
3111
3293
  @keyframes slideOutRight {
3112
- 0% {
3113
- -webkit-transform: translateX(0);
3114
- transform: translateX(0);
3294
+ from {
3295
+ -webkit-transform: translate3d(0, 0, 0);
3296
+ transform: translate3d(0, 0, 0);
3115
3297
  }
3116
3298
 
3117
- 100% {
3299
+ to {
3118
3300
  visibility: hidden;
3119
- -webkit-transform: translateX(100%);
3120
- transform: translateX(100%);
3301
+ -webkit-transform: translate3d(100%, 0, 0);
3302
+ transform: translate3d(100%, 0, 0);
3121
3303
  }
3122
3304
  }
3123
3305
 
3124
3306
  .slideOutRight {
3125
3307
  -webkit-animation-name: slideOutRight;
3126
- animation-name: slideOutRight;
3308
+ animation-name: slideOutRight;
3127
3309
  }
3128
3310
 
3129
3311
  @-webkit-keyframes slideOutUp {
3130
- 0% {
3131
- -webkit-transform: translateY(0);
3132
- transform: translateY(0);
3312
+ from {
3313
+ -webkit-transform: translate3d(0, 0, 0);
3314
+ transform: translate3d(0, 0, 0);
3133
3315
  }
3134
3316
 
3135
- 100% {
3317
+ to {
3136
3318
  visibility: hidden;
3137
- -webkit-transform: translateY(-100%);
3138
- transform: translateY(-100%);
3319
+ -webkit-transform: translate3d(0, -100%, 0);
3320
+ transform: translate3d(0, -100%, 0);
3139
3321
  }
3140
3322
  }
3141
3323
 
3142
3324
  @keyframes slideOutUp {
3143
- 0% {
3144
- -webkit-transform: translateY(0);
3145
- transform: translateY(0);
3325
+ from {
3326
+ -webkit-transform: translate3d(0, 0, 0);
3327
+ transform: translate3d(0, 0, 0);
3146
3328
  }
3147
3329
 
3148
- 100% {
3330
+ to {
3149
3331
  visibility: hidden;
3150
- -webkit-transform: translateY(-100%);
3151
- transform: translateY(-100%);
3332
+ -webkit-transform: translate3d(0, -100%, 0);
3333
+ transform: translate3d(0, -100%, 0);
3152
3334
  }
3153
3335
  }
3154
3336
 
3155
3337
  .slideOutUp {
3156
3338
  -webkit-animation-name: slideOutUp;
3157
- animation-name: slideOutUp;
3158
- }
3339
+ animation-name: slideOutUp;
3340
+ }