animate.css-rails 3.1.1 → 3.2.0

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