← Back to branch summary

~johnsca/charms/trusty/cloudfoundry/reconciler-ui

« back to all changes in this revision

Viewing changes to reconciler/ui/static/semantic/uncompressed/modules/transition.css

  • Committer: Whit Morriss
  • Date: 2014-10-13 06:50:17 UTC
  • Revision ID: whit.morriss@canonical.com-20141013065017-0feo2ku3yllymkol
reorg reconciler

Show diffs side-by-side

added added

removed removed

Lines of Context:
reconciler/ui/static/semantic/uncompressed/modules/transition.css
 
1
/*******************************
 
2
  Semantic - Transition
 
3
  Author: Jack Lukic
 
4
 
 
5
  CSS animation definitions for
 
6
  transition module
 
7
 
 
8
*******************************/
 
9
/*
 
10
  Some transitions adapted from Animate CSS
 
11
  https://github.com/daneden/animate.css
 
12
*/
 
13
.ui.transition {
 
14
  -webkit-animation-iteration-count: 1;
 
15
     -moz-animation-iteration-count: 1;
 
16
          animation-iteration-count: 1;
 
17
  -webkit-animation-duration: 1s;
 
18
     -moz-animation-duration: 1s;
 
19
          animation-duration: 1s;
 
20
  -webkit-animation-timing-function: ease;
 
21
     -moz-animation-timing-function: ease;
 
22
          animation-timing-function: ease;
 
23
  -webkit-animation-fill-mode: both;
 
24
     -moz-animation-fill-mode: both;
 
25
          animation-fill-mode: both;
 
26
}
 
27
/*******************************
 
28
            States
 
29
*******************************/
 
30
.ui.animating.transition {
 
31
  display: block;
 
32
  -webkit-backface-visibility: hidden;
 
33
     -moz-backface-visibility: hidden;
 
34
          backface-visibility: hidden;
 
35
  -webkit-transform: translateZ(0);
 
36
     -moz-transform: translateZ(0);
 
37
          transform: translateZ(0);
 
38
}
 
39
/* Loading */
 
40
.ui.loading.transition {
 
41
  position: absolute;
 
42
  top: -999999px;
 
43
  left: -99999px;
 
44
}
 
45
/* Hidden */
 
46
.ui.hidden.transition {
 
47
  display: none !important;
 
48
}
 
49
/* Visible */
 
50
.ui.visible.transition {
 
51
  display: block;
 
52
  visibility: visible;
 
53
}
 
54
/* Disabled */
 
55
.ui.disabled.transition {
 
56
  -webkit-animation-play-state: paused;
 
57
     -moz-animation-play-state: paused;
 
58
          animation-play-state: paused;
 
59
}
 
60
/*******************************
 
61
          Variations
 
62
*******************************/
 
63
.ui.looping.transition {
 
64
  -webkit-animation-iteration-count: infinite;
 
65
     -moz-animation-iteration-count: infinite;
 
66
          animation-iteration-count: infinite;
 
67
}
 
68
/*******************************
 
69
             Types
 
70
*******************************/
 
71
/*--------------
 
72
    Emphasis
 
73
---------------*/
 
74
.ui.flash.transition {
 
75
  -webkit-animation-name: flash;
 
76
     -moz-animation-name: flash;
 
77
          animation-name: flash;
 
78
}
 
79
.ui.shake.transition {
 
80
  -webkit-animation-name: shake;
 
81
     -moz-animation-name: shake;
 
82
          animation-name: shake;
 
83
}
 
84
.ui.bounce.transition {
 
85
  -webkit-animation-name: bounce;
 
86
     -moz-animation-name: bounce;
 
87
          animation-name: bounce;
 
88
}
 
89
.ui.tada.transition {
 
90
  -webkit-animation-name: tada;
 
91
     -moz-animation-name: tada;
 
92
          animation-name: tada;
 
93
}
 
94
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 
95
.ui.pulse.transition {
 
96
  -webkit-animation-name: pulse;
 
97
     -moz-animation-name: pulse;
 
98
          animation-name: pulse;
 
99
}
 
100
/*--------------
 
101
     Flips
 
102
---------------*/
 
103
.ui.flip.transition.in,
 
104
.ui.flip.transition.out {
 
105
  -webkit-perspective: 2000px;
 
106
  -moz-perspective: 2000px;
 
107
       perspective: 2000px;
 
108
}
 
109
.ui.horizontal.flip.transition.in,
 
110
.ui.horizontal.flip.transition.out {
 
111
  -webkit-animation-name: horizontalFlip;
 
112
     -moz-animation-name: horizontalFlip;
 
113
          animation-name: horizontalFlip;
 
114
}
 
115
.ui.horizontal.flip.transition.out {
 
116
  -webkit-animation-name: horizontalFlipOut;
 
117
     -moz-animation-name: horizontalFlipOut;
 
118
          animation-name: horizontalFlipOut;
 
119
}
 
120
.ui.vertical.flip.transition.in,
 
121
.ui.vertical.flip.transition.out {
 
122
  -webkit-animation-name: verticalFlip;
 
123
     -moz-animation-name: verticalFlip;
 
124
          animation-name: verticalFlip;
 
125
}
 
126
.ui.vertical.flip.transition.out {
 
127
  -webkit-animation-name: verticalFlipOut;
 
128
     -moz-animation-name: verticalFlipOut;
 
129
          animation-name: verticalFlipOut;
 
130
}
 
131
/*--------------
 
132
      Fades
 
133
---------------*/
 
134
.ui.fade.transition.in {
 
135
  -webkit-animation-name: fade;
 
136
     -moz-animation-name: fade;
 
137
          animation-name: fade;
 
138
}
 
139
.ui.fade.transition.out {
 
140
  -webkit-animation-name: fadeOut;
 
141
     -moz-animation-name: fadeOut;
 
142
          animation-name: fadeOut;
 
143
}
 
144
.ui.fade.up.transition.in {
 
145
  -webkit-animation-name: fadeUp;
 
146
     -moz-animation-name: fadeUp;
 
147
          animation-name: fadeUp;
 
148
}
 
149
.ui.fade.up.transition.out {
 
150
  -webkit-animation-name: fadeUpOut;
 
151
     -moz-animation-name: fadeUpOut;
 
152
          animation-name: fadeUpOut;
 
153
}
 
154
.ui.fade.down.transition.in {
 
155
  -webkit-animation-name: fadeDown;
 
156
     -moz-animation-name: fadeDown;
 
157
          animation-name: fadeDown;
 
158
}
 
159
.ui.fade.down.transition.out {
 
160
  -webkit-animation-name: fadeDownOut;
 
161
     -moz-animation-name: fadeDownOut;
 
162
          animation-name: fadeDownOut;
 
163
}
 
164
/*rtl:ignore renaming*/
 
165
.ui.fade.left.transition.in {
 
166
  -webkit-animation-name: fadeLeft;
 
167
     -moz-animation-name: fadeLeft;
 
168
          animation-name: fadeLeft;
 
169
}
 
170
/*rtl:ignore renaming*/
 
171
.ui.fade.left.transition.out {
 
172
  -webkit-animation-name: fadeLeftOut;
 
173
     -moz-animation-name: fadeLeftOut;
 
174
          animation-name: fadeLeftOut;
 
175
}
 
176
/*rtl:ignore renaming*/
 
177
.ui.fade.right.transition.in {
 
178
  -webkit-animation-name: fadeRight;
 
179
     -moz-animation-name: fadeRight;
 
180
          animation-name: fadeRight;
 
181
}
 
182
/*rtl:ignore renaming*/
 
183
.ui.fade.right.transition.out {
 
184
  -webkit-animation-name: fadeRightOut;
 
185
     -moz-animation-name: fadeRightOut;
 
186
          animation-name: fadeRightOut;
 
187
}
 
188
/*--------------
 
189
      Scale
 
190
---------------*/
 
191
.ui.scale.transition.in {
 
192
  -webkit-animation-name: scale;
 
193
     -moz-animation-name: scale;
 
194
          animation-name: scale;
 
195
}
 
196
.ui.scale.transition.out {
 
197
  -webkit-animation-name: scaleOut;
 
198
     -moz-animation-name: scaleOut;
 
199
          animation-name: scaleOut;
 
200
}
 
201
/*--------------
 
202
     Slide
 
203
---------------*/
 
204
.ui.slide.down.transition.in {
 
205
  -webkit-animation-name: slide;
 
206
     -moz-animation-name: slide;
 
207
          animation-name: slide;
 
208
  -moz-transform-origin: 50% 0%;
 
209
       transform-origin: 50% 0%;
 
210
  -ms-transform-origin: 50% 0%;
 
211
  -webkit-transform-origin: 50% 0%;
 
212
}
 
213
.ui.slide.down.transition.out {
 
214
  -webkit-animation-name: slideOut;
 
215
     -moz-animation-name: slideOut;
 
216
          animation-name: slideOut;
 
217
  -webkit-transform-origin: 50% 0%;
 
218
     -moz-transform-origin: 50% 0%;
 
219
      -ms-transform-origin: 50% 0%;
 
220
          transform-origin: 50% 0%;
 
221
}
 
222
.ui.slide.up.transition.in {
 
223
  -webkit-animation-name: slide;
 
224
     -moz-animation-name: slide;
 
225
          animation-name: slide;
 
226
  -webkit-transform-origin: 50% 100%;
 
227
     -moz-transform-origin: 50% 100%;
 
228
      -ms-transform-origin: 50% 100%;
 
229
          transform-origin: 50% 100%;
 
230
}
 
231
.ui.slide.up.transition.out {
 
232
  -webkit-animation-name: slideOut;
 
233
     -moz-animation-name: slideOut;
 
234
          animation-name: slideOut;
 
235
  -webkit-transform-origin: 50% 100%;
 
236
     -moz-transform-origin: 50% 100%;
 
237
      -ms-transform-origin: 50% 100%;
 
238
          transform-origin: 50% 100%;
 
239
}
 
240
@-webkit-keyframes slide {
 
241
  0% {
 
242
    opacity: 0;
 
243
    -webkit-transform: scaleY(0);
 
244
            transform: scaleY(0);
 
245
  }
 
246
  100% {
 
247
    opacity: 1;
 
248
    -webkit-transform: scaleY(1);
 
249
            transform: scaleY(1);
 
250
  }
 
251
}
 
252
@-moz-keyframes slide {
 
253
  0% {
 
254
    opacity: 0;
 
255
    -moz-transform: scaleY(0);
 
256
         transform: scaleY(0);
 
257
  }
 
258
  100% {
 
259
    opacity: 1;
 
260
    -moz-transform: scaleY(1);
 
261
         transform: scaleY(1);
 
262
  }
 
263
}
 
264
@keyframes slide {
 
265
  0% {
 
266
    opacity: 0;
 
267
    -webkit-transform: scaleY(0);
 
268
       -moz-transform: scaleY(0);
 
269
            transform: scaleY(0);
 
270
  }
 
271
  100% {
 
272
    opacity: 1;
 
273
    -webkit-transform: scaleY(1);
 
274
       -moz-transform: scaleY(1);
 
275
            transform: scaleY(1);
 
276
  }
 
277
}
 
278
@-webkit-keyframes slideOut {
 
279
  0% {
 
280
    opacity: 1;
 
281
    -webkit-transform: scaleY(1);
 
282
            transform: scaleY(1);
 
283
  }
 
284
  100% {
 
285
    opacity: 0;
 
286
    -webkit-transform: scaleY(0);
 
287
            transform: scaleY(0);
 
288
  }
 
289
}
 
290
@-moz-keyframes slideOut {
 
291
  0% {
 
292
    opacity: 1;
 
293
    -moz-transform: scaleY(1);
 
294
         transform: scaleY(1);
 
295
  }
 
296
  100% {
 
297
    opacity: 0;
 
298
    -moz-transform: scaleY(0);
 
299
         transform: scaleY(0);
 
300
  }
 
301
}
 
302
@keyframes slideOut {
 
303
  0% {
 
304
    opacity: 1;
 
305
    -webkit-transform: scaleY(1);
 
306
       -moz-transform: scaleY(1);
 
307
            transform: scaleY(1);
 
308
  }
 
309
  100% {
 
310
    opacity: 0;
 
311
    -webkit-transform: scaleY(0);
 
312
       -moz-transform: scaleY(0);
 
313
            transform: scaleY(0);
 
314
  }
 
315
}
 
316
/*******************************
 
317
       Animations
 
318
*******************************/
 
319
/*--------------
 
320
    Emphasis
 
321
---------------*/
 
322
/* Flash */
 
323
@-webkit-keyframes flash {
 
324
  0%,
 
325
  50%,
 
326
  100% {
 
327
    opacity: 1;
 
328
  }
 
329
  25%,
 
330
  75% {
 
331
    opacity: 0;
 
332
  }
 
333
}
 
334
@-moz-keyframes flash {
 
335
  0%,
 
336
  50%,
 
337
  100% {
 
338
    opacity: 1;
 
339
  }
 
340
  25%,
 
341
  75% {
 
342
    opacity: 0;
 
343
  }
 
344
}
 
345
@keyframes flash {
 
346
  0%,
 
347
  50%,
 
348
  100% {
 
349
    opacity: 1;
 
350
  }
 
351
  25%,
 
352
  75% {
 
353
    opacity: 0;
 
354
  }
 
355
}
 
356
/* Shake */
 
357
@-webkit-keyframes shake {
 
358
  0%,
 
359
  100% {
 
360
    -webkit-transform: translateX(0);
 
361
            transform: translateX(0);
 
362
  }
 
363
  10%,
 
364
  30%,
 
365
  50%,
 
366
  70%,
 
367
  90% {
 
368
    -webkit-transform: translateX(-10px);
 
369
            transform: translateX(-10px);
 
370
  }
 
371
  20%,
 
372
  40%,
 
373
  60%,
 
374
  80% {
 
375
    -webkit-transform: translateX(10px);
 
376
            transform: translateX(10px);
 
377
  }
 
378
}
 
379
@-moz-keyframes shake {
 
380
  0%,
 
381
  100% {
 
382
    -moz-transform: translateX(0);
 
383
         transform: translateX(0);
 
384
  }
 
385
  10%,
 
386
  30%,
 
387
  50%,
 
388
  70%,
 
389
  90% {
 
390
    -moz-transform: translateX(-10px);
 
391
         transform: translateX(-10px);
 
392
  }
 
393
  20%,
 
394
  40%,
 
395
  60%,
 
396
  80% {
 
397
    -moz-transform: translateX(10px);
 
398
         transform: translateX(10px);
 
399
  }
 
400
}
 
401
@keyframes shake {
 
402
  0%,
 
403
  100% {
 
404
    -webkit-transform: translateX(0);
 
405
       -moz-transform: translateX(0);
 
406
            transform: translateX(0);
 
407
  }
 
408
  10%,
 
409
  30%,
 
410
  50%,
 
411
  70%,
 
412
  90% {
 
413
    -webkit-transform: translateX(-10px);
 
414
       -moz-transform: translateX(-10px);
 
415
            transform: translateX(-10px);
 
416
  }
 
417
  20%,
 
418
  40%,
 
419
  60%,
 
420
  80% {
 
421
    -webkit-transform: translateX(10px);
 
422
       -moz-transform: translateX(10px);
 
423
            transform: translateX(10px);
 
424
  }
 
425
}
 
426
/* Bounce */
 
427
@-webkit-keyframes bounce {
 
428
  0%,
 
429
  20%,
 
430
  50%,
 
431
  80%,
 
432
  100% {
 
433
    -webkit-transform: translateY(0);
 
434
            transform: translateY(0);
 
435
  }
 
436
  40% {
 
437
    -webkit-transform: translateY(-30px);
 
438
            transform: translateY(-30px);
 
439
  }
 
440
  60% {
 
441
    -webkit-transform: translateY(-15px);
 
442
            transform: translateY(-15px);
 
443
  }
 
444
}
 
445
@-moz-keyframes bounce {
 
446
  0%,
 
447
  20%,
 
448
  50%,
 
449
  80%,
 
450
  100% {
 
451
    -moz-transform: translateY(0);
 
452
         transform: translateY(0);
 
453
  }
 
454
  40% {
 
455
    -moz-transform: translateY(-30px);
 
456
         transform: translateY(-30px);
 
457
  }
 
458
  60% {
 
459
    -moz-transform: translateY(-15px);
 
460
         transform: translateY(-15px);
 
461
  }
 
462
}
 
463
@keyframes bounce {
 
464
  0%,
 
465
  20%,
 
466
  50%,
 
467
  80%,
 
468
  100% {
 
469
    -webkit-transform: translateY(0);
 
470
       -moz-transform: translateY(0);
 
471
            transform: translateY(0);
 
472
  }
 
473
  40% {
 
474
    -webkit-transform: translateY(-30px);
 
475
       -moz-transform: translateY(-30px);
 
476
            transform: translateY(-30px);
 
477
  }
 
478
  60% {
 
479
    -webkit-transform: translateY(-15px);
 
480
       -moz-transform: translateY(-15px);
 
481
            transform: translateY(-15px);
 
482
  }
 
483
}
 
484
/* Tada */
 
485
@-webkit-keyframes tada {
 
486
  0% {
 
487
    -webkit-transform: scale(1);
 
488
            transform: scale(1);
 
489
  }
 
490
  10%,
 
491
  20% {
 
492
    -webkit-transform: scale(0.9) rotate(-3deg);
 
493
            transform: scale(0.9) rotate(-3deg);
 
494
  }
 
495
  30%,
 
496
  50%,
 
497
  70%,
 
498
  90% {
 
499
    -webkit-transform: scale(1.1) rotate(3deg);
 
500
            transform: scale(1.1) rotate(3deg);
 
501
  }
 
502
  40%,
 
503
  60%,
 
504
  80% {
 
505
    -webkit-transform: scale(1.1) rotate(-3deg);
 
506
            transform: scale(1.1) rotate(-3deg);
 
507
  }
 
508
  100% {
 
509
    -webkit-transform: scale(1) rotate(0);
 
510
            transform: scale(1) rotate(0);
 
511
  }
 
512
}
 
513
@-moz-keyframes tada {
 
514
  0% {
 
515
    -moz-transform: scale(1);
 
516
         transform: scale(1);
 
517
  }
 
518
  10%,
 
519
  20% {
 
520
    -moz-transform: scale(0.9) rotate(-3deg);
 
521
         transform: scale(0.9) rotate(-3deg);
 
522
  }
 
523
  30%,
 
524
  50%,
 
525
  70%,
 
526
  90% {
 
527
    -moz-transform: scale(1.1) rotate(3deg);
 
528
         transform: scale(1.1) rotate(3deg);
 
529
  }
 
530
  40%,
 
531
  60%,
 
532
  80% {
 
533
    -moz-transform: scale(1.1) rotate(-3deg);
 
534
         transform: scale(1.1) rotate(-3deg);
 
535
  }
 
536
  100% {
 
537
    -moz-transform: scale(1) rotate(0);
 
538
         transform: scale(1) rotate(0);
 
539
  }
 
540
}
 
541
@keyframes tada {
 
542
  0% {
 
543
    -webkit-transform: scale(1);
 
544
       -moz-transform: scale(1);
 
545
            transform: scale(1);
 
546
  }
 
547
  10%,
 
548
  20% {
 
549
    -webkit-transform: scale(0.9) rotate(-3deg);
 
550
       -moz-transform: scale(0.9) rotate(-3deg);
 
551
            transform: scale(0.9) rotate(-3deg);
 
552
  }
 
553
  30%,
 
554
  50%,
 
555
  70%,
 
556
  90% {
 
557
    -webkit-transform: scale(1.1) rotate(3deg);
 
558
       -moz-transform: scale(1.1) rotate(3deg);
 
559
            transform: scale(1.1) rotate(3deg);
 
560
  }
 
561
  40%,
 
562
  60%,
 
563
  80% {
 
564
    -webkit-transform: scale(1.1) rotate(-3deg);
 
565
       -moz-transform: scale(1.1) rotate(-3deg);
 
566
            transform: scale(1.1) rotate(-3deg);
 
567
  }
 
568
  100% {
 
569
    -webkit-transform: scale(1) rotate(0);
 
570
       -moz-transform: scale(1) rotate(0);
 
571
            transform: scale(1) rotate(0);
 
572
  }
 
573
}
 
574
/* Pulse */
 
575
@-webkit-keyframes pulse {
 
576
  0% {
 
577
    -webkit-transform: scale(1);
 
578
            transform: scale(1);
 
579
    opacity: 1;
 
580
  }
 
581
  50% {
 
582
    -webkit-transform: scale(0.9);
 
583
            transform: scale(0.9);
 
584
    opacity: 0.7;
 
585
  }
 
586
  100% {
 
587
    -webkit-transform: scale(1);
 
588
            transform: scale(1);
 
589
    opacity: 1;
 
590
  }
 
591
}
 
592
@-moz-keyframes pulse {
 
593
  0% {
 
594
    -moz-transform: scale(1);
 
595
         transform: scale(1);
 
596
    opacity: 1;
 
597
  }
 
598
  50% {
 
599
    -moz-transform: scale(0.9);
 
600
         transform: scale(0.9);
 
601
    opacity: 0.7;
 
602
  }
 
603
  100% {
 
604
    -moz-transform: scale(1);
 
605
         transform: scale(1);
 
606
    opacity: 1;
 
607
  }
 
608
}
 
609
@keyframes pulse {
 
610
  0% {
 
611
    -webkit-transform: scale(1);
 
612
       -moz-transform: scale(1);
 
613
            transform: scale(1);
 
614
    opacity: 1;
 
615
  }
 
616
  50% {
 
617
    -webkit-transform: scale(0.9);
 
618
       -moz-transform: scale(0.9);
 
619
            transform: scale(0.9);
 
620
    opacity: 0.7;
 
621
  }
 
622
  100% {
 
623
    -webkit-transform: scale(1);
 
624
       -moz-transform: scale(1);
 
625
            transform: scale(1);
 
626
    opacity: 1;
 
627
  }
 
628
}
 
629
/*--------------
 
630
     Flips
 
631
---------------*/
 
632
/* Horizontal */
 
633
@-webkit-keyframes horizontalFlip {
 
634
  0% {
 
635
    -webkit-transform: rotateY(-90deg);
 
636
            transform: rotateY(-90deg);
 
637
    opacity: 0;
 
638
  }
 
639
  100% {
 
640
    -webkit-transform: rotateY(0deg);
 
641
            transform: rotateY(0deg);
 
642
    opacity: 1;
 
643
  }
 
644
}
 
645
@-moz-keyframes horizontalFlip {
 
646
  0% {
 
647
    -moz-transform: rotateY(-90deg);
 
648
         transform: rotateY(-90deg);
 
649
    opacity: 0;
 
650
  }
 
651
  100% {
 
652
    -moz-transform: rotateY(0deg);
 
653
         transform: rotateY(0deg);
 
654
    opacity: 1;
 
655
  }
 
656
}
 
657
@keyframes horizontalFlip {
 
658
  0% {
 
659
    -webkit-transform: rotateY(-90deg);
 
660
       -moz-transform: rotateY(-90deg);
 
661
            transform: rotateY(-90deg);
 
662
    opacity: 0;
 
663
  }
 
664
  100% {
 
665
    -webkit-transform: rotateY(0deg);
 
666
       -moz-transform: rotateY(0deg);
 
667
            transform: rotateY(0deg);
 
668
    opacity: 1;
 
669
  }
 
670
}
 
671
/* Horizontal */
 
672
@-webkit-keyframes horizontalFlipOut {
 
673
  0% {
 
674
    -webkit-transform: rotateY(0deg);
 
675
            transform: rotateY(0deg);
 
676
    opacity: 1;
 
677
  }
 
678
  100% {
 
679
    -webkit-transform: rotateY(90deg);
 
680
            transform: rotateY(90deg);
 
681
    opacity: 0;
 
682
  }
 
683
}
 
684
@-moz-keyframes horizontalFlipOut {
 
685
  0% {
 
686
    -moz-transform: rotateY(0deg);
 
687
         transform: rotateY(0deg);
 
688
    opacity: 1;
 
689
  }
 
690
  100% {
 
691
    -moz-transform: rotateY(90deg);
 
692
         transform: rotateY(90deg);
 
693
    opacity: 0;
 
694
  }
 
695
}
 
696
@keyframes horizontalFlipOut {
 
697
  0% {
 
698
    -webkit-transform: rotateY(0deg);
 
699
       -moz-transform: rotateY(0deg);
 
700
            transform: rotateY(0deg);
 
701
    opacity: 1;
 
702
  }
 
703
  100% {
 
704
    -webkit-transform: rotateY(90deg);
 
705
       -moz-transform: rotateY(90deg);
 
706
            transform: rotateY(90deg);
 
707
    opacity: 0;
 
708
  }
 
709
}
 
710
/* Vertical */
 
711
@-webkit-keyframes verticalFlip {
 
712
  0% {
 
713
    -webkit-transform: rotateX(-90deg);
 
714
            transform: rotateX(-90deg);
 
715
    opacity: 0;
 
716
  }
 
717
  100% {
 
718
    -webkit-transform: rotateX(0deg);
 
719
            transform: rotateX(0deg);
 
720
    opacity: 1;
 
721
  }
 
722
}
 
723
@-moz-keyframes verticalFlip {
 
724
  0% {
 
725
    -moz-transform: rotateX(-90deg);
 
726
         transform: rotateX(-90deg);
 
727
    opacity: 0;
 
728
  }
 
729
  100% {
 
730
    -moz-transform: rotateX(0deg);
 
731
         transform: rotateX(0deg);
 
732
    opacity: 1;
 
733
  }
 
734
}
 
735
@keyframes verticalFlip {
 
736
  0% {
 
737
    -webkit-transform: rotateX(-90deg);
 
738
       -moz-transform: rotateX(-90deg);
 
739
            transform: rotateX(-90deg);
 
740
    opacity: 0;
 
741
  }
 
742
  100% {
 
743
    -webkit-transform: rotateX(0deg);
 
744
       -moz-transform: rotateX(0deg);
 
745
            transform: rotateX(0deg);
 
746
    opacity: 1;
 
747
  }
 
748
}
 
749
@-webkit-keyframes verticalFlipOut {
 
750
  0% {
 
751
    -webkit-transform: rotateX(0deg);
 
752
            transform: rotateX(0deg);
 
753
    opacity: 1;
 
754
  }
 
755
  100% {
 
756
    -webkit-transform: rotateX(-90deg);
 
757
            transform: rotateX(-90deg);
 
758
    opacity: 0;
 
759
  }
 
760
}
 
761
@-moz-keyframes verticalFlipOut {
 
762
  0% {
 
763
    -moz-transform: rotateX(0deg);
 
764
         transform: rotateX(0deg);
 
765
    opacity: 1;
 
766
  }
 
767
  100% {
 
768
    -moz-transform: rotateX(-90deg);
 
769
         transform: rotateX(-90deg);
 
770
    opacity: 0;
 
771
  }
 
772
}
 
773
@keyframes verticalFlipOut {
 
774
  0% {
 
775
    -webkit-transform: rotateX(0deg);
 
776
       -moz-transform: rotateX(0deg);
 
777
            transform: rotateX(0deg);
 
778
    opacity: 1;
 
779
  }
 
780
  100% {
 
781
    -webkit-transform: rotateX(-90deg);
 
782
       -moz-transform: rotateX(-90deg);
 
783
            transform: rotateX(-90deg);
 
784
    opacity: 0;
 
785
  }
 
786
}
 
787
/*--------------
 
788
     Fades
 
789
---------------*/
 
790
/* Fade */
 
791
@-webkit-keyframes fade {
 
792
  0% {
 
793
    opacity: 0;
 
794
  }
 
795
  100% {
 
796
    opacity: 1;
 
797
  }
 
798
}
 
799
@-moz-keyframes fade {
 
800
  0% {
 
801
    opacity: 0;
 
802
  }
 
803
  100% {
 
804
    opacity: 1;
 
805
  }
 
806
}
 
807
@keyframes fade {
 
808
  0% {
 
809
    opacity: 0;
 
810
  }
 
811
  100% {
 
812
    opacity: 1;
 
813
  }
 
814
}
 
815
@-webkit-keyframes fadeOut {
 
816
  0% {
 
817
    opacity: 1;
 
818
  }
 
819
  100% {
 
820
    opacity: 0;
 
821
  }
 
822
}
 
823
@-moz-keyframes fadeOut {
 
824
  0% {
 
825
    opacity: 1;
 
826
  }
 
827
  100% {
 
828
    opacity: 0;
 
829
  }
 
830
}
 
831
@keyframes fadeOut {
 
832
  0% {
 
833
    opacity: 1;
 
834
  }
 
835
  100% {
 
836
    opacity: 0;
 
837
  }
 
838
}
 
839
/* Fade Up */
 
840
@-webkit-keyframes fadeUp {
 
841
  0% {
 
842
    opacity: 0;
 
843
    -webkit-transform: translateY(20px);
 
844
            transform: translateY(20px);
 
845
  }
 
846
  100% {
 
847
    opacity: 1;
 
848
    -webkit-transform: translateY(0);
 
849
            transform: translateY(0);
 
850
  }
 
851
}
 
852
@-moz-keyframes fadeUp {
 
853
  0% {
 
854
    opacity: 0;
 
855
    -moz-transform: translateY(20px);
 
856
         transform: translateY(20px);
 
857
  }
 
858
  100% {
 
859
    opacity: 1;
 
860
    -moz-transform: translateY(0);
 
861
         transform: translateY(0);
 
862
  }
 
863
}
 
864
@keyframes fadeUp {
 
865
  0% {
 
866
    opacity: 0;
 
867
    -webkit-transform: translateY(20px);
 
868
       -moz-transform: translateY(20px);
 
869
            transform: translateY(20px);
 
870
  }
 
871
  100% {
 
872
    opacity: 1;
 
873
    -webkit-transform: translateY(0);
 
874
       -moz-transform: translateY(0);
 
875
            transform: translateY(0);
 
876
  }
 
877
}
 
878
@-webkit-keyframes fadeUpOut {
 
879
  0% {
 
880
    opacity: 1;
 
881
    -webkit-transform: translateY(0);
 
882
            transform: translateY(0);
 
883
  }
 
884
  100% {
 
885
    opacity: 0;
 
886
    -webkit-transform: translateY(20px);
 
887
            transform: translateY(20px);
 
888
  }
 
889
}
 
890
@-moz-keyframes fadeUpOut {
 
891
  0% {
 
892
    opacity: 1;
 
893
    -moz-transform: translateY(0);
 
894
         transform: translateY(0);
 
895
  }
 
896
  100% {
 
897
    opacity: 0;
 
898
    -moz-transform: translateY(20px);
 
899
         transform: translateY(20px);
 
900
  }
 
901
}
 
902
@keyframes fadeUpOut {
 
903
  0% {
 
904
    opacity: 1;
 
905
    -webkit-transform: translateY(0);
 
906
       -moz-transform: translateY(0);
 
907
            transform: translateY(0);
 
908
  }
 
909
  100% {
 
910
    opacity: 0;
 
911
    -webkit-transform: translateY(20px);
 
912
       -moz-transform: translateY(20px);
 
913
            transform: translateY(20px);
 
914
  }
 
915
}
 
916
/* Fade Down */
 
917
@-webkit-keyframes fadeDown {
 
918
  0% {
 
919
    opacity: 0;
 
920
    -webkit-transform: translateY(-20px);
 
921
            transform: translateY(-20px);
 
922
  }
 
923
  100% {
 
924
    opacity: 1;
 
925
    -webkit-transform: translateY(0);
 
926
            transform: translateY(0);
 
927
  }
 
928
}
 
929
@-moz-keyframes fadeDown {
 
930
  0% {
 
931
    opacity: 0;
 
932
    -moz-transform: translateY(-20px);
 
933
         transform: translateY(-20px);
 
934
  }
 
935
  100% {
 
936
    opacity: 1;
 
937
    -moz-transform: translateY(0);
 
938
         transform: translateY(0);
 
939
  }
 
940
}
 
941
@keyframes fadeDown {
 
942
  0% {
 
943
    opacity: 0;
 
944
    -webkit-transform: translateY(-20px);
 
945
       -moz-transform: translateY(-20px);
 
946
            transform: translateY(-20px);
 
947
  }
 
948
  100% {
 
949
    opacity: 1;
 
950
    -webkit-transform: translateY(0);
 
951
       -moz-transform: translateY(0);
 
952
            transform: translateY(0);
 
953
  }
 
954
}
 
955
@-webkit-keyframes fadeDownOut {
 
956
  0% {
 
957
    opacity: 1;
 
958
    -webkit-transform: translateY(0);
 
959
            transform: translateY(0);
 
960
  }
 
961
  100% {
 
962
    opacity: 0;
 
963
    -webkit-transform: translateY(-20px);
 
964
            transform: translateY(-20px);
 
965
  }
 
966
}
 
967
@-moz-keyframes fadeDownOut {
 
968
  0% {
 
969
    opacity: 1;
 
970
    -moz-transform: translateY(0);
 
971
         transform: translateY(0);
 
972
  }
 
973
  100% {
 
974
    opacity: 0;
 
975
    -moz-transform: translateY(-20px);
 
976
         transform: translateY(-20px);
 
977
  }
 
978
}
 
979
@keyframes fadeDownOut {
 
980
  0% {
 
981
    opacity: 1;
 
982
    -webkit-transform: translateY(0);
 
983
       -moz-transform: translateY(0);
 
984
            transform: translateY(0);
 
985
  }
 
986
  100% {
 
987
    opacity: 0;
 
988
    -webkit-transform: translateY(-20px);
 
989
       -moz-transform: translateY(-20px);
 
990
            transform: translateY(-20px);
 
991
  }
 
992
}
 
993
/* Fade Left */
 
994
@-webkit-keyframes fadeLeft {
 
995
  0% {
 
996
    opacity: 0;
 
997
    -webkit-transform: translateX(-20px);
 
998
            transform: translateX(-20px);
 
999
  }
 
1000
  100% {
 
1001
    opacity: 1;
 
1002
    -webkit-transform: translateX(0);
 
1003
            transform: translateX(0);
 
1004
  }
 
1005
}
 
1006
@-moz-keyframes fadeLeft {
 
1007
  0% {
 
1008
    opacity: 0;
 
1009
    -moz-transform: translateX(-20px);
 
1010
         transform: translateX(-20px);
 
1011
  }
 
1012
  100% {
 
1013
    opacity: 1;
 
1014
    -moz-transform: translateX(0);
 
1015
         transform: translateX(0);
 
1016
  }
 
1017
}
 
1018
@keyframes fadeLeft {
 
1019
  0% {
 
1020
    opacity: 0;
 
1021
    -webkit-transform: translateX(-20px);
 
1022
       -moz-transform: translateX(-20px);
 
1023
            transform: translateX(-20px);
 
1024
  }
 
1025
  100% {
 
1026
    opacity: 1;
 
1027
    -webkit-transform: translateX(0);
 
1028
       -moz-transform: translateX(0);
 
1029
            transform: translateX(0);
 
1030
  }
 
1031
}
 
1032
@-webkit-keyframes fadeLeftOut {
 
1033
  0% {
 
1034
    opacity: 1;
 
1035
    -webkit-transform: translateX(0);
 
1036
            transform: translateX(0);
 
1037
  }
 
1038
  100% {
 
1039
    opacity: 0;
 
1040
    -webkit-transform: translateX(-20px);
 
1041
            transform: translateX(-20px);
 
1042
  }
 
1043
}
 
1044
@-moz-keyframes fadeLeftOut {
 
1045
  0% {
 
1046
    opacity: 1;
 
1047
    -moz-transform: translateX(0);
 
1048
         transform: translateX(0);
 
1049
  }
 
1050
  100% {
 
1051
    opacity: 0;
 
1052
    -moz-transform: translateX(-20px);
 
1053
         transform: translateX(-20px);
 
1054
  }
 
1055
}
 
1056
@keyframes fadeLeftOut {
 
1057
  0% {
 
1058
    opacity: 1;
 
1059
    -webkit-transform: translateX(0);
 
1060
       -moz-transform: translateX(0);
 
1061
            transform: translateX(0);
 
1062
  }
 
1063
  100% {
 
1064
    opacity: 0;
 
1065
    -webkit-transform: translateX(-20px);
 
1066
       -moz-transform: translateX(-20px);
 
1067
            transform: translateX(-20px);
 
1068
  }
 
1069
}
 
1070
/* Fade Right */
 
1071
@-webkit-keyframes fadeRight {
 
1072
  0% {
 
1073
    opacity: 0;
 
1074
    -webkit-transform: translateX(20px);
 
1075
            transform: translateX(20px);
 
1076
  }
 
1077
  100% {
 
1078
    opacity: 1;
 
1079
    -webkit-transform: translateX(0);
 
1080
            transform: translateX(0);
 
1081
  }
 
1082
}
 
1083
@-moz-keyframes fadeRight {
 
1084
  0% {
 
1085
    opacity: 0;
 
1086
    -moz-transform: translateX(20px);
 
1087
         transform: translateX(20px);
 
1088
  }
 
1089
  100% {
 
1090
    opacity: 1;
 
1091
    -moz-transform: translateX(0);
 
1092
         transform: translateX(0);
 
1093
  }
 
1094
}
 
1095
@keyframes fadeRight {
 
1096
  0% {
 
1097
    opacity: 0;
 
1098
    -webkit-transform: translateX(20px);
 
1099
       -moz-transform: translateX(20px);
 
1100
            transform: translateX(20px);
 
1101
  }
 
1102
  100% {
 
1103
    opacity: 1;
 
1104
    -webkit-transform: translateX(0);
 
1105
       -moz-transform: translateX(0);
 
1106
            transform: translateX(0);
 
1107
  }
 
1108
}
 
1109
@-webkit-keyframes fadeRightOut {
 
1110
  0% {
 
1111
    opacity: 1;
 
1112
    -webkit-transform: translateX(0);
 
1113
            transform: translateX(0);
 
1114
  }
 
1115
  100% {
 
1116
    opacity: 0;
 
1117
    -webkit-transform: translateX(20px);
 
1118
            transform: translateX(20px);
 
1119
  }
 
1120
}
 
1121
@-moz-keyframes fadeRightOut {
 
1122
  0% {
 
1123
    opacity: 1;
 
1124
    -moz-transform: translateX(0);
 
1125
         transform: translateX(0);
 
1126
  }
 
1127
  100% {
 
1128
    opacity: 0;
 
1129
    -moz-transform: translateX(20px);
 
1130
         transform: translateX(20px);
 
1131
  }
 
1132
}
 
1133
@keyframes fadeRightOut {
 
1134
  0% {
 
1135
    opacity: 1;
 
1136
    -webkit-transform: translateX(0);
 
1137
       -moz-transform: translateX(0);
 
1138
            transform: translateX(0);
 
1139
  }
 
1140
  100% {
 
1141
    opacity: 0;
 
1142
    -webkit-transform: translateX(20px);
 
1143
       -moz-transform: translateX(20px);
 
1144
            transform: translateX(20px);
 
1145
  }
 
1146
}
 
1147
/*--------------
 
1148
      Scale
 
1149
---------------*/
 
1150
/* Scale */
 
1151
@-webkit-keyframes scale {
 
1152
  0% {
 
1153
    opacity: 0;
 
1154
    -webkit-transform: scale(0.7);
 
1155
            transform: scale(0.7);
 
1156
  }
 
1157
  100% {
 
1158
    opacity: 1;
 
1159
    -webkit-transform: scale(1);
 
1160
            transform: scale(1);
 
1161
  }
 
1162
}
 
1163
@-moz-keyframes scale {
 
1164
  0% {
 
1165
    opacity: 0;
 
1166
    -moz-transform: scale(0.7);
 
1167
         transform: scale(0.7);
 
1168
  }
 
1169
  100% {
 
1170
    opacity: 1;
 
1171
    -moz-transform: scale(1);
 
1172
         transform: scale(1);
 
1173
  }
 
1174
}
 
1175
@keyframes scale {
 
1176
  0% {
 
1177
    opacity: 0;
 
1178
    -webkit-transform: scale(0.7);
 
1179
       -moz-transform: scale(0.7);
 
1180
            transform: scale(0.7);
 
1181
  }
 
1182
  100% {
 
1183
    opacity: 1;
 
1184
    -webkit-transform: scale(1);
 
1185
       -moz-transform: scale(1);
 
1186
            transform: scale(1);
 
1187
  }
 
1188
}
 
1189
@-webkit-keyframes scaleOut {
 
1190
  0% {
 
1191
    opacity: 1;
 
1192
    -webkit-transform: scale(1);
 
1193
            transform: scale(1);
 
1194
  }
 
1195
  100% {
 
1196
    opacity: 0;
 
1197
    -webkit-transform: scale(0.7);
 
1198
            transform: scale(0.7);
 
1199
  }
 
1200
}
 
1201
@-moz-keyframes scaleOut {
 
1202
  0% {
 
1203
    opacity: 1;
 
1204
    -moz-transform: scale(1);
 
1205
         transform: scale(1);
 
1206
  }
 
1207
  100% {
 
1208
    opacity: 0;
 
1209
    -moz-transform: scale(0.7);
 
1210
         transform: scale(0.7);
 
1211
  }
 
1212
}
 
1213
@keyframes scaleOut {
 
1214
  0% {
 
1215
    opacity: 1;
 
1216
    -webkit-transform: scale(1);
 
1217
       -moz-transform: scale(1);
 
1218
            transform: scale(1);
 
1219
  }
 
1220
  100% {
 
1221
    opacity: 0;
 
1222
    -webkit-transform: scale(0.7);
 
1223
       -moz-transform: scale(0.7);
 
1224
            transform: scale(0.7);
 
1225
  }
 
1226
}