turbolinks-animate 1.3.0 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,27 +0,0 @@
1
- /**!
2
- * @fileOverview turbolinks-animate.js - Animations extending Turbolinks
3
- * @version 2.0.0
4
- * @license
5
- * MIT License
6
- *
7
- * Copyright (c) 2017 Jonas Hübotter
8
- *
9
- * Permission is hereby granted, free of charge, to any person obtaining a copy
10
- * of this software and associated documentation files (the "Software"), to deal
11
- * in the Software without restriction, including without limitation the rights
12
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
13
- * copies of the Software, and to permit persons to whom the Software is
14
- * furnished to do so, subject to the following conditions:
15
- *
16
- * The above copyright notice and this permission notice shall be included in all
17
- * copies or substantial portions of the Software.
18
- *
19
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25
- * SOFTWARE.
26
- */
27
- var TurbolinksAnimate=TurbolinksAnimate||new function(){this.options={};this.inline=false;this.element=null;this.elements=null;this.disappearing=false;this.initialized=false;this.animations=[{name:"fadeIn",disappear:"fadeOut",reverse:null},{name:"fadeOut",disappear:true,reverse:null},{name:"fadeInUp",disappear:"fadeOutUp",reverse:"fadeInDown"},{name:"fadeOutUp",disappear:true,reverse:"fadeOutDown"},{name:"fadeInDown",disappear:"fadeOutDown",reverse:"fadeInUp"},{name:"fadeOutDown",disappear:true,reverse:"fadeOutUp"},{name:"fadeInLeft",disappear:"fadeOutLeft",reverse:"fadeInRight"},{name:"fadeOutLeft",disappear:true,reverse:"fadeOutRight"},{name:"fadeInRight",disappear:"fadeOutRight",reverse:"fadeInLeft"},{name:"fadeOutRight",disappear:true,reverse:"fadeOutLeft"},{name:"fadeInUpBig",disappear:"fadeOutUpBig",reverse:"fadeInDownBig"},{name:"fadeOutUpBig",disappear:true,reverse:"fadeOutDownBig"},{name:"fadeInDownBig",disappear:"fadeOutDownBig",reverse:"fadeInUpBig"},{name:"fadeOutDownBig",disappear:true,reverse:"fadeOutUpBig"},{name:"fadeInLeftBig",disappear:"fadeOutLeftBig",reverse:"fadeInRightBig"},{name:"fadeOutLeftBig",disappear:true,reverse:"fadeOutRightBig"},{name:"fadeInRightBig",disappear:"fadeOutRightBig",reverse:"fadeInLeftBig"},{name:"fadeOutRightBig",disappear:true,reverse:"fadeOutLeftBig"},{name:"bounceIn",disappear:"bounceOut",reverse:null},{name:"bounceOut",disappear:true,reverse:null},{name:"bounceInUp",disappear:"bounceOutUp",reverse:"bounceInDown"},{name:"bounceOutUp",disappear:true,reverse:"bounceOutDown"},{name:"bounceInDown",disappear:"bounceOutDown",reverse:"bounceInUp"},{name:"bounceOutDown",disappear:true,reverse:"bounceOutUp"},{name:"bounceInLeft",disappear:"bounceOutLeft",reverse:"bounceInRight"},{name:"bounceOutLeft",disappear:true,reverse:"bounceOutRight"},{name:"bounceInRight",disappear:"bounceOutRight",reverse:"bounceInLeft"},{name:"bounceOutRight",disappear:true,reverse:"bounceOutLeft"},{name:"flipInX",disappear:"flipOutX",reverse:"flipInY"},{name:"flipOutX",disappear:true,reverse:"flipOutY"},{name:"flipInY",disappear:"flipOutY",reverse:"flipInX"},{name:"flipOutY",disappear:true,reverse:"flipOutX"},{name:"lightSpeedIn",disappear:"lightSpeedOut",reverse:null},{name:"lightSpeedOut",disappear:true,reverse:null},{name:"rotateIn",disappear:"rotateOut",reverse:null},{name:"rotateOut",disappear:true,reverse:null},{name:"rotateInDownLeft",disappear:"rotateOutDownLeft",reverse:"rotateInUpRight"},{name:"rotateOutDownLeft",disappear:true,reverse:"rotateOutUpRight"},{name:"rotateInDownRight",disappear:"rotateOutDownRight",reverse:"rotateInUpLeft"},{name:"rotateOutDownRight",disappear:true,reverse:"rotateOutUpLeft"},{name:"rotateInUpLeft",disappear:"rotateOutUpLeft",reverse:"rotateInDownRight"},{name:"rotateOutUpLeft",disappear:true,reverse:"rotateOutDownRight"},{name:"rotateInUpRight",disappear:"rotateOutUpRight",reverse:"rotateInDownLeft"},{name:"rotateOutUpRight",disappear:true,reverse:"rotateOutDownLeft"},{name:"rollIn",disappear:"rollOut",reverse:null},{name:"rollOut",disappear:true,reverse:null},{name:"zoomIn",disappear:"zoomOut",reverse:null},{name:"zoomOut",disappear:true,reverse:null},{name:"zoomInUp",disappear:"zoomOutUp",reverse:"zoomInDown"},{name:"zoomOutUp",disappear:true,reverse:"zoomOutDown"},{name:"zoomInDown",disappear:"zoomOutDown",reverse:"zoomInUp"},{name:"zoomOutDown",disappear:true,reverse:"zoomOutUp"},{name:"zoomInLeft",disappear:"zoomOutLeft",reverse:"zoomInRight"},{name:"zoomOutLeft",disappear:true,reverse:"zoomOutRight"},{name:"zoomInRight",disappear:"zoomOutRight",reverse:"zoomInLeft"},{name:"zoomOutRight",disappear:true,reverse:"zoomOutLeft"},{name:"slideInUp",disappear:"slideOutUp",reverse:"slideInDown"},{name:"slideOutUp",disappear:true,reverse:"slideOutDown"},{name:"slideInDown",disappear:"slideOutDown",reverse:"slideInUp"},{name:"slideOutDown",disappear:true,reverse:"slideOutUp"},{name:"slideInLeft",disappear:"slideOutLeft",reverse:"slideInRight"},{name:"slideOutLeft",disappear:true,reverse:"slideOutRight"},{name:"slideInRight",disappear:"slideOutRight",reverse:"slideInLeft"},{name:"slideOutRight",disappear:true,reverse:"slideOutLeft"}];var a=[];$.each(this.animations,function(b,c){a.push(c.name)});this.animateClasses=a;this.init=function(b){var c={element:$("body"),animation:"fadein",duration:"0.3s",delay:false,reversedDisappearing:false,breakpoints:[{name:"mobile",width:500},{name:"tablet",width:1024},{name:"desktop",width:1440}],customListeners:false};b=$.extend(c,b);TurbolinksAnimate.element=b.element;TurbolinksAnimate.setOptions(b);if(TurbolinksAnimate.initialized==false&&b.customListeners==false){$(document).on("turbolinks:request-start",function(){TurbolinksAnimate.disappear()});$(window).on("popstate beforeunload",function(){TurbolinksAnimate.disappear()})}$("a, button").click(function(){if(typeof $(this).data("turbolinks-animate-animation")!=="undefined"){TurbolinksAnimate.inline=true}TurbolinksAnimate.options.animation=$(this).data("turbolinks-animate-animation")||b.animation;TurbolinksAnimate.options.appear=$(this).data("turbolinks-animate-appear");TurbolinksAnimate.options.duration=$(this).data("turbolinks-animate-duration")||b.duration;TurbolinksAnimate.options.delay=$(this).data("turbolinks-animate-delay")||b.delay;TurbolinksAnimate.options.type=$(this).data("turbolinks-animate-type")});TurbolinksAnimate.initialized=true;if(b.customListeners==false){TurbolinksAnimate.appear()}};this.setOptions=function(c){var b=TurbolinksAnimate.options.type,d=TurbolinksAnimate.options.appear;TurbolinksAnimate.options={animation:c.animation,duration:c.duration,delay:c.delay,reversedDisappearing:c.reversedDisappearing,breakpoints:c.breakpoints,previousType:b,appear:d}};this.appear=function(){TurbolinksAnimate.disappearing=false;TurbolinksAnimate.toggle()};this.disappear=function(){TurbolinksAnimate.disappearing=true;TurbolinksAnimate.toggle()};this.toggle=function(){if(TurbolinksAnimate.options.animation!="false"){TurbolinksAnimate.resetClasses();TurbolinksAnimate.getElements();TurbolinksAnimate.useOptions();Turbolinks.clearCache();TurbolinksAnimate.animate();TurbolinksAnimate.reset()}};this.getElements=function(){TurbolinksAnimate.elements=[];function b(d){var c=TurbolinksAnimate.options.type||TurbolinksAnimate.options.previousType||"true";if(d.data("turbolinks-animate-persist")==c){return}else{if(d.data("turbolinks-animate-persist-itself")==c||d.find("[data-turbolinks-animate-persist]").length>0||d.find("[data-turbolinks-animate-persist-itself]").length>0){d.children().each(function(){b($(this))})}else{TurbolinksAnimate.elements.push(d)}}}b(TurbolinksAnimate.element)};this.useOptions=function(){if(TurbolinksAnimate.elements!=null){$(TurbolinksAnimate.elements).each(function(){$(this).css("animationDuration",TurbolinksAnimate.options.duration);if(TurbolinksAnimate.options.delay!=false){$(this).css("animationDelay",TurbolinksAnimate.options.delay)}})}};this.reset=function(){delete TurbolinksAnimate.options.appear;delete TurbolinksAnimate.options.previousType;TurbolinksAnimate.inline=false};this.resetClasses=function(){$(TurbolinksAnimate.elements).each(function(){$(this).removeClass(TurbolinksAnimate.animateClasses.join(" "))})};this.animate=function(){$(TurbolinksAnimate.elements).each(function(){$(this).one("webkitAnimationEnd mozAnimationEnd oAnimationEnd oanimationend animationend",function(){setTimeout(function(){if(TurbolinksAnimate.disappearing==false){TurbolinksAnimate.resetClasses()}},250)});$(this).addClass(TurbolinksAnimate.getClassListFor(TurbolinksAnimate.getAnimation()))})};this.getAnimation=function(){var b;if(!TurbolinksAnimate.disappearing){b=TurbolinksAnimate.options.appear}if(TurbolinksAnimate.inline){b=TurbolinksAnimate.options.animation}else{if(typeof TurbolinksAnimate.element.data("turbolinks-animate-animation")!=="undefined"){b=TurbolinksAnimate.element.data("turbolinks-animate-animation")}else{b=TurbolinksAnimate.options.animation}}return b};this.getClassListFor=function(f){var e="animated",d=$(window).width(),c=null;var b=TurbolinksAnimate.options.breakpoints.sort(function(h,g){return g.width-h.width});$.each(b,function(h,g){if(c==null&&d<=g.width){c=f[g.name.toString()]}});if(c==null){c=f}e+=" ";c=$.grep(TurbolinksAnimate.animations,function(g){return g.name.toLowerCase()==c.toLowerCase()})[0];if(TurbolinksAnimate.disappearing){if(c.disappear!=true){c=$.grep(TurbolinksAnimate.animations,function(g){return g.name.toLowerCase()==c.disappear.toLowerCase()})[0]}if(TurbolinksAnimate.options.reversedDisappearing&&c.reverse!=null){e+=c.reverse}else{e+=c.name}}else{e+=c.name}return e}};
@@ -1,1579 +0,0 @@
1
- @charset "UTF-8";
2
-
3
- /*!
4
- * animate.css -http://daneden.me/animate
5
- * Version - 3.5.2
6
- * Licensed under the MIT license - http://opensource.org/licenses/MIT
7
- *
8
- * Copyright (c) 2017 Daniel Eden
9
- */
10
-
11
- .animated {
12
- animation-duration: 1s;
13
- animation-fill-mode: both;
14
- }
15
-
16
- .animated.infinite {
17
- animation-iteration-count: infinite;
18
- }
19
-
20
- .animated.hinge {
21
- animation-duration: 2s;
22
- }
23
-
24
- .animated.flipOutX,
25
- .animated.flipOutY,
26
- .animated.bounceIn,
27
- .animated.bounceOut {
28
- animation-duration: .75s;
29
- }
30
-
31
- @keyframes bounce {
32
- from, 20%, 53%, 80%, to {
33
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
34
- transform: translate3d(0,0,0);
35
- }
36
-
37
- 40%, 43% {
38
- animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
39
- transform: translate3d(0, -30px, 0);
40
- }
41
-
42
- 70% {
43
- animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
44
- transform: translate3d(0, -15px, 0);
45
- }
46
-
47
- 90% {
48
- transform: translate3d(0,-4px,0);
49
- }
50
- }
51
-
52
- .bounce {
53
- animation-name: bounce;
54
- transform-origin: center bottom;
55
- }
56
-
57
- @keyframes flash {
58
- from, 50%, to {
59
- opacity: 1;
60
- }
61
-
62
- 25%, 75% {
63
- opacity: 0;
64
- }
65
- }
66
-
67
- .flash {
68
- animation-name: flash;
69
- }
70
-
71
- /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
72
-
73
- @keyframes pulse {
74
- from {
75
- transform: scale3d(1, 1, 1);
76
- }
77
-
78
- 50% {
79
- transform: scale3d(1.05, 1.05, 1.05);
80
- }
81
-
82
- to {
83
- transform: scale3d(1, 1, 1);
84
- }
85
- }
86
-
87
- .pulse {
88
- animation-name: pulse;
89
- }
90
-
91
- @keyframes rubberBand {
92
- from {
93
- transform: scale3d(1, 1, 1);
94
- }
95
-
96
- 30% {
97
- transform: scale3d(1.25, 0.75, 1);
98
- }
99
-
100
- 40% {
101
- transform: scale3d(0.75, 1.25, 1);
102
- }
103
-
104
- 50% {
105
- transform: scale3d(1.15, 0.85, 1);
106
- }
107
-
108
- 65% {
109
- transform: scale3d(.95, 1.05, 1);
110
- }
111
-
112
- 75% {
113
- transform: scale3d(1.05, .95, 1);
114
- }
115
-
116
- to {
117
- transform: scale3d(1, 1, 1);
118
- }
119
- }
120
-
121
- .rubberBand {
122
- animation-name: rubberBand;
123
- }
124
-
125
- @keyframes shake {
126
- from, to {
127
- transform: translate3d(0, 0, 0);
128
- }
129
-
130
- 10%, 30%, 50%, 70%, 90% {
131
- transform: translate3d(-10px, 0, 0);
132
- }
133
-
134
- 20%, 40%, 60%, 80% {
135
- transform: translate3d(10px, 0, 0);
136
- }
137
- }
138
-
139
- .shake {
140
- animation-name: shake;
141
- }
142
-
143
- @keyframes headShake {
144
- 0% {
145
- transform: translateX(0);
146
- }
147
-
148
- 6.5% {
149
- transform: translateX(-6px) rotateY(-9deg);
150
- }
151
-
152
- 18.5% {
153
- transform: translateX(5px) rotateY(7deg);
154
- }
155
-
156
- 31.5% {
157
- transform: translateX(-3px) rotateY(-5deg);
158
- }
159
-
160
- 43.5% {
161
- transform: translateX(2px) rotateY(3deg);
162
- }
163
-
164
- 50% {
165
- transform: translateX(0);
166
- }
167
- }
168
-
169
- .headShake {
170
- animation-timing-function: ease-in-out;
171
- animation-name: headShake;
172
- }
173
-
174
- @keyframes swing {
175
- 20% {
176
- transform: rotate3d(0, 0, 1, 15deg);
177
- }
178
-
179
- 40% {
180
- transform: rotate3d(0, 0, 1, -10deg);
181
- }
182
-
183
- 60% {
184
- transform: rotate3d(0, 0, 1, 5deg);
185
- }
186
-
187
- 80% {
188
- transform: rotate3d(0, 0, 1, -5deg);
189
- }
190
-
191
- to {
192
- transform: rotate3d(0, 0, 1, 0deg);
193
- }
194
- }
195
-
196
- .swing {
197
- transform-origin: top center;
198
- animation-name: swing;
199
- }
200
-
201
- @keyframes tada {
202
- from {
203
- transform: scale3d(1, 1, 1);
204
- }
205
-
206
- 10%, 20% {
207
- transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
208
- }
209
-
210
- 30%, 50%, 70%, 90% {
211
- transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
212
- }
213
-
214
- 40%, 60%, 80% {
215
- transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
216
- }
217
-
218
- to {
219
- transform: scale3d(1, 1, 1);
220
- }
221
- }
222
-
223
- .tada {
224
- animation-name: tada;
225
- }
226
-
227
- /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
228
-
229
- @keyframes wobble {
230
- from {
231
- transform: none;
232
- }
233
-
234
- 15% {
235
- transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
236
- }
237
-
238
- 30% {
239
- transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
240
- }
241
-
242
- 45% {
243
- transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
244
- }
245
-
246
- 60% {
247
- transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
248
- }
249
-
250
- 75% {
251
- transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
252
- }
253
-
254
- to {
255
- transform: none;
256
- }
257
- }
258
-
259
- .wobble {
260
- animation-name: wobble;
261
- }
262
-
263
- @keyframes jello {
264
- from, 11.1%, to {
265
- transform: none;
266
- }
267
-
268
- 22.2% {
269
- transform: skewX(-12.5deg) skewY(-12.5deg);
270
- }
271
-
272
- 33.3% {
273
- transform: skewX(6.25deg) skewY(6.25deg);
274
- }
275
-
276
- 44.4% {
277
- transform: skewX(-3.125deg) skewY(-3.125deg);
278
- }
279
-
280
- 55.5% {
281
- transform: skewX(1.5625deg) skewY(1.5625deg);
282
- }
283
-
284
- 66.6% {
285
- transform: skewX(-0.78125deg) skewY(-0.78125deg);
286
- }
287
-
288
- 77.7% {
289
- transform: skewX(0.390625deg) skewY(0.390625deg);
290
- }
291
-
292
- 88.8% {
293
- transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
294
- }
295
- }
296
-
297
- .jello {
298
- animation-name: jello;
299
- transform-origin: center;
300
- }
301
-
302
- @keyframes bounceIn {
303
- from, 20%, 40%, 60%, 80%, to {
304
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
305
- }
306
-
307
- 0% {
308
- opacity: 0;
309
- transform: scale3d(.3, .3, .3);
310
- }
311
-
312
- 20% {
313
- transform: scale3d(1.1, 1.1, 1.1);
314
- }
315
-
316
- 40% {
317
- transform: scale3d(.9, .9, .9);
318
- }
319
-
320
- 60% {
321
- opacity: 1;
322
- transform: scale3d(1.03, 1.03, 1.03);
323
- }
324
-
325
- 80% {
326
- transform: scale3d(.97, .97, .97);
327
- }
328
-
329
- to {
330
- opacity: 1;
331
- transform: scale3d(1, 1, 1);
332
- }
333
- }
334
-
335
- .bounceIn {
336
- animation-name: bounceIn;
337
- }
338
-
339
- @keyframes bounceInDown {
340
- from, 60%, 75%, 90%, to {
341
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
342
- }
343
-
344
- 0% {
345
- opacity: 0;
346
- transform: translate3d(0, -3000px, 0);
347
- }
348
-
349
- 60% {
350
- opacity: 1;
351
- transform: translate3d(0, 25px, 0);
352
- }
353
-
354
- 75% {
355
- transform: translate3d(0, -10px, 0);
356
- }
357
-
358
- 90% {
359
- transform: translate3d(0, 5px, 0);
360
- }
361
-
362
- to {
363
- transform: none;
364
- }
365
- }
366
-
367
- .bounceInDown {
368
- animation-name: bounceInDown;
369
- }
370
-
371
- @keyframes bounceInLeft {
372
- from, 60%, 75%, 90%, to {
373
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
374
- }
375
-
376
- 0% {
377
- opacity: 0;
378
- transform: translate3d(-3000px, 0, 0);
379
- }
380
-
381
- 60% {
382
- opacity: 1;
383
- transform: translate3d(25px, 0, 0);
384
- }
385
-
386
- 75% {
387
- transform: translate3d(-10px, 0, 0);
388
- }
389
-
390
- 90% {
391
- transform: translate3d(5px, 0, 0);
392
- }
393
-
394
- to {
395
- transform: none;
396
- }
397
- }
398
-
399
- .bounceInLeft {
400
- animation-name: bounceInLeft;
401
- }
402
-
403
- @keyframes bounceInRight {
404
- from, 60%, 75%, 90%, to {
405
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
406
- }
407
-
408
- from {
409
- opacity: 0;
410
- transform: translate3d(3000px, 0, 0);
411
- }
412
-
413
- 60% {
414
- opacity: 1;
415
- transform: translate3d(-25px, 0, 0);
416
- }
417
-
418
- 75% {
419
- transform: translate3d(10px, 0, 0);
420
- }
421
-
422
- 90% {
423
- transform: translate3d(-5px, 0, 0);
424
- }
425
-
426
- to {
427
- transform: none;
428
- }
429
- }
430
-
431
- .bounceInRight {
432
- animation-name: bounceInRight;
433
- }
434
-
435
- @keyframes bounceInUp {
436
- from, 60%, 75%, 90%, to {
437
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
438
- }
439
-
440
- from {
441
- opacity: 0;
442
- transform: translate3d(0, 3000px, 0);
443
- }
444
-
445
- 60% {
446
- opacity: 1;
447
- transform: translate3d(0, -20px, 0);
448
- }
449
-
450
- 75% {
451
- transform: translate3d(0, 10px, 0);
452
- }
453
-
454
- 90% {
455
- transform: translate3d(0, -5px, 0);
456
- }
457
-
458
- to {
459
- transform: translate3d(0, 0, 0);
460
- }
461
- }
462
-
463
- .bounceInUp {
464
- animation-name: bounceInUp;
465
- }
466
-
467
- @keyframes bounceOut {
468
- 20% {
469
- transform: scale3d(.9, .9, .9);
470
- }
471
-
472
- 50%, 55% {
473
- opacity: 1;
474
- transform: scale3d(1.1, 1.1, 1.1);
475
- }
476
-
477
- to {
478
- opacity: 0;
479
- transform: scale3d(.3, .3, .3);
480
- }
481
- }
482
-
483
- .bounceOut {
484
- animation-name: bounceOut;
485
- }
486
-
487
- @keyframes bounceOutDown {
488
- 20% {
489
- transform: translate3d(0, 10px, 0);
490
- }
491
-
492
- 40%, 45% {
493
- opacity: 1;
494
- transform: translate3d(0, -20px, 0);
495
- }
496
-
497
- to {
498
- opacity: 0;
499
- transform: translate3d(0, 2000px, 0);
500
- }
501
- }
502
-
503
- .bounceOutDown {
504
- animation-name: bounceOutDown;
505
- }
506
-
507
- @keyframes bounceOutLeft {
508
- 20% {
509
- opacity: 1;
510
- transform: translate3d(20px, 0, 0);
511
- }
512
-
513
- to {
514
- opacity: 0;
515
- transform: translate3d(-2000px, 0, 0);
516
- }
517
- }
518
-
519
- .bounceOutLeft {
520
- animation-name: bounceOutLeft;
521
- }
522
-
523
- @keyframes bounceOutRight {
524
- 20% {
525
- opacity: 1;
526
- transform: translate3d(-20px, 0, 0);
527
- }
528
-
529
- to {
530
- opacity: 0;
531
- transform: translate3d(2000px, 0, 0);
532
- }
533
- }
534
-
535
- .bounceOutRight {
536
- animation-name: bounceOutRight;
537
- }
538
-
539
- @keyframes bounceOutUp {
540
- 20% {
541
- transform: translate3d(0, -10px, 0);
542
- }
543
-
544
- 40%, 45% {
545
- opacity: 1;
546
- transform: translate3d(0, 20px, 0);
547
- }
548
-
549
- to {
550
- opacity: 0;
551
- transform: translate3d(0, -2000px, 0);
552
- }
553
- }
554
-
555
- .bounceOutUp {
556
- animation-name: bounceOutUp;
557
- }
558
-
559
- @keyframes fadeIn {
560
- from {
561
- opacity: 0;
562
- }
563
-
564
- to {
565
- opacity: 1;
566
- }
567
- }
568
-
569
- .fadeIn {
570
- animation-name: fadeIn;
571
- }
572
-
573
- @keyframes fadeInDown {
574
- from {
575
- opacity: 0;
576
- transform: translate3d(0, -100%, 0);
577
- }
578
-
579
- to {
580
- opacity: 1;
581
- transform: none;
582
- }
583
- }
584
-
585
- .fadeInDown {
586
- animation-name: fadeInDown;
587
- }
588
-
589
- @keyframes fadeInDownBig {
590
- from {
591
- opacity: 0;
592
- transform: translate3d(0, -2000px, 0);
593
- }
594
-
595
- to {
596
- opacity: 1;
597
- transform: none;
598
- }
599
- }
600
-
601
- .fadeInDownBig {
602
- animation-name: fadeInDownBig;
603
- }
604
-
605
- @keyframes fadeInLeft {
606
- from {
607
- opacity: 0;
608
- transform: translate3d(-100%, 0, 0);
609
- }
610
-
611
- to {
612
- opacity: 1;
613
- transform: none;
614
- }
615
- }
616
-
617
- .fadeInLeft {
618
- animation-name: fadeInLeft;
619
- }
620
-
621
- @keyframes fadeInLeftBig {
622
- from {
623
- opacity: 0;
624
- transform: translate3d(-2000px, 0, 0);
625
- }
626
-
627
- to {
628
- opacity: 1;
629
- transform: none;
630
- }
631
- }
632
-
633
- .fadeInLeftBig {
634
- animation-name: fadeInLeftBig;
635
- }
636
-
637
- @keyframes fadeInRight {
638
- from {
639
- opacity: 0;
640
- transform: translate3d(100%, 0, 0);
641
- }
642
-
643
- to {
644
- opacity: 1;
645
- transform: none;
646
- }
647
- }
648
-
649
- .fadeInRight {
650
- animation-name: fadeInRight;
651
- }
652
-
653
- @keyframes fadeInRightBig {
654
- from {
655
- opacity: 0;
656
- transform: translate3d(2000px, 0, 0);
657
- }
658
-
659
- to {
660
- opacity: 1;
661
- transform: none;
662
- }
663
- }
664
-
665
- .fadeInRightBig {
666
- animation-name: fadeInRightBig;
667
- }
668
-
669
- @keyframes fadeInUp {
670
- from {
671
- opacity: 0;
672
- transform: translate3d(0, 100%, 0);
673
- }
674
-
675
- to {
676
- opacity: 1;
677
- transform: none;
678
- }
679
- }
680
-
681
- .fadeInUp {
682
- animation-name: fadeInUp;
683
- }
684
-
685
- @keyframes fadeInUpBig {
686
- from {
687
- opacity: 0;
688
- transform: translate3d(0, 2000px, 0);
689
- }
690
-
691
- to {
692
- opacity: 1;
693
- transform: none;
694
- }
695
- }
696
-
697
- .fadeInUpBig {
698
- animation-name: fadeInUpBig;
699
- }
700
-
701
- @keyframes fadeOut {
702
- from {
703
- opacity: 1;
704
- }
705
-
706
- to {
707
- opacity: 0;
708
- }
709
- }
710
-
711
- .fadeOut {
712
- animation-name: fadeOut;
713
- }
714
-
715
- @keyframes fadeOutDown {
716
- from {
717
- opacity: 1;
718
- }
719
-
720
- to {
721
- opacity: 0;
722
- transform: translate3d(0, 100%, 0);
723
- }
724
- }
725
-
726
- .fadeOutDown {
727
- animation-name: fadeOutDown;
728
- }
729
-
730
- @keyframes fadeOutDownBig {
731
- from {
732
- opacity: 1;
733
- }
734
-
735
- to {
736
- opacity: 0;
737
- transform: translate3d(0, 2000px, 0);
738
- }
739
- }
740
-
741
- .fadeOutDownBig {
742
- animation-name: fadeOutDownBig;
743
- }
744
-
745
- @keyframes fadeOutLeft {
746
- from {
747
- opacity: 1;
748
- }
749
-
750
- to {
751
- opacity: 0;
752
- transform: translate3d(-100%, 0, 0);
753
- }
754
- }
755
-
756
- .fadeOutLeft {
757
- animation-name: fadeOutLeft;
758
- }
759
-
760
- @keyframes fadeOutLeftBig {
761
- from {
762
- opacity: 1;
763
- }
764
-
765
- to {
766
- opacity: 0;
767
- transform: translate3d(-2000px, 0, 0);
768
- }
769
- }
770
-
771
- .fadeOutLeftBig {
772
- animation-name: fadeOutLeftBig;
773
- }
774
-
775
- @keyframes fadeOutRight {
776
- from {
777
- opacity: 1;
778
- }
779
-
780
- to {
781
- opacity: 0;
782
- transform: translate3d(100%, 0, 0);
783
- }
784
- }
785
-
786
- .fadeOutRight {
787
- animation-name: fadeOutRight;
788
- }
789
-
790
- @keyframes fadeOutRightBig {
791
- from {
792
- opacity: 1;
793
- }
794
-
795
- to {
796
- opacity: 0;
797
- transform: translate3d(2000px, 0, 0);
798
- }
799
- }
800
-
801
- .fadeOutRightBig {
802
- animation-name: fadeOutRightBig;
803
- }
804
-
805
- @keyframes fadeOutUp {
806
- from {
807
- opacity: 1;
808
- }
809
-
810
- to {
811
- opacity: 0;
812
- transform: translate3d(0, -100%, 0);
813
- }
814
- }
815
-
816
- .fadeOutUp {
817
- animation-name: fadeOutUp;
818
- }
819
-
820
- @keyframes fadeOutUpBig {
821
- from {
822
- opacity: 1;
823
- }
824
-
825
- to {
826
- opacity: 0;
827
- transform: translate3d(0, -2000px, 0);
828
- }
829
- }
830
-
831
- .fadeOutUpBig {
832
- animation-name: fadeOutUpBig;
833
- }
834
-
835
- @keyframes flip {
836
- from {
837
- transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
838
- animation-timing-function: ease-out;
839
- }
840
-
841
- 40% {
842
- transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
843
- animation-timing-function: ease-out;
844
- }
845
-
846
- 50% {
847
- transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
848
- animation-timing-function: ease-in;
849
- }
850
-
851
- 80% {
852
- transform: perspective(400px) scale3d(.95, .95, .95);
853
- animation-timing-function: ease-in;
854
- }
855
-
856
- to {
857
- transform: perspective(400px);
858
- animation-timing-function: ease-in;
859
- }
860
- }
861
-
862
- .animated.flip {
863
- -webkit-backface-visibility: visible;
864
- backface-visibility: visible;
865
- animation-name: flip;
866
- }
867
-
868
- @keyframes flipInX {
869
- from {
870
- transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
871
- animation-timing-function: ease-in;
872
- opacity: 0;
873
- }
874
-
875
- 40% {
876
- transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
877
- animation-timing-function: ease-in;
878
- }
879
-
880
- 60% {
881
- transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
882
- opacity: 1;
883
- }
884
-
885
- 80% {
886
- transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
887
- }
888
-
889
- to {
890
- transform: perspective(400px);
891
- }
892
- }
893
-
894
- .flipInX {
895
- -webkit-backface-visibility: visible !important;
896
- backface-visibility: visible !important;
897
- animation-name: flipInX;
898
- }
899
-
900
- @keyframes flipInY {
901
- from {
902
- transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
903
- animation-timing-function: ease-in;
904
- opacity: 0;
905
- }
906
-
907
- 40% {
908
- transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
909
- animation-timing-function: ease-in;
910
- }
911
-
912
- 60% {
913
- transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
914
- opacity: 1;
915
- }
916
-
917
- 80% {
918
- transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
919
- }
920
-
921
- to {
922
- transform: perspective(400px);
923
- }
924
- }
925
-
926
- .flipInY {
927
- -webkit-backface-visibility: visible !important;
928
- backface-visibility: visible !important;
929
- animation-name: flipInY;
930
- }
931
-
932
- @keyframes flipOutX {
933
- from {
934
- transform: perspective(400px);
935
- }
936
-
937
- 30% {
938
- transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
939
- opacity: 1;
940
- }
941
-
942
- to {
943
- transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
944
- opacity: 0;
945
- }
946
- }
947
-
948
- .flipOutX {
949
- animation-name: flipOutX;
950
- -webkit-backface-visibility: visible !important;
951
- backface-visibility: visible !important;
952
- }
953
-
954
- @keyframes flipOutY {
955
- from {
956
- transform: perspective(400px);
957
- }
958
-
959
- 30% {
960
- transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
961
- opacity: 1;
962
- }
963
-
964
- to {
965
- transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
966
- opacity: 0;
967
- }
968
- }
969
-
970
- .flipOutY {
971
- -webkit-backface-visibility: visible !important;
972
- backface-visibility: visible !important;
973
- animation-name: flipOutY;
974
- }
975
-
976
- @keyframes lightSpeedIn {
977
- from {
978
- transform: translate3d(100%, 0, 0) skewX(-30deg);
979
- opacity: 0;
980
- }
981
-
982
- 60% {
983
- transform: skewX(20deg);
984
- opacity: 1;
985
- }
986
-
987
- 80% {
988
- transform: skewX(-5deg);
989
- opacity: 1;
990
- }
991
-
992
- to {
993
- transform: none;
994
- opacity: 1;
995
- }
996
- }
997
-
998
- .lightSpeedIn {
999
- animation-name: lightSpeedIn;
1000
- animation-timing-function: ease-out;
1001
- }
1002
-
1003
- @keyframes lightSpeedOut {
1004
- from {
1005
- opacity: 1;
1006
- }
1007
-
1008
- to {
1009
- transform: translate3d(100%, 0, 0) skewX(30deg);
1010
- opacity: 0;
1011
- }
1012
- }
1013
-
1014
- .lightSpeedOut {
1015
- animation-name: lightSpeedOut;
1016
- animation-timing-function: ease-in;
1017
- }
1018
-
1019
- @keyframes rotateIn {
1020
- from {
1021
- transform-origin: center;
1022
- transform: rotate3d(0, 0, 1, -200deg);
1023
- opacity: 0;
1024
- }
1025
-
1026
- to {
1027
- transform-origin: center;
1028
- transform: none;
1029
- opacity: 1;
1030
- }
1031
- }
1032
-
1033
- .rotateIn {
1034
- animation-name: rotateIn;
1035
- }
1036
-
1037
- @keyframes rotateInDownLeft {
1038
- from {
1039
- transform-origin: left bottom;
1040
- transform: rotate3d(0, 0, 1, -45deg);
1041
- opacity: 0;
1042
- }
1043
-
1044
- to {
1045
- transform-origin: left bottom;
1046
- transform: none;
1047
- opacity: 1;
1048
- }
1049
- }
1050
-
1051
- .rotateInDownLeft {
1052
- animation-name: rotateInDownLeft;
1053
- }
1054
-
1055
- @keyframes rotateInDownRight {
1056
- from {
1057
- transform-origin: right bottom;
1058
- transform: rotate3d(0, 0, 1, 45deg);
1059
- opacity: 0;
1060
- }
1061
-
1062
- to {
1063
- transform-origin: right bottom;
1064
- transform: none;
1065
- opacity: 1;
1066
- }
1067
- }
1068
-
1069
- .rotateInDownRight {
1070
- animation-name: rotateInDownRight;
1071
- }
1072
-
1073
- @keyframes rotateInUpLeft {
1074
- from {
1075
- transform-origin: left bottom;
1076
- transform: rotate3d(0, 0, 1, 45deg);
1077
- opacity: 0;
1078
- }
1079
-
1080
- to {
1081
- transform-origin: left bottom;
1082
- transform: none;
1083
- opacity: 1;
1084
- }
1085
- }
1086
-
1087
- .rotateInUpLeft {
1088
- animation-name: rotateInUpLeft;
1089
- }
1090
-
1091
- @keyframes rotateInUpRight {
1092
- from {
1093
- transform-origin: right bottom;
1094
- transform: rotate3d(0, 0, 1, -90deg);
1095
- opacity: 0;
1096
- }
1097
-
1098
- to {
1099
- transform-origin: right bottom;
1100
- transform: none;
1101
- opacity: 1;
1102
- }
1103
- }
1104
-
1105
- .rotateInUpRight {
1106
- animation-name: rotateInUpRight;
1107
- }
1108
-
1109
- @keyframes rotateOut {
1110
- from {
1111
- transform-origin: center;
1112
- opacity: 1;
1113
- }
1114
-
1115
- to {
1116
- transform-origin: center;
1117
- transform: rotate3d(0, 0, 1, 200deg);
1118
- opacity: 0;
1119
- }
1120
- }
1121
-
1122
- .rotateOut {
1123
- animation-name: rotateOut;
1124
- }
1125
-
1126
- @keyframes rotateOutDownLeft {
1127
- from {
1128
- transform-origin: left bottom;
1129
- opacity: 1;
1130
- }
1131
-
1132
- to {
1133
- transform-origin: left bottom;
1134
- transform: rotate3d(0, 0, 1, 45deg);
1135
- opacity: 0;
1136
- }
1137
- }
1138
-
1139
- .rotateOutDownLeft {
1140
- animation-name: rotateOutDownLeft;
1141
- }
1142
-
1143
- @keyframes rotateOutDownRight {
1144
- from {
1145
- transform-origin: right bottom;
1146
- opacity: 1;
1147
- }
1148
-
1149
- to {
1150
- transform-origin: right bottom;
1151
- transform: rotate3d(0, 0, 1, -45deg);
1152
- opacity: 0;
1153
- }
1154
- }
1155
-
1156
- .rotateOutDownRight {
1157
- animation-name: rotateOutDownRight;
1158
- }
1159
-
1160
- @keyframes rotateOutUpLeft {
1161
- from {
1162
- transform-origin: left bottom;
1163
- opacity: 1;
1164
- }
1165
-
1166
- to {
1167
- transform-origin: left bottom;
1168
- transform: rotate3d(0, 0, 1, -45deg);
1169
- opacity: 0;
1170
- }
1171
- }
1172
-
1173
- .rotateOutUpLeft {
1174
- animation-name: rotateOutUpLeft;
1175
- }
1176
-
1177
- @keyframes rotateOutUpRight {
1178
- from {
1179
- transform-origin: right bottom;
1180
- opacity: 1;
1181
- }
1182
-
1183
- to {
1184
- transform-origin: right bottom;
1185
- transform: rotate3d(0, 0, 1, 90deg);
1186
- opacity: 0;
1187
- }
1188
- }
1189
-
1190
- .rotateOutUpRight {
1191
- animation-name: rotateOutUpRight;
1192
- }
1193
-
1194
- @keyframes hinge {
1195
- 0% {
1196
- transform-origin: top left;
1197
- animation-timing-function: ease-in-out;
1198
- }
1199
-
1200
- 20%, 60% {
1201
- transform: rotate3d(0, 0, 1, 80deg);
1202
- transform-origin: top left;
1203
- animation-timing-function: ease-in-out;
1204
- }
1205
-
1206
- 40%, 80% {
1207
- transform: rotate3d(0, 0, 1, 60deg);
1208
- transform-origin: top left;
1209
- animation-timing-function: ease-in-out;
1210
- opacity: 1;
1211
- }
1212
-
1213
- to {
1214
- transform: translate3d(0, 700px, 0);
1215
- opacity: 0;
1216
- }
1217
- }
1218
-
1219
- .hinge {
1220
- animation-name: hinge;
1221
- }
1222
-
1223
- @keyframes jackInTheBox {
1224
- from {
1225
- opacity: 0;
1226
- transform: scale(0.1) rotate(30deg);
1227
- transform-origin: center bottom;
1228
- }
1229
-
1230
- 50% {
1231
- transform: rotate(-10deg);
1232
- }
1233
-
1234
- 70% {
1235
- transform: rotate(3deg);
1236
- }
1237
-
1238
- to {
1239
- opacity: 1;
1240
- transform: scale(1);
1241
- }
1242
- }
1243
-
1244
- .jackInTheBox {
1245
- animation-name: jackInTheBox;
1246
- }
1247
-
1248
- /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
1249
-
1250
- @keyframes rollIn {
1251
- from {
1252
- opacity: 0;
1253
- transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
1254
- }
1255
-
1256
- to {
1257
- opacity: 1;
1258
- transform: none;
1259
- }
1260
- }
1261
-
1262
- .rollIn {
1263
- animation-name: rollIn;
1264
- }
1265
-
1266
- /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
1267
-
1268
- @keyframes rollOut {
1269
- from {
1270
- opacity: 1;
1271
- }
1272
-
1273
- to {
1274
- opacity: 0;
1275
- transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
1276
- }
1277
- }
1278
-
1279
- .rollOut {
1280
- animation-name: rollOut;
1281
- }
1282
-
1283
- @keyframes zoomIn {
1284
- from {
1285
- opacity: 0;
1286
- transform: scale3d(.3, .3, .3);
1287
- }
1288
-
1289
- 50% {
1290
- opacity: 1;
1291
- }
1292
- }
1293
-
1294
- .zoomIn {
1295
- animation-name: zoomIn;
1296
- }
1297
-
1298
- @keyframes zoomInDown {
1299
- from {
1300
- opacity: 0;
1301
- transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
1302
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1303
- }
1304
-
1305
- 60% {
1306
- opacity: 1;
1307
- transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1308
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1309
- }
1310
- }
1311
-
1312
- .zoomInDown {
1313
- animation-name: zoomInDown;
1314
- }
1315
-
1316
- @keyframes zoomInLeft {
1317
- from {
1318
- opacity: 0;
1319
- transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
1320
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1321
- }
1322
-
1323
- 60% {
1324
- opacity: 1;
1325
- transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
1326
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1327
- }
1328
- }
1329
-
1330
- .zoomInLeft {
1331
- animation-name: zoomInLeft;
1332
- }
1333
-
1334
- @keyframes zoomInRight {
1335
- from {
1336
- opacity: 0;
1337
- transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
1338
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1339
- }
1340
-
1341
- 60% {
1342
- opacity: 1;
1343
- transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
1344
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1345
- }
1346
- }
1347
-
1348
- .zoomInRight {
1349
- animation-name: zoomInRight;
1350
- }
1351
-
1352
- @keyframes zoomInUp {
1353
- from {
1354
- opacity: 0;
1355
- transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
1356
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1357
- }
1358
-
1359
- 60% {
1360
- opacity: 1;
1361
- transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
1362
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1363
- }
1364
- }
1365
-
1366
- .zoomInUp {
1367
- animation-name: zoomInUp;
1368
- }
1369
-
1370
- @keyframes zoomOut {
1371
- from {
1372
- opacity: 1;
1373
- }
1374
-
1375
- 50% {
1376
- opacity: 0;
1377
- transform: scale3d(.3, .3, .3);
1378
- }
1379
-
1380
- to {
1381
- opacity: 0;
1382
- }
1383
- }
1384
-
1385
- .zoomOut {
1386
- animation-name: zoomOut;
1387
- }
1388
-
1389
- @keyframes zoomOutDown {
1390
- 40% {
1391
- opacity: 1;
1392
- transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
1393
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1394
- }
1395
-
1396
- to {
1397
- opacity: 0;
1398
- transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
1399
- transform-origin: center bottom;
1400
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1401
- }
1402
- }
1403
-
1404
- .zoomOutDown {
1405
- animation-name: zoomOutDown;
1406
- }
1407
-
1408
- @keyframes zoomOutLeft {
1409
- 40% {
1410
- opacity: 1;
1411
- transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
1412
- }
1413
-
1414
- to {
1415
- opacity: 0;
1416
- transform: scale(.1) translate3d(-2000px, 0, 0);
1417
- transform-origin: left center;
1418
- }
1419
- }
1420
-
1421
- .zoomOutLeft {
1422
- animation-name: zoomOutLeft;
1423
- }
1424
-
1425
- @keyframes zoomOutRight {
1426
- 40% {
1427
- opacity: 1;
1428
- transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
1429
- }
1430
-
1431
- to {
1432
- opacity: 0;
1433
- transform: scale(.1) translate3d(2000px, 0, 0);
1434
- transform-origin: right center;
1435
- }
1436
- }
1437
-
1438
- .zoomOutRight {
1439
- animation-name: zoomOutRight;
1440
- }
1441
-
1442
- @keyframes zoomOutUp {
1443
- 40% {
1444
- opacity: 1;
1445
- transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1446
- animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1447
- }
1448
-
1449
- to {
1450
- opacity: 0;
1451
- transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
1452
- transform-origin: center bottom;
1453
- animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1454
- }
1455
- }
1456
-
1457
- .zoomOutUp {
1458
- animation-name: zoomOutUp;
1459
- }
1460
-
1461
- @keyframes slideInDown {
1462
- from {
1463
- transform: translate3d(0, -100%, 0);
1464
- visibility: visible;
1465
- }
1466
-
1467
- to {
1468
- transform: translate3d(0, 0, 0);
1469
- }
1470
- }
1471
-
1472
- .slideInDown {
1473
- animation-name: slideInDown;
1474
- }
1475
-
1476
- @keyframes slideInLeft {
1477
- from {
1478
- transform: translate3d(-100%, 0, 0);
1479
- visibility: visible;
1480
- }
1481
-
1482
- to {
1483
- transform: translate3d(0, 0, 0);
1484
- }
1485
- }
1486
-
1487
- .slideInLeft {
1488
- animation-name: slideInLeft;
1489
- }
1490
-
1491
- @keyframes slideInRight {
1492
- from {
1493
- transform: translate3d(100%, 0, 0);
1494
- visibility: visible;
1495
- }
1496
-
1497
- to {
1498
- transform: translate3d(0, 0, 0);
1499
- }
1500
- }
1501
-
1502
- .slideInRight {
1503
- animation-name: slideInRight;
1504
- }
1505
-
1506
- @keyframes slideInUp {
1507
- from {
1508
- transform: translate3d(0, 100%, 0);
1509
- visibility: visible;
1510
- }
1511
-
1512
- to {
1513
- transform: translate3d(0, 0, 0);
1514
- }
1515
- }
1516
-
1517
- .slideInUp {
1518
- animation-name: slideInUp;
1519
- }
1520
-
1521
- @keyframes slideOutDown {
1522
- from {
1523
- transform: translate3d(0, 0, 0);
1524
- }
1525
-
1526
- to {
1527
- visibility: hidden;
1528
- transform: translate3d(0, 100%, 0);
1529
- }
1530
- }
1531
-
1532
- .slideOutDown {
1533
- animation-name: slideOutDown;
1534
- }
1535
-
1536
- @keyframes slideOutLeft {
1537
- from {
1538
- transform: translate3d(0, 0, 0);
1539
- }
1540
-
1541
- to {
1542
- visibility: hidden;
1543
- transform: translate3d(-100%, 0, 0);
1544
- }
1545
- }
1546
-
1547
- .slideOutLeft {
1548
- animation-name: slideOutLeft;
1549
- }
1550
-
1551
- @keyframes slideOutRight {
1552
- from {
1553
- transform: translate3d(0, 0, 0);
1554
- }
1555
-
1556
- to {
1557
- visibility: hidden;
1558
- transform: translate3d(100%, 0, 0);
1559
- }
1560
- }
1561
-
1562
- .slideOutRight {
1563
- animation-name: slideOutRight;
1564
- }
1565
-
1566
- @keyframes slideOutUp {
1567
- from {
1568
- transform: translate3d(0, 0, 0);
1569
- }
1570
-
1571
- to {
1572
- visibility: hidden;
1573
- transform: translate3d(0, -100%, 0);
1574
- }
1575
- }
1576
-
1577
- .slideOutUp {
1578
- animation-name: slideOutUp;
1579
- }