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