Browse Source

add back semantic transition

tags/v1.6.0
Morgan Bazalgette 2 years ago
parent
commit
87a67feeb9
Signed by: Morgan Bazalgette <the@howl.moe> GPG Key ID: 40D328300D245DA5

+ 1
- 0
semantic.json View File

@@ -59,6 +59,7 @@
59 59
     "sidebar",
60 60
     "tab",
61 61
     "form",
62
+    "transition",
62 63
     "state"
63 64
   ],
64 65
   "version": "2.2.6"

+ 1964
- 0
static/components/transition.css View File

@@ -0,0 +1,1964 @@
1
+/*!
2
+ * # Semantic UI 2.2.6 - Transition
3
+ * http://github.com/semantic-org/semantic-ui/
4
+ *
5
+ *
6
+ * Released under the MIT license
7
+ * http://opensource.org/licenses/MIT
8
+ *
9
+ */
10
+
11
+
12
+/*******************************
13
+          Transitions
14
+*******************************/
15
+
16
+.transition {
17
+  -webkit-animation-iteration-count: 1;
18
+          animation-iteration-count: 1;
19
+  -webkit-animation-duration: 300ms;
20
+          animation-duration: 300ms;
21
+  -webkit-animation-timing-function: ease;
22
+          animation-timing-function: ease;
23
+  -webkit-animation-fill-mode: both;
24
+          animation-fill-mode: both;
25
+}
26
+
27
+
28
+/*******************************
29
+            States
30
+*******************************/
31
+
32
+
33
+/* Animating */
34
+.animating.transition {
35
+  -webkit-backface-visibility: hidden;
36
+          backface-visibility: hidden;
37
+  visibility: visible !important;
38
+}
39
+
40
+/* Loading */
41
+.loading.transition {
42
+  position: absolute;
43
+  top: -99999px;
44
+  left: -99999px;
45
+}
46
+
47
+/* Hidden */
48
+.hidden.transition {
49
+  display: none;
50
+  visibility: hidden;
51
+}
52
+
53
+/* Visible */
54
+.visible.transition {
55
+  display: block !important;
56
+  visibility: visible !important;
57
+  
58
+/*  backface-visibility: @backfaceVisibility;
59
+  transform: @use3DAcceleration;*/
60
+}
61
+/* Disabled */
62
+.disabled.transition {
63
+  -webkit-animation-play-state: paused;
64
+          animation-play-state: paused;
65
+}
66
+
67
+
68
+/*******************************
69
+          Variations
70
+*******************************/
71
+
72
+.looping.transition {
73
+  -webkit-animation-iteration-count: infinite;
74
+          animation-iteration-count: infinite;
75
+}
76
+
77
+
78
+/*******************************
79
+          Transitions
80
+*******************************/
81
+
82
+/*
83
+  Some transitions adapted from Animate CSS
84
+  https://github.com/daneden/animate.css
85
+
86
+  Additional transitions adapted from Glide
87
+  by Nick Pettit - https://github.com/nickpettit/glide
88
+*/
89
+
90
+/*--------------
91
+     Browse
92
+---------------*/
93
+
94
+.transition.browse {
95
+  -webkit-animation-duration: 500ms;
96
+          animation-duration: 500ms;
97
+}
98
+.transition.browse.in {
99
+  -webkit-animation-name: browseIn;
100
+          animation-name: browseIn;
101
+}
102
+.transition.browse.out,
103
+.transition.browse.left.out {
104
+  -webkit-animation-name: browseOutLeft;
105
+          animation-name: browseOutLeft;
106
+}
107
+.transition.browse.right.out {
108
+  -webkit-animation-name: browseOutRight;
109
+          animation-name: browseOutRight;
110
+}
111
+
112
+/* In */
113
+@-webkit-keyframes browseIn {
114
+  0% {
115
+    -webkit-transform: scale(0.8) translateZ(0px);
116
+            transform: scale(0.8) translateZ(0px);
117
+    z-index: -1;
118
+  }
119
+  10% {
120
+    -webkit-transform: scale(0.8) translateZ(0px);
121
+            transform: scale(0.8) translateZ(0px);
122
+    z-index: -1;
123
+    opacity: 0.7;
124
+  }
125
+  80% {
126
+    -webkit-transform: scale(1.05) translateZ(0px);
127
+            transform: scale(1.05) translateZ(0px);
128
+    opacity: 1;
129
+    z-index: 999;
130
+  }
131
+  100% {
132
+    -webkit-transform: scale(1) translateZ(0px);
133
+            transform: scale(1) translateZ(0px);
134
+    z-index: 999;
135
+  }
136
+}
137
+@keyframes browseIn {
138
+  0% {
139
+    -webkit-transform: scale(0.8) translateZ(0px);
140
+            transform: scale(0.8) translateZ(0px);
141
+    z-index: -1;
142
+  }
143
+  10% {
144
+    -webkit-transform: scale(0.8) translateZ(0px);
145
+            transform: scale(0.8) translateZ(0px);
146
+    z-index: -1;
147
+    opacity: 0.7;
148
+  }
149
+  80% {
150
+    -webkit-transform: scale(1.05) translateZ(0px);
151
+            transform: scale(1.05) translateZ(0px);
152
+    opacity: 1;
153
+    z-index: 999;
154
+  }
155
+  100% {
156
+    -webkit-transform: scale(1) translateZ(0px);
157
+            transform: scale(1) translateZ(0px);
158
+    z-index: 999;
159
+  }
160
+}
161
+
162
+/* Out */
163
+@-webkit-keyframes browseOutLeft {
164
+  0% {
165
+    z-index: 999;
166
+    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
167
+            transform: translateX(0%) rotateY(0deg) rotateX(0deg);
168
+  }
169
+  50% {
170
+    z-index: -1;
171
+    -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
172
+            transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
173
+  }
174
+  80% {
175
+    opacity: 1;
176
+  }
177
+  100% {
178
+    z-index: -1;
179
+    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
180
+            transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
181
+    opacity: 0;
182
+  }
183
+}
184
+@keyframes browseOutLeft {
185
+  0% {
186
+    z-index: 999;
187
+    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
188
+            transform: translateX(0%) rotateY(0deg) rotateX(0deg);
189
+  }
190
+  50% {
191
+    z-index: -1;
192
+    -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
193
+            transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
194
+  }
195
+  80% {
196
+    opacity: 1;
197
+  }
198
+  100% {
199
+    z-index: -1;
200
+    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
201
+            transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
202
+    opacity: 0;
203
+  }
204
+}
205
+@-webkit-keyframes browseOutRight {
206
+  0% {
207
+    z-index: 999;
208
+    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
209
+            transform: translateX(0%) rotateY(0deg) rotateX(0deg);
210
+  }
211
+  50% {
212
+    z-index: 1;
213
+    -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
214
+            transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
215
+  }
216
+  80% {
217
+    opacity: 1;
218
+  }
219
+  100% {
220
+    z-index: 1;
221
+    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
222
+            transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
223
+    opacity: 0;
224
+  }
225
+}
226
+@keyframes browseOutRight {
227
+  0% {
228
+    z-index: 999;
229
+    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
230
+            transform: translateX(0%) rotateY(0deg) rotateX(0deg);
231
+  }
232
+  50% {
233
+    z-index: 1;
234
+    -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
235
+            transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
236
+  }
237
+  80% {
238
+    opacity: 1;
239
+  }
240
+  100% {
241
+    z-index: 1;
242
+    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
243
+            transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
244
+    opacity: 0;
245
+  }
246
+}
247
+
248
+/*--------------
249
+     Drop
250
+---------------*/
251
+
252
+.drop.transition {
253
+  -webkit-transform-origin: top center;
254
+          transform-origin: top center;
255
+  -webkit-animation-duration: 400ms;
256
+          animation-duration: 400ms;
257
+  -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
258
+          animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
259
+}
260
+.drop.transition.in {
261
+  -webkit-animation-name: dropIn;
262
+          animation-name: dropIn;
263
+}
264
+.drop.transition.out {
265
+  -webkit-animation-name: dropOut;
266
+          animation-name: dropOut;
267
+}
268
+
269
+/* Drop */
270
+@-webkit-keyframes dropIn {
271
+  0% {
272
+    opacity: 0;
273
+    -webkit-transform: scale(0);
274
+            transform: scale(0);
275
+  }
276
+  100% {
277
+    opacity: 1;
278
+    -webkit-transform: scale(1);
279
+            transform: scale(1);
280
+  }
281
+}
282
+@keyframes dropIn {
283
+  0% {
284
+    opacity: 0;
285
+    -webkit-transform: scale(0);
286
+            transform: scale(0);
287
+  }
288
+  100% {
289
+    opacity: 1;
290
+    -webkit-transform: scale(1);
291
+            transform: scale(1);
292
+  }
293
+}
294
+@-webkit-keyframes dropOut {
295
+  0% {
296
+    opacity: 1;
297
+    -webkit-transform: scale(1);
298
+            transform: scale(1);
299
+  }
300
+  100% {
301
+    opacity: 0;
302
+    -webkit-transform: scale(0);
303
+            transform: scale(0);
304
+  }
305
+}
306
+@keyframes dropOut {
307
+  0% {
308
+    opacity: 1;
309
+    -webkit-transform: scale(1);
310
+            transform: scale(1);
311
+  }
312
+  100% {
313
+    opacity: 0;
314
+    -webkit-transform: scale(0);
315
+            transform: scale(0);
316
+  }
317
+}
318
+
319
+/*--------------
320
+      Fade
321
+---------------*/
322
+
323
+.transition.fade.in {
324
+  -webkit-animation-name: fadeIn;
325
+          animation-name: fadeIn;
326
+}
327
+.transition[class*="fade up"].in {
328
+  -webkit-animation-name: fadeInUp;
329
+          animation-name: fadeInUp;
330
+}
331
+.transition[class*="fade down"].in {
332
+  -webkit-animation-name: fadeInDown;
333
+          animation-name: fadeInDown;
334
+}
335
+.transition[class*="fade left"].in {
336
+  -webkit-animation-name: fadeInLeft;
337
+          animation-name: fadeInLeft;
338
+}
339
+.transition[class*="fade right"].in {
340
+  -webkit-animation-name: fadeInRight;
341
+          animation-name: fadeInRight;
342
+}
343
+.transition.fade.out {
344
+  -webkit-animation-name: fadeOut;
345
+          animation-name: fadeOut;
346
+}
347
+.transition[class*="fade up"].out {
348
+  -webkit-animation-name: fadeOutUp;
349
+          animation-name: fadeOutUp;
350
+}
351
+.transition[class*="fade down"].out {
352
+  -webkit-animation-name: fadeOutDown;
353
+          animation-name: fadeOutDown;
354
+}
355
+.transition[class*="fade left"].out {
356
+  -webkit-animation-name: fadeOutLeft;
357
+          animation-name: fadeOutLeft;
358
+}
359
+.transition[class*="fade right"].out {
360
+  -webkit-animation-name: fadeOutRight;
361
+          animation-name: fadeOutRight;
362
+}
363
+
364
+/* In */
365
+@-webkit-keyframes fadeIn {
366
+  0% {
367
+    opacity: 0;
368
+  }
369
+  100% {
370
+    opacity: 1;
371
+  }
372
+}
373
+@keyframes fadeIn {
374
+  0% {
375
+    opacity: 0;
376
+  }
377
+  100% {
378
+    opacity: 1;
379
+  }
380
+}
381
+@-webkit-keyframes fadeInUp {
382
+  0% {
383
+    opacity: 0;
384
+    -webkit-transform: translateY(10%);
385
+            transform: translateY(10%);
386
+  }
387
+  100% {
388
+    opacity: 1;
389
+    -webkit-transform: translateY(0%);
390
+            transform: translateY(0%);
391
+  }
392
+}
393
+@keyframes fadeInUp {
394
+  0% {
395
+    opacity: 0;
396
+    -webkit-transform: translateY(10%);
397
+            transform: translateY(10%);
398
+  }
399
+  100% {
400
+    opacity: 1;
401
+    -webkit-transform: translateY(0%);
402
+            transform: translateY(0%);
403
+  }
404
+}
405
+@-webkit-keyframes fadeInDown {
406
+  0% {
407
+    opacity: 0;
408
+    -webkit-transform: translateY(-10%);
409
+            transform: translateY(-10%);
410
+  }
411
+  100% {
412
+    opacity: 1;
413
+    -webkit-transform: translateY(0%);
414
+            transform: translateY(0%);
415
+  }
416
+}
417
+@keyframes fadeInDown {
418
+  0% {
419
+    opacity: 0;
420
+    -webkit-transform: translateY(-10%);
421
+            transform: translateY(-10%);
422
+  }
423
+  100% {
424
+    opacity: 1;
425
+    -webkit-transform: translateY(0%);
426
+            transform: translateY(0%);
427
+  }
428
+}
429
+@-webkit-keyframes fadeInLeft {
430
+  0% {
431
+    opacity: 0;
432
+    -webkit-transform: translateX(10%);
433
+            transform: translateX(10%);
434
+  }
435
+  100% {
436
+    opacity: 1;
437
+    -webkit-transform: translateX(0%);
438
+            transform: translateX(0%);
439
+  }
440
+}
441
+@keyframes fadeInLeft {
442
+  0% {
443
+    opacity: 0;
444
+    -webkit-transform: translateX(10%);
445
+            transform: translateX(10%);
446
+  }
447
+  100% {
448
+    opacity: 1;
449
+    -webkit-transform: translateX(0%);
450
+            transform: translateX(0%);
451
+  }
452
+}
453
+@-webkit-keyframes fadeInRight {
454
+  0% {
455
+    opacity: 0;
456
+    -webkit-transform: translateX(-10%);
457
+            transform: translateX(-10%);
458
+  }
459
+  100% {
460
+    opacity: 1;
461
+    -webkit-transform: translateX(0%);
462
+            transform: translateX(0%);
463
+  }
464
+}
465
+@keyframes fadeInRight {
466
+  0% {
467
+    opacity: 0;
468
+    -webkit-transform: translateX(-10%);
469
+            transform: translateX(-10%);
470
+  }
471
+  100% {
472
+    opacity: 1;
473
+    -webkit-transform: translateX(0%);
474
+            transform: translateX(0%);
475
+  }
476
+}
477
+
478
+/* Out */
479
+@-webkit-keyframes fadeOut {
480
+  0% {
481
+    opacity: 1;
482
+  }
483
+  100% {
484
+    opacity: 0;
485
+  }
486
+}
487
+@keyframes fadeOut {
488
+  0% {
489
+    opacity: 1;
490
+  }
491
+  100% {
492
+    opacity: 0;
493
+  }
494
+}
495
+@-webkit-keyframes fadeOutUp {
496
+  0% {
497
+    opacity: 1;
498
+    -webkit-transform: translateY(0%);
499
+            transform: translateY(0%);
500
+  }
501
+  100% {
502
+    opacity: 0;
503
+    -webkit-transform: translateY(5%);
504
+            transform: translateY(5%);
505
+  }
506
+}
507
+@keyframes fadeOutUp {
508
+  0% {
509
+    opacity: 1;
510
+    -webkit-transform: translateY(0%);
511
+            transform: translateY(0%);
512
+  }
513
+  100% {
514
+    opacity: 0;
515
+    -webkit-transform: translateY(5%);
516
+            transform: translateY(5%);
517
+  }
518
+}
519
+@-webkit-keyframes fadeOutDown {
520
+  0% {
521
+    opacity: 1;
522
+    -webkit-transform: translateY(0%);
523
+            transform: translateY(0%);
524
+  }
525
+  100% {
526
+    opacity: 0;
527
+    -webkit-transform: translateY(-5%);
528
+            transform: translateY(-5%);
529
+  }
530
+}
531
+@keyframes fadeOutDown {
532
+  0% {
533
+    opacity: 1;
534
+    -webkit-transform: translateY(0%);
535
+            transform: translateY(0%);
536
+  }
537
+  100% {
538
+    opacity: 0;
539
+    -webkit-transform: translateY(-5%);
540
+            transform: translateY(-5%);
541
+  }
542
+}
543
+@-webkit-keyframes fadeOutLeft {
544
+  0% {
545
+    opacity: 1;
546
+    -webkit-transform: translateX(0%);
547
+            transform: translateX(0%);
548
+  }
549
+  100% {
550
+    opacity: 0;
551
+    -webkit-transform: translateX(5%);
552
+            transform: translateX(5%);
553
+  }
554
+}
555
+@keyframes fadeOutLeft {
556
+  0% {
557
+    opacity: 1;
558
+    -webkit-transform: translateX(0%);
559
+            transform: translateX(0%);
560
+  }
561
+  100% {
562
+    opacity: 0;
563
+    -webkit-transform: translateX(5%);
564
+            transform: translateX(5%);
565
+  }
566
+}
567
+@-webkit-keyframes fadeOutRight {
568
+  0% {
569
+    opacity: 1;
570
+    -webkit-transform: translateX(0%);
571
+            transform: translateX(0%);
572
+  }
573
+  100% {
574
+    opacity: 0;
575
+    -webkit-transform: translateX(-5%);
576
+            transform: translateX(-5%);
577
+  }
578
+}
579
+@keyframes fadeOutRight {
580
+  0% {
581
+    opacity: 1;
582
+    -webkit-transform: translateX(0%);
583
+            transform: translateX(0%);
584
+  }
585
+  100% {
586
+    opacity: 0;
587
+    -webkit-transform: translateX(-5%);
588
+            transform: translateX(-5%);
589
+  }
590
+}
591
+
592
+/*--------------
593
+     Flips
594
+---------------*/
595
+
596
+.flip.transition.in,
597
+.flip.transition.out {
598
+  -webkit-animation-duration: 600ms;
599
+          animation-duration: 600ms;
600
+}
601
+.horizontal.flip.transition.in {
602
+  -webkit-animation-name: horizontalFlipIn;
603
+          animation-name: horizontalFlipIn;
604
+}
605
+.horizontal.flip.transition.out {
606
+  -webkit-animation-name: horizontalFlipOut;
607
+          animation-name: horizontalFlipOut;
608
+}
609
+.vertical.flip.transition.in {
610
+  -webkit-animation-name: verticalFlipIn;
611
+          animation-name: verticalFlipIn;
612
+}
613
+.vertical.flip.transition.out {
614
+  -webkit-animation-name: verticalFlipOut;
615
+          animation-name: verticalFlipOut;
616
+}
617
+
618
+/* In */
619
+@-webkit-keyframes horizontalFlipIn {
620
+  0% {
621
+    -webkit-transform: perspective(2000px) rotateY(-90deg);
622
+            transform: perspective(2000px) rotateY(-90deg);
623
+    opacity: 0;
624
+  }
625
+  100% {
626
+    -webkit-transform: perspective(2000px) rotateY(0deg);
627
+            transform: perspective(2000px) rotateY(0deg);
628
+    opacity: 1;
629
+  }
630
+}
631
+@keyframes horizontalFlipIn {
632
+  0% {
633
+    -webkit-transform: perspective(2000px) rotateY(-90deg);
634
+            transform: perspective(2000px) rotateY(-90deg);
635
+    opacity: 0;
636
+  }
637
+  100% {
638
+    -webkit-transform: perspective(2000px) rotateY(0deg);
639
+            transform: perspective(2000px) rotateY(0deg);
640
+    opacity: 1;
641
+  }
642
+}
643
+@-webkit-keyframes verticalFlipIn {
644
+  0% {
645
+    -webkit-transform: perspective(2000px) rotateX(-90deg);
646
+            transform: perspective(2000px) rotateX(-90deg);
647
+    opacity: 0;
648
+  }
649
+  100% {
650
+    -webkit-transform: perspective(2000px) rotateX(0deg);
651
+            transform: perspective(2000px) rotateX(0deg);
652
+    opacity: 1;
653
+  }
654
+}
655
+@keyframes verticalFlipIn {
656
+  0% {
657
+    -webkit-transform: perspective(2000px) rotateX(-90deg);
658
+            transform: perspective(2000px) rotateX(-90deg);
659
+    opacity: 0;
660
+  }
661
+  100% {
662
+    -webkit-transform: perspective(2000px) rotateX(0deg);
663
+            transform: perspective(2000px) rotateX(0deg);
664
+    opacity: 1;
665
+  }
666
+}
667
+
668
+/* Out */
669
+@-webkit-keyframes horizontalFlipOut {
670
+  0% {
671
+    -webkit-transform: perspective(2000px) rotateY(0deg);
672
+            transform: perspective(2000px) rotateY(0deg);
673
+    opacity: 1;
674
+  }
675
+  100% {
676
+    -webkit-transform: perspective(2000px) rotateY(90deg);
677
+            transform: perspective(2000px) rotateY(90deg);
678
+    opacity: 0;
679
+  }
680
+}
681
+@keyframes horizontalFlipOut {
682
+  0% {
683
+    -webkit-transform: perspective(2000px) rotateY(0deg);
684
+            transform: perspective(2000px) rotateY(0deg);
685
+    opacity: 1;
686
+  }
687
+  100% {
688
+    -webkit-transform: perspective(2000px) rotateY(90deg);
689
+            transform: perspective(2000px) rotateY(90deg);
690
+    opacity: 0;
691
+  }
692
+}
693
+@-webkit-keyframes verticalFlipOut {
694
+  0% {
695
+    -webkit-transform: perspective(2000px) rotateX(0deg);
696
+            transform: perspective(2000px) rotateX(0deg);
697
+    opacity: 1;
698
+  }
699
+  100% {
700
+    -webkit-transform: perspective(2000px) rotateX(-90deg);
701
+            transform: perspective(2000px) rotateX(-90deg);
702
+    opacity: 0;
703
+  }
704
+}
705
+@keyframes verticalFlipOut {
706
+  0% {
707
+    -webkit-transform: perspective(2000px) rotateX(0deg);
708
+            transform: perspective(2000px) rotateX(0deg);
709
+    opacity: 1;
710
+  }
711
+  100% {
712
+    -webkit-transform: perspective(2000px) rotateX(-90deg);
713
+            transform: perspective(2000px) rotateX(-90deg);
714
+    opacity: 0;
715
+  }
716
+}
717
+
718
+/*--------------
719
+      Scale
720
+---------------*/
721
+
722
+.scale.transition.in {
723
+  -webkit-animation-name: scaleIn;
724
+          animation-name: scaleIn;
725
+}
726
+.scale.transition.out {
727
+  -webkit-animation-name: scaleOut;
728
+          animation-name: scaleOut;
729
+}
730
+@-webkit-keyframes scaleIn {
731
+  0% {
732
+    opacity: 0;
733
+    -webkit-transform: scale(0.8);
734
+            transform: scale(0.8);
735
+  }
736
+  100% {
737
+    opacity: 1;
738
+    -webkit-transform: scale(1);
739
+            transform: scale(1);
740
+  }
741
+}
742
+@keyframes scaleIn {
743
+  0% {
744
+    opacity: 0;
745
+    -webkit-transform: scale(0.8);
746
+            transform: scale(0.8);
747
+  }
748
+  100% {
749
+    opacity: 1;
750
+    -webkit-transform: scale(1);
751
+            transform: scale(1);
752
+  }
753
+}
754
+
755
+/* Out */
756
+@-webkit-keyframes scaleOut {
757
+  0% {
758
+    opacity: 1;
759
+    -webkit-transform: scale(1);
760
+            transform: scale(1);
761
+  }
762
+  100% {
763
+    opacity: 0;
764
+    -webkit-transform: scale(0.9);
765
+            transform: scale(0.9);
766
+  }
767
+}
768
+@keyframes scaleOut {
769
+  0% {
770
+    opacity: 1;
771
+    -webkit-transform: scale(1);
772
+            transform: scale(1);
773
+  }
774
+  100% {
775
+    opacity: 0;
776
+    -webkit-transform: scale(0.9);
777
+            transform: scale(0.9);
778
+  }
779
+}
780
+
781
+/*--------------
782
+      Fly
783
+---------------*/
784
+
785
+
786
+/* Inward */
787
+.transition.fly {
788
+  -webkit-animation-duration: 0.6s;
789
+          animation-duration: 0.6s;
790
+  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
791
+          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
792
+}
793
+.transition.fly.in {
794
+  -webkit-animation-name: flyIn;
795
+          animation-name: flyIn;
796
+}
797
+.transition[class*="fly up"].in {
798
+  -webkit-animation-name: flyInUp;
799
+          animation-name: flyInUp;
800
+}
801
+.transition[class*="fly down"].in {
802
+  -webkit-animation-name: flyInDown;
803
+          animation-name: flyInDown;
804
+}
805
+.transition[class*="fly left"].in {
806
+  -webkit-animation-name: flyInLeft;
807
+          animation-name: flyInLeft;
808
+}
809
+.transition[class*="fly right"].in {
810
+  -webkit-animation-name: flyInRight;
811
+          animation-name: flyInRight;
812
+}
813
+
814
+/* Outward */
815
+.transition.fly.out {
816
+  -webkit-animation-name: flyOut;
817
+          animation-name: flyOut;
818
+}
819
+.transition[class*="fly up"].out {
820
+  -webkit-animation-name: flyOutUp;
821
+          animation-name: flyOutUp;
822
+}
823
+.transition[class*="fly down"].out {
824
+  -webkit-animation-name: flyOutDown;
825
+          animation-name: flyOutDown;
826
+}
827
+.transition[class*="fly left"].out {
828
+  -webkit-animation-name: flyOutLeft;
829
+          animation-name: flyOutLeft;
830
+}
831
+.transition[class*="fly right"].out {
832
+  -webkit-animation-name: flyOutRight;
833
+          animation-name: flyOutRight;
834
+}
835
+
836
+/* In */
837
+@-webkit-keyframes flyIn {
838
+  0% {
839
+    opacity: 0;
840
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
841
+            transform: scale3d(0.3, 0.3, 0.3);
842
+  }
843
+  20% {
844
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
845
+            transform: scale3d(1.1, 1.1, 1.1);
846
+  }
847
+  40% {
848
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
849
+            transform: scale3d(0.9, 0.9, 0.9);
850
+  }
851
+  60% {
852
+    opacity: 1;
853
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
854
+            transform: scale3d(1.03, 1.03, 1.03);
855
+  }
856
+  80% {
857
+    -webkit-transform: scale3d(0.97, 0.97, 0.97);
858
+            transform: scale3d(0.97, 0.97, 0.97);
859
+  }
860
+  100% {
861
+    opacity: 1;
862
+    -webkit-transform: scale3d(1, 1, 1);
863
+            transform: scale3d(1, 1, 1);
864
+  }
865
+}
866
+@keyframes flyIn {
867
+  0% {
868
+    opacity: 0;
869
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
870
+            transform: scale3d(0.3, 0.3, 0.3);
871
+  }
872
+  20% {
873
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
874
+            transform: scale3d(1.1, 1.1, 1.1);
875
+  }
876
+  40% {
877
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
878
+            transform: scale3d(0.9, 0.9, 0.9);
879
+  }
880
+  60% {
881
+    opacity: 1;
882
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
883
+            transform: scale3d(1.03, 1.03, 1.03);
884
+  }
885
+  80% {
886
+    -webkit-transform: scale3d(0.97, 0.97, 0.97);
887
+            transform: scale3d(0.97, 0.97, 0.97);
888
+  }
889
+  100% {
890
+    opacity: 1;
891
+    -webkit-transform: scale3d(1, 1, 1);
892
+            transform: scale3d(1, 1, 1);
893
+  }
894
+}
895
+@-webkit-keyframes flyInUp {
896
+  0% {
897
+    opacity: 0;
898
+    -webkit-transform: translate3d(0, 1500px, 0);
899
+            transform: translate3d(0, 1500px, 0);
900
+  }
901
+  60% {
902
+    opacity: 1;
903
+    -webkit-transform: translate3d(0, -20px, 0);
904
+            transform: translate3d(0, -20px, 0);
905
+  }
906
+  75% {
907
+    -webkit-transform: translate3d(0, 10px, 0);
908
+            transform: translate3d(0, 10px, 0);
909
+  }
910
+  90% {
911
+    -webkit-transform: translate3d(0, -5px, 0);
912
+            transform: translate3d(0, -5px, 0);
913
+  }
914
+  100% {
915
+    -webkit-transform: translate3d(0, 0, 0);
916
+            transform: translate3d(0, 0, 0);
917
+  }
918
+}
919
+@keyframes flyInUp {
920
+  0% {
921
+    opacity: 0;
922
+    -webkit-transform: translate3d(0, 1500px, 0);
923
+            transform: translate3d(0, 1500px, 0);
924
+  }
925
+  60% {
926
+    opacity: 1;
927
+    -webkit-transform: translate3d(0, -20px, 0);
928
+            transform: translate3d(0, -20px, 0);
929
+  }
930
+  75% {
931
+    -webkit-transform: translate3d(0, 10px, 0);
932
+            transform: translate3d(0, 10px, 0);
933
+  }
934
+  90% {
935
+    -webkit-transform: translate3d(0, -5px, 0);
936
+            transform: translate3d(0, -5px, 0);
937
+  }
938
+  100% {
939
+    -webkit-transform: translate3d(0, 0, 0);
940
+            transform: translate3d(0, 0, 0);
941
+  }
942
+}
943
+@-webkit-keyframes flyInDown {
944
+  0% {
945
+    opacity: 0;
946
+    -webkit-transform: translate3d(0, -1500px, 0);
947
+            transform: translate3d(0, -1500px, 0);
948
+  }
949
+  60% {
950
+    opacity: 1;
951
+    -webkit-transform: translate3d(0, 25px, 0);
952
+            transform: translate3d(0, 25px, 0);
953
+  }
954
+  75% {
955
+    -webkit-transform: translate3d(0, -10px, 0);
956
+            transform: translate3d(0, -10px, 0);
957
+  }
958
+  90% {
959
+    -webkit-transform: translate3d(0, 5px, 0);
960
+            transform: translate3d(0, 5px, 0);
961
+  }
962
+  100% {
963
+    -webkit-transform: none;
964
+            transform: none;
965
+  }
966
+}
967
+@keyframes flyInDown {
968
+  0% {
969
+    opacity: 0;
970
+    -webkit-transform: translate3d(0, -1500px, 0);
971
+            transform: translate3d(0, -1500px, 0);
972
+  }
973
+  60% {
974
+    opacity: 1;
975
+    -webkit-transform: translate3d(0, 25px, 0);
976
+            transform: translate3d(0, 25px, 0);
977
+  }
978
+  75% {
979
+    -webkit-transform: translate3d(0, -10px, 0);
980
+            transform: translate3d(0, -10px, 0);
981
+  }
982
+  90% {
983
+    -webkit-transform: translate3d(0, 5px, 0);
984
+            transform: translate3d(0, 5px, 0);
985
+  }
986
+  100% {
987
+    -webkit-transform: none;
988
+            transform: none;
989
+  }
990
+}
991
+@-webkit-keyframes flyInLeft {
992
+  0% {
993
+    opacity: 0;
994
+    -webkit-transform: translate3d(1500px, 0, 0);
995
+            transform: translate3d(1500px, 0, 0);
996
+  }
997
+  60% {
998
+    opacity: 1;
999
+    -webkit-transform: translate3d(-25px, 0, 0);
1000
+            transform: translate3d(-25px, 0, 0);
1001
+  }
1002
+  75% {
1003
+    -webkit-transform: translate3d(10px, 0, 0);
1004
+            transform: translate3d(10px, 0, 0);
1005
+  }
1006
+  90% {
1007
+    -webkit-transform: translate3d(-5px, 0, 0);
1008
+            transform: translate3d(-5px, 0, 0);
1009
+  }
1010
+  100% {
1011
+    -webkit-transform: none;
1012
+            transform: none;
1013
+  }
1014
+}
1015
+@keyframes flyInLeft {
1016
+  0% {
1017
+    opacity: 0;
1018
+    -webkit-transform: translate3d(1500px, 0, 0);
1019
+            transform: translate3d(1500px, 0, 0);
1020
+  }
1021
+  60% {
1022
+    opacity: 1;
1023
+    -webkit-transform: translate3d(-25px, 0, 0);
1024
+            transform: translate3d(-25px, 0, 0);
1025
+  }
1026
+  75% {
1027
+    -webkit-transform: translate3d(10px, 0, 0);
1028
+            transform: translate3d(10px, 0, 0);
1029
+  }
1030
+  90% {
1031
+    -webkit-transform: translate3d(-5px, 0, 0);
1032
+            transform: translate3d(-5px, 0, 0);
1033
+  }
1034
+  100% {
1035
+    -webkit-transform: none;
1036
+            transform: none;
1037
+  }
1038
+}
1039
+@-webkit-keyframes flyInRight {
1040
+  0% {
1041
+    opacity: 0;
1042
+    -webkit-transform: translate3d(-1500px, 0, 0);
1043
+            transform: translate3d(-1500px, 0, 0);
1044
+  }
1045
+  60% {
1046
+    opacity: 1;
1047
+    -webkit-transform: translate3d(25px, 0, 0);
1048
+            transform: translate3d(25px, 0, 0);
1049
+  }
1050
+  75% {
1051
+    -webkit-transform: translate3d(-10px, 0, 0);
1052
+            transform: translate3d(-10px, 0, 0);
1053
+  }
1054
+  90% {
1055
+    -webkit-transform: translate3d(5px, 0, 0);
1056
+            transform: translate3d(5px, 0, 0);
1057
+  }
1058
+  100% {
1059
+    -webkit-transform: none;
1060
+            transform: none;
1061
+  }
1062
+}
1063
+@keyframes flyInRight {
1064
+  0% {
1065
+    opacity: 0;
1066
+    -webkit-transform: translate3d(-1500px, 0, 0);
1067
+            transform: translate3d(-1500px, 0, 0);
1068
+  }
1069
+  60% {
1070
+    opacity: 1;
1071
+    -webkit-transform: translate3d(25px, 0, 0);
1072
+            transform: translate3d(25px, 0, 0);
1073
+  }
1074
+  75% {
1075
+    -webkit-transform: translate3d(-10px, 0, 0);
1076
+            transform: translate3d(-10px, 0, 0);
1077
+  }
1078
+  90% {
1079
+    -webkit-transform: translate3d(5px, 0, 0);
1080
+            transform: translate3d(5px, 0, 0);
1081
+  }
1082
+  100% {
1083
+    -webkit-transform: none;
1084
+            transform: none;
1085
+  }
1086
+}
1087
+
1088
+/* Out */
1089
+@-webkit-keyframes flyOut {
1090
+  20% {
1091
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
1092
+            transform: scale3d(0.9, 0.9, 0.9);
1093
+  }
1094
+  50%,
1095
+  55% {
1096
+    opacity: 1;
1097
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
1098
+            transform: scale3d(1.1, 1.1, 1.1);
1099
+  }
1100
+  100% {
1101
+    opacity: 0;
1102
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
1103
+            transform: scale3d(0.3, 0.3, 0.3);
1104
+  }
1105
+}
1106
+@keyframes flyOut {
1107
+  20% {
1108
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
1109
+            transform: scale3d(0.9, 0.9, 0.9);
1110
+  }
1111
+  50%,
1112
+  55% {
1113
+    opacity: 1;
1114
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
1115
+            transform: scale3d(1.1, 1.1, 1.1);
1116
+  }
1117
+  100% {
1118
+    opacity: 0;
1119
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
1120
+            transform: scale3d(0.3, 0.3, 0.3);
1121
+  }
1122
+}
1123
+@-webkit-keyframes flyOutUp {
1124
+  20% {
1125
+    -webkit-transform: translate3d(0, 10px, 0);
1126
+            transform: translate3d(0, 10px, 0);
1127
+  }
1128
+  40%,
1129
+  45% {
1130
+    opacity: 1;
1131
+    -webkit-transform: translate3d(0, -20px, 0);
1132
+            transform: translate3d(0, -20px, 0);
1133
+  }
1134
+  100% {
1135
+    opacity: 0;
1136
+    -webkit-transform: translate3d(0, 2000px, 0);
1137
+            transform: translate3d(0, 2000px, 0);
1138
+  }
1139
+}
1140
+@keyframes flyOutUp {
1141
+  20% {
1142
+    -webkit-transform: translate3d(0, 10px, 0);
1143
+            transform: translate3d(0, 10px, 0);
1144
+  }
1145
+  40%,
1146
+  45% {
1147
+    opacity: 1;
1148
+    -webkit-transform: translate3d(0, -20px, 0);
1149
+            transform: translate3d(0, -20px, 0);
1150
+  }
1151
+  100% {
1152
+    opacity: 0;
1153
+    -webkit-transform: translate3d(0, 2000px, 0);
1154
+            transform: translate3d(0, 2000px, 0);
1155
+  }
1156
+}
1157
+@-webkit-keyframes flyOutDown {
1158
+  20% {
1159
+    -webkit-transform: translate3d(0, -10px, 0);
1160
+            transform: translate3d(0, -10px, 0);
1161
+  }
1162
+  40%,
1163
+  45% {
1164
+    opacity: 1;
1165
+    -webkit-transform: translate3d(0, 20px, 0);
1166
+            transform: translate3d(0, 20px, 0);
1167
+  }
1168
+  100% {
1169
+    opacity: 0;
1170
+    -webkit-transform: translate3d(0, -2000px, 0);
1171
+            transform: translate3d(0, -2000px, 0);
1172
+  }
1173
+}
1174
+@keyframes flyOutDown {
1175
+  20% {
1176
+    -webkit-transform: translate3d(0, -10px, 0);
1177
+            transform: translate3d(0, -10px, 0);
1178
+  }
1179
+  40%,
1180
+  45% {
1181
+    opacity: 1;
1182
+    -webkit-transform: translate3d(0, 20px, 0);
1183
+            transform: translate3d(0, 20px, 0);
1184
+  }
1185
+  100% {
1186
+    opacity: 0;
1187
+    -webkit-transform: translate3d(0, -2000px, 0);
1188
+            transform: translate3d(0, -2000px, 0);
1189
+  }
1190
+}
1191
+@-webkit-keyframes flyOutRight {
1192
+  20% {
1193
+    opacity: 1;
1194
+    -webkit-transform: translate3d(20px, 0, 0);
1195
+            transform: translate3d(20px, 0, 0);
1196
+  }
1197
+  100% {
1198
+    opacity: 0;
1199
+    -webkit-transform: translate3d(-2000px, 0, 0);
1200
+            transform: translate3d(-2000px, 0, 0);
1201
+  }
1202
+}
1203
+@keyframes flyOutRight {
1204
+  20% {
1205
+    opacity: 1;
1206
+    -webkit-transform: translate3d(20px, 0, 0);
1207
+            transform: translate3d(20px, 0, 0);
1208
+  }
1209
+  100% {
1210
+    opacity: 0;
1211
+    -webkit-transform: translate3d(-2000px, 0, 0);
1212
+            transform: translate3d(-2000px, 0, 0);
1213
+  }
1214
+}
1215
+@-webkit-keyframes flyOutLeft {
1216
+  20% {
1217
+    opacity: 1;
1218
+    -webkit-transform: translate3d(-20px, 0, 0);
1219
+            transform: translate3d(-20px, 0, 0);
1220
+  }
1221
+  100% {
1222
+    opacity: 0;
1223
+    -webkit-transform: translate3d(2000px, 0, 0);
1224
+            transform: translate3d(2000px, 0, 0);
1225
+  }
1226
+}
1227
+@keyframes flyOutLeft {
1228
+  20% {
1229
+    opacity: 1;
1230
+    -webkit-transform: translate3d(-20px, 0, 0);
1231
+            transform: translate3d(-20px, 0, 0);
1232
+  }
1233
+  100% {
1234
+    opacity: 0;
1235
+    -webkit-transform: translate3d(2000px, 0, 0);
1236
+            transform: translate3d(2000px, 0, 0);
1237
+  }
1238
+}
1239
+
1240
+/*--------------
1241
+     Slide
1242
+---------------*/
1243
+
1244
+.transition.slide.in,
1245
+.transition[class*="slide down"].in {
1246
+  -webkit-animation-name: slideInY;
1247
+          animation-name: slideInY;
1248
+  -webkit-transform-origin: top center;
1249
+          transform-origin: top center;
1250
+}
1251
+.transition[class*="slide up"].in {
1252
+  -webkit-animation-name: slideInY;
1253
+          animation-name: slideInY;
1254
+  -webkit-transform-origin: bottom center;
1255
+          transform-origin: bottom center;
1256
+}
1257
+.transition[class*="slide left"].in {
1258
+  -webkit-animation-name: slideInX;
1259
+          animation-name: slideInX;
1260
+  -webkit-transform-origin: center right;
1261
+          transform-origin: center right;
1262
+}
1263
+.transition[class*="slide right"].in {
1264
+  -webkit-animation-name: slideInX;
1265
+          animation-name: slideInX;
1266
+  -webkit-transform-origin: center left;
1267
+          transform-origin: center left;
1268
+}
1269
+.transition.slide.out,
1270
+.transition[class*="slide down"].out {
1271
+  -webkit-animation-name: slideOutY;
1272
+          animation-name: slideOutY;
1273
+  -webkit-transform-origin: top center;
1274
+          transform-origin: top center;
1275
+}
1276
+.transition[class*="slide up"].out {
1277
+  -webkit-animation-name: slideOutY;
1278
+          animation-name: slideOutY;
1279
+  -webkit-transform-origin: bottom center;
1280
+          transform-origin: bottom center;
1281
+}
1282
+.transition[class*="slide left"].out {
1283
+  -webkit-animation-name: slideOutX;
1284
+          animation-name: slideOutX;
1285
+  -webkit-transform-origin: center right;
1286
+          transform-origin: center right;
1287
+}
1288
+.transition[class*="slide right"].out {
1289
+  -webkit-animation-name: slideOutX;
1290
+          animation-name: slideOutX;
1291
+  -webkit-transform-origin: center left;
1292
+          transform-origin: center left;
1293
+}
1294
+
1295
+/* In */
1296
+@-webkit-keyframes slideInY {
1297
+  0% {
1298
+    opacity: 0;
1299
+    -webkit-transform: scaleY(0);
1300
+            transform: scaleY(0);
1301
+  }
1302
+  100% {
1303
+    opacity: 1;
1304
+    -webkit-transform: scaleY(1);
1305
+            transform: scaleY(1);
1306
+  }
1307
+}
1308
+@keyframes slideInY {
1309
+  0% {
1310
+    opacity: 0;
1311
+    -webkit-transform: scaleY(0);
1312
+            transform: scaleY(0);
1313
+  }
1314
+  100% {
1315
+    opacity: 1;
1316
+    -webkit-transform: scaleY(1);
1317
+            transform: scaleY(1);
1318
+  }
1319
+}
1320
+@-webkit-keyframes slideInX {
1321
+  0% {
1322
+    opacity: 0;
1323
+    -webkit-transform: scaleX(0);
1324
+            transform: scaleX(0);
1325
+  }
1326
+  100% {
1327
+    opacity: 1;
1328
+    -webkit-transform: scaleX(1);
1329
+            transform: scaleX(1);
1330
+  }
1331
+}
1332
+@keyframes slideInX {
1333
+  0% {
1334
+    opacity: 0;
1335
+    -webkit-transform: scaleX(0);
1336
+            transform: scaleX(0);
1337
+  }
1338
+  100% {
1339
+    opacity: 1;
1340
+    -webkit-transform: scaleX(1);
1341
+            transform: scaleX(1);
1342
+  }
1343
+}
1344
+
1345
+/* Out */
1346
+@-webkit-keyframes slideOutY {
1347
+  0% {
1348
+    opacity: 1;
1349
+    -webkit-transform: scaleY(1);
1350
+            transform: scaleY(1);
1351
+  }
1352
+  100% {
1353
+    opacity: 0;
1354
+    -webkit-transform: scaleY(0);
1355
+            transform: scaleY(0);
1356
+  }
1357
+}
1358
+@keyframes slideOutY {
1359
+  0% {
1360
+    opacity: 1;
1361
+    -webkit-transform: scaleY(1);
1362
+            transform: scaleY(1);
1363
+  }
1364
+  100% {
1365
+    opacity: 0;
1366
+    -webkit-transform: scaleY(0);
1367
+            transform: scaleY(0);
1368
+  }
1369
+}
1370
+@-webkit-keyframes slideOutX {
1371
+  0% {
1372
+    opacity: 1;
1373
+    -webkit-transform: scaleX(1);
1374
+            transform: scaleX(1);
1375
+  }
1376
+  100% {
1377
+    opacity: 0;
1378
+    -webkit-transform: scaleX(0);
1379
+            transform: scaleX(0);
1380
+  }
1381
+}
1382
+@keyframes slideOutX {
1383
+  0% {
1384
+    opacity: 1;
1385
+    -webkit-transform: scaleX(1);
1386
+            transform: scaleX(1);
1387
+  }
1388
+  100% {
1389
+    opacity: 0;
1390
+    -webkit-transform: scaleX(0);
1391
+            transform: scaleX(0);
1392
+  }
1393
+}
1394
+
1395
+/*--------------
1396
+     Swing
1397
+---------------*/
1398
+
1399
+.transition.swing {
1400
+  -webkit-animation-duration: 800ms;
1401
+          animation-duration: 800ms;
1402
+}
1403
+.transition[class*="swing down"].in {
1404
+  -webkit-animation-name: swingInX;
1405
+          animation-name: swingInX;
1406
+  -webkit-transform-origin: top center;
1407
+          transform-origin: top center;
1408
+}
1409
+.transition[class*="swing up"].in {
1410
+  -webkit-animation-name: swingInX;
1411
+          animation-name: swingInX;
1412
+  -webkit-transform-origin: bottom center;
1413
+          transform-origin: bottom center;
1414
+}
1415
+.transition[class*="swing left"].in {
1416
+  -webkit-animation-name: swingInY;
1417
+          animation-name: swingInY;
1418
+  -webkit-transform-origin: center right;
1419
+          transform-origin: center right;
1420
+}
1421
+.transition[class*="swing right"].in {
1422
+  -webkit-animation-name: swingInY;
1423
+          animation-name: swingInY;
1424
+  -webkit-transform-origin: center left;
1425
+          transform-origin: center left;
1426
+}
1427
+.transition.swing.out,
1428
+.transition[class*="swing down"].out {
1429
+  -webkit-animation-name: swingOutX;
1430
+          animation-name: swingOutX;
1431
+  -webkit-transform-origin: top center;
1432
+          transform-origin: top center;
1433
+}
1434
+.transition[class*="swing up"].out {
1435
+  -webkit-animation-name: swingOutX;
1436
+          animation-name: swingOutX;
1437
+  -webkit-transform-origin: bottom center;
1438
+          transform-origin: bottom center;
1439
+}
1440
+.transition[class*="swing left"].out {
1441
+  -webkit-animation-name: swingOutY;
1442
+          animation-name: swingOutY;
1443
+  -webkit-transform-origin: center right;
1444
+          transform-origin: center right;
1445
+}
1446
+.transition[class*="swing right"].out {
1447
+  -webkit-animation-name: swingOutY;
1448
+          animation-name: swingOutY;
1449
+  -webkit-transform-origin: center left;
1450
+          transform-origin: center left;
1451
+}
1452
+
1453
+/* In */
1454
+@-webkit-keyframes swingInX {
1455
+  0% {
1456
+    -webkit-transform: perspective(1000px) rotateX(90deg);
1457
+            transform: perspective(1000px) rotateX(90deg);
1458
+    opacity: 0;
1459
+  }
1460
+  40% {
1461
+    -webkit-transform: perspective(1000px) rotateX(-30deg);
1462
+            transform: perspective(1000px) rotateX(-30deg);
1463
+    opacity: 1;
1464
+  }
1465
+  60% {
1466
+    -webkit-transform: perspective(1000px) rotateX(15deg);
1467
+            transform: perspective(1000px) rotateX(15deg);
1468
+  }
1469
+  80% {
1470
+    -webkit-transform: perspective(1000px) rotateX(-7.5deg);
1471
+            transform: perspective(1000px) rotateX(-7.5deg);
1472
+  }
1473
+  100% {
1474
+    -webkit-transform: perspective(1000px) rotateX(0deg);
1475
+            transform: perspective(1000px) rotateX(0deg);
1476
+  }
1477
+}
1478
+@keyframes swingInX {
1479
+  0% {
1480
+    -webkit-transform: perspective(1000px) rotateX(90deg);
1481
+            transform: perspective(1000px) rotateX(90deg);
1482
+    opacity: 0;
1483
+  }
1484
+  40% {
1485
+    -webkit-transform: perspective(1000px) rotateX(-30deg);
1486
+            transform: perspective(1000px) rotateX(-30deg);
1487
+    opacity: 1;
1488
+  }
1489
+  60% {
1490
+    -webkit-transform: perspective(1000px) rotateX(15deg);
1491
+            transform: perspective(1000px) rotateX(15deg);
1492
+  }
1493
+  80% {
1494
+    -webkit-transform: perspective(1000px) rotateX(-7.5deg);
1495
+            transform: perspective(1000px) rotateX(-7.5deg);
1496
+  }
1497
+  100% {
1498
+    -webkit-transform: perspective(1000px) rotateX(0deg);
1499
+            transform: perspective(1000px) rotateX(0deg);
1500
+  }
1501
+}
1502
+@-webkit-keyframes swingInY {
1503
+  0% {
1504
+    -webkit-transform: perspective(1000px) rotateY(-90deg);
1505
+            transform: perspective(1000px) rotateY(-90deg);
1506
+    opacity: 0;
1507
+  }
1508
+  40% {
1509
+    -webkit-transform: perspective(1000px) rotateY(30deg);
1510
+            transform: perspective(1000px) rotateY(30deg);
1511
+    opacity: 1;
1512
+  }
1513
+  60% {
1514
+    -webkit-transform: perspective(1000px) rotateY(-17.5deg);
1515
+            transform: perspective(1000px) rotateY(-17.5deg);
1516
+  }
1517
+  80% {
1518
+    -webkit-transform: perspective(1000px) rotateY(7.5deg);
1519
+            transform: perspective(1000px) rotateY(7.5deg);
1520
+  }
1521
+  100% {
1522
+    -webkit-transform: perspective(1000px) rotateY(0deg);
1523
+            transform: perspective(1000px) rotateY(0deg);
1524
+  }
1525
+}
1526
+@keyframes swingInY {
1527
+  0% {
1528
+    -webkit-transform: perspective(1000px) rotateY(-90deg);
1529
+            transform: perspective(1000px) rotateY(-90deg);
1530
+    opacity: 0;
1531
+  }
1532
+  40% {
1533
+    -webkit-transform: perspective(1000px) rotateY(30deg);
1534
+            transform: perspective(1000px) rotateY(30deg);
1535
+    opacity: 1;
1536
+  }
1537
+  60% {
1538
+    -webkit-transform: perspective(1000px) rotateY(-17.5deg);
1539
+            transform: perspective(1000px) rotateY(-17.5deg);
1540
+  }
1541
+  80% {
1542
+    -webkit-transform: perspective(1000px) rotateY(7.5deg);
1543
+            transform: perspective(1000px) rotateY(7.5deg);
1544
+  }
1545
+  100% {
1546
+    -webkit-transform: perspective(1000px) rotateY(0deg);
1547
+            transform: perspective(1000px) rotateY(0deg);
1548
+  }
1549
+}
1550
+
1551
+/* Out */
1552
+@-webkit-keyframes swingOutX {
1553
+  0% {
1554
+    -webkit-transform: perspective(1000px) rotateX(0deg);
1555
+            transform: perspective(1000px) rotateX(0deg);
1556
+  }
1557
+  40% {
1558
+    -webkit-transform: perspective(1000px) rotateX(-7.5deg);
1559
+            transform: perspective(1000px) rotateX(-7.5deg);
1560
+  }
1561
+  60% {
1562
+    -webkit-transform: perspective(1000px) rotateX(17.5deg);
1563
+            transform: perspective(1000px) rotateX(17.5deg);
1564
+  }
1565
+  80% {
1566
+    -webkit-transform: perspective(1000px) rotateX(-30deg);
1567
+            transform: perspective(1000px) rotateX(-30deg);
1568
+    opacity: 1;
1569
+  }
1570
+  100% {
1571
+    -webkit-transform: perspective(1000px) rotateX(90deg);
1572
+            transform: perspective(1000px) rotateX(90deg);
1573
+    opacity: 0;
1574
+  }
1575
+}
1576
+@keyframes swingOutX {
1577
+  0% {
1578
+    -webkit-transform: perspective(1000px) rotateX(0deg);
1579
+            transform: perspective(1000px) rotateX(0deg);
1580
+  }
1581
+  40% {
1582
+    -webkit-transform: perspective(1000px) rotateX(-7.5deg);
1583
+            transform: perspective(1000px) rotateX(-7.5deg);
1584
+  }
1585
+  60% {
1586
+    -webkit-transform: perspective(1000px) rotateX(17.5deg);
1587
+            transform: perspective(1000px) rotateX(17.5deg);
1588
+  }
1589
+  80% {
1590
+    -webkit-transform: perspective(1000px) rotateX(-30deg);
1591
+            transform: perspective(1000px) rotateX(-30deg);
1592
+    opacity: 1;
1593
+  }
1594
+  100% {
1595
+    -webkit-transform: perspective(1000px) rotateX(90deg);
1596
+            transform: perspective(1000px) rotateX(90deg);
1597
+    opacity: 0;
1598
+  }
1599
+}
1600
+@-webkit-keyframes swingOutY {
1601
+  0% {
1602
+    -webkit-transform: perspective(1000px) rotateY(0deg);
1603
+            transform: perspective(1000px) rotateY(0deg);
1604
+  }
1605
+  40% {
1606
+    -webkit-transform: perspective(1000px) rotateY(7.5deg);
1607
+            transform: perspective(1000px) rotateY(7.5deg);
1608
+  }
1609
+  60% {
1610
+    -webkit-transform: perspective(1000px) rotateY(-10deg);
1611
+            transform: perspective(1000px) rotateY(-10deg);
1612
+  }
1613
+  80% {
1614
+    -webkit-transform: perspective(1000px) rotateY(30deg);
1615
+            transform: perspective(1000px) rotateY(30deg);
1616
+    opacity: 1;
1617
+  }
1618
+  100% {
1619
+    -webkit-transform: perspective(1000px) rotateY(-90deg);
1620
+            transform: perspective(1000px) rotateY(-90deg);
1621
+    opacity: 0;
1622
+  }
1623
+}
1624
+@keyframes swingOutY {
1625
+  0% {
1626
+    -webkit-transform: perspective(1000px) rotateY(0deg);
1627
+            transform: perspective(1000px) rotateY(0deg);
1628
+  }
1629
+  40% {
1630
+    -webkit-transform: perspective(1000px) rotateY(7.5deg);
1631
+            transform: perspective(1000px) rotateY(7.5deg);
1632
+  }
1633
+  60% {
1634
+    -webkit-transform: perspective(1000px) rotateY(-10deg);
1635
+            transform: perspective(1000px) rotateY(-10deg);
1636
+  }
1637
+  80% {
1638
+    -webkit-transform: perspective(1000px) rotateY(30deg);
1639
+            transform: perspective(1000px) rotateY(30deg);
1640
+    opacity: 1;
1641
+  }
1642
+  100% {
1643
+    -webkit-transform: perspective(1000px) rotateY(-90deg);
1644
+            transform: perspective(1000px) rotateY(-90deg);
1645
+    opacity: 0;
1646
+  }
1647
+}
1648
+
1649
+
1650
+/*******************************
1651
+       Static Animations
1652
+*******************************/
1653
+
1654
+
1655
+/*--------------
1656
+    Emphasis
1657
+---------------*/
1658
+
1659
+.flash.transition {
1660
+  -webkit-animation-duration: 750ms;
1661
+          animation-duration: 750ms;
1662
+  -webkit-animation-name: flash;
1663
+          animation-name: flash;
1664
+}
1665
+.shake.transition {
1666
+  -webkit-animation-duration: 750ms;
1667
+          animation-duration: 750ms;
1668
+  -webkit-animation-name: shake;
1669
+          animation-name: shake;
1670
+}
1671
+.bounce.transition {
1672
+  -webkit-animation-duration: 750ms;
1673
+          animation-duration: 750ms;
1674
+  -webkit-animation-name: bounce;
1675
+          animation-name: bounce;
1676
+}
1677
+.tada.transition {
1678
+  -webkit-animation-duration: 750ms;
1679
+          animation-duration: 750ms;
1680
+  -webkit-animation-name: tada;
1681
+          animation-name: tada;
1682
+}
1683
+.pulse.transition {
1684
+  -webkit-animation-duration: 500ms;
1685
+          animation-duration: 500ms;
1686
+  -webkit-animation-name: pulse;
1687
+          animation-name: pulse;
1688
+}
1689
+.jiggle.transition {
1690
+  -webkit-animation-duration: 750ms;
1691
+          animation-duration: 750ms;
1692
+  -webkit-animation-name: jiggle;
1693
+          animation-name: jiggle;
1694
+}
1695
+
1696
+/* Flash */
1697
+@-webkit-keyframes flash {
1698
+  0%,
1699
+  50%,
1700
+  100% {
1701
+    opacity: 1;
1702
+  }
1703
+  25%,
1704
+  75% {
1705
+    opacity: 0;
1706
+  }
1707
+}
1708
+@keyframes flash {
1709
+  0%,
1710
+  50%,
1711
+  100% {
1712
+    opacity: 1;
1713
+  }
1714
+  25%,
1715
+  75% {
1716
+    opacity: 0;
1717
+  }
1718
+}
1719
+
1720
+/* Shake */
1721
+@-webkit-keyframes shake {
1722
+  0%,
1723
+  100% {
1724
+    -webkit-transform: translateX(0);
1725
+            transform: translateX(0);
1726
+  }
1727
+  10%,
1728
+  30%,
1729
+  50%,
1730
+  70%,
1731
+  90% {
1732
+    -webkit-transform: translateX(-10px);
1733
+            transform: translateX(-10px);
1734
+  }
1735
+  20%,
1736
+  40%,
1737
+  60%,
1738
+  80% {
1739
+    -webkit-transform: translateX(10px);
1740
+            transform: translateX(10px);
1741
+  }
1742
+}
1743
+@keyframes shake {
1744
+  0%,
1745
+  100% {
1746
+    -webkit-transform: translateX(0);
1747
+            transform: translateX(0);
1748
+  }
1749
+  10%,
1750
+  30%,
1751
+  50%,
1752
+  70%,
1753
+  90% {
1754
+    -webkit-transform: translateX(-10px);
1755
+            transform: translateX(-10px);
1756
+  }
1757
+  20%,
1758
+  40%,
1759
+  60%,
1760
+  80% {
1761
+    -webkit-transform: translateX(10px);
1762
+            transform: translateX(10px);
1763
+  }
1764
+}
1765
+
1766
+/* Bounce */
1767
+@-webkit-keyframes bounce {
1768
+  0%,
1769
+  20%,
1770
+  50%,
1771
+  80%,
1772
+  100% {
1773
+    -webkit-transform: translateY(0);
1774
+            transform: translateY(0);
1775
+  }
1776
+  40% {
1777
+    -webkit-transform: translateY(-30px);
1778
+            transform: translateY(-30px);
1779
+  }
1780
+  60% {
1781
+    -webkit-transform: translateY(-15px);
1782
+            transform: translateY(-15px);
1783
+  }
1784
+}
1785
+@keyframes bounce {
1786
+  0%,
1787
+  20%,
1788
+  50%,
1789
+  80%,
1790
+  100% {
1791
+    -webkit-transform: translateY(0);
1792
+            transform: translateY(0);
1793
+  }
1794
+  40% {
1795
+    -webkit-transform: translateY(-30px);
1796
+            transform: translateY(-30px);
1797
+  }
1798
+  60% {
1799
+    -webkit-transform: translateY(-15px);
1800
+            transform: translateY(-15px);
1801
+  }
1802
+}
1803
+
1804
+/* Tada */
1805
+@-webkit-keyframes tada {
1806
+  0% {
1807
+    -webkit-transform: scale(1);
1808
+            transform: scale(1);
1809
+  }
1810
+  10%,
1811
+  20% {
1812
+    -webkit-transform: scale(0.9) rotate(-3deg);
1813
+            transform: scale(0.9) rotate(-3deg);
1814
+  }
1815
+  30%,
1816
+  50%,
1817
+  70%,
1818
+  90% {
1819
+    -webkit-transform: scale(1.1) rotate(3deg);
1820
+            transform: scale(1.1) rotate(3deg);
1821
+  }
1822
+  40%,
1823
+  60%,
1824
+  80% {
1825
+    -webkit-transform: scale(1.1) rotate(-3deg);
1826
+            transform: scale(1.1) rotate(-3deg);
1827
+  }
1828
+  100% {
1829
+    -webkit-transform: scale(1) rotate(0);
1830
+            transform: scale(1) rotate(0);
1831
+  }
1832
+}
1833
+@keyframes tada {
1834
+  0% {
1835
+    -webkit-transform: scale(1);
1836
+            transform: scale(1);
1837
+  }
1838
+  10%,
1839
+  20% {
1840
+    -webkit-transform: scale(0.9) rotate(-3deg);
1841
+            transform: scale(0.9) rotate(-3deg);
1842
+  }
1843
+  30%,
1844
+  50%,
1845
+  70%,
1846
+  90% {
1847
+    -webkit-transform: scale(1.1) rotate(3deg);
1848
+            transform: scale(1.1) rotate(3deg);
1849
+  }
1850
+  40%,
1851
+  60%,
1852
+  80% {
1853
+    -webkit-transform: scale(1.1) rotate(-3deg);
1854
+            transform: scale(1.1) rotate(-3deg);
1855
+  }
1856
+  100% {
1857
+    -webkit-transform: scale(1) rotate(0);
1858
+            transform: scale(1) rotate(0);
1859
+  }
1860
+}
1861
+
1862
+/* Pulse */
1863
+@-webkit-keyframes pulse {
1864
+  0% {
1865
+    -webkit-transform: scale(1);
1866
+            transform: scale(1);
1867
+    opacity: 1;
1868
+  }
1869
+  50% {
1870
+    -webkit-transform: scale(0.9);
1871
+            transform: scale(0.9);
1872
+    opacity: 0.7;
1873
+  }
1874
+  100% {
1875
+    -webkit-transform: scale(1);
1876
+            transform: scale(1);
1877
+    opacity: 1;
1878
+  }
1879
+}
1880
+@keyframes pulse {
1881
+  0% {
1882
+    -webkit-transform: scale(1);
1883
+            transform: scale(1);
1884
+    opacity: 1;
1885
+  }
1886
+  50% {
1887
+    -webkit-transform: scale(0.9);
1888
+            transform: scale(0.9);
1889
+    opacity: 0.7;
1890
+  }
1891
+  100% {
1892
+    -webkit-transform: scale(1);
1893
+            transform: scale(1);
1894
+    opacity: 1;
1895
+  }
1896
+}
1897
+
1898
+/* Rubberband */
1899
+@-webkit-keyframes jiggle {
1900
+  0% {
1901
+    -webkit-transform: scale3d(1, 1, 1);
1902
+            transform: scale3d(1, 1, 1);
1903
+  }
1904
+  30% {
1905
+    -webkit-transform: scale3d(1.25, 0.75, 1);
1906
+            transform: scale3d(1.25, 0.75, 1);
1907
+  }
1908
+  40% {
1909
+    -webkit-transform: scale3d(0.75, 1.25, 1);
1910
+            transform: scale3d(0.75, 1.25, 1);
1911
+  }
1912
+  50% {
1913
+    -webkit-transform: scale3d(1.15, 0.85, 1);
1914
+            transform: scale3d(1.15, 0.85, 1);
1915
+  }
1916
+  65% {
1917
+    -webkit-transform: scale3d(0.95, 1.05, 1);
1918
+            transform: scale3d(0.95, 1.05, 1);
1919
+  }
1920
+  75% {
1921
+    -webkit-transform: scale3d(1.05, 0.95, 1);
1922
+            transform: scale3d(1.05, 0.95, 1);
1923
+  }
1924
+  100% {
1925
+    -webkit-transform: scale3d(1, 1, 1);
1926
+            transform: scale3d(1, 1, 1);
1927
+  }
1928
+}
1929
+@keyframes jiggle {
1930
+  0% {
1931
+    -webkit-transform: scale3d(1, 1, 1);
1932
+            transform: scale3d(1, 1, 1);
1933
+  }
1934
+  30% {
1935
+    -webkit-transform: scale3d(1.25, 0.75, 1);
1936
+            transform: scale3d(1.25, 0.75, 1);
1937
+  }
1938
+  40% {
1939
+    -webkit-transform: scale3d(0.75, 1.25, 1);
1940
+            transform: scale3d(0.75, 1.25, 1);
1941
+  }
1942
+  50% {
1943
+    -webkit-transform: scale3d(1.15, 0.85, 1);
1944
+            transform: scale3d(1.15, 0.85, 1);
1945
+  }
1946
+  65% {
1947
+    -webkit-transform: scale3d(0.95, 1.05, 1);
1948
+            transform: scale3d(0.95, 1.05, 1);
1949
+  }
1950
+  75% {
1951
+    -webkit-transform: scale3d(1.05, 0.95, 1);
1952
+            transform: scale3d(1.05, 0.95, 1);
1953
+  }
1954
+  100% {
1955
+    -webkit-transform: scale3d(1, 1, 1);
1956
+            transform: scale3d(1, 1, 1);
1957
+  }
1958
+}
1959
+
1960
+
1961
+/*******************************
1962
+         Site Overrides
1963
+*******************************/
1964
+

+ 1095
- 0
static/components/transition.js View File

@@ -0,0 +1,1095 @@
1
+/*!
2
+ * # Semantic UI 2.2.6 - Transition
3
+ * http://github.com/semantic-org/semantic-ui/
4
+ *
5
+ *
6
+ * Released under the MIT license
7
+ * http://opensource.org/licenses/MIT
8
+ *
9
+ */
10
+
11
+;(function ($, window, document, undefined) {
12
+
13
+"use strict";
14
+
15
+window = (typeof window != 'undefined' && window.Math == Math)
16
+  ? window
17
+  : (typeof self != 'undefined' && self.Math == Math)
18
+    ? self
19
+    : Function('return this')()
20
+;
21
+
22
+$.fn.transition = function() {
23
+  var
24
+    $allModules     = $(this),
25
+    moduleSelector  = $allModules.selector || '',
26
+
27
+    time            = new Date().getTime(),
28
+    performance     = [],
29
+
30
+    moduleArguments = arguments,
31
+    query           = moduleArguments[0],
32
+    queryArguments  = [].slice.call(arguments, 1),
33
+    methodInvoked   = (typeof query === 'string'),
34
+
35
+    requestAnimationFrame = window.requestAnimationFrame
36
+      || window.mozRequestAnimationFrame
37
+      || window.webkitRequestAnimationFrame
38
+      || window.msRequestAnimationFrame
39
+      || function(callback) { setTimeout(callback, 0); },
40
+
41
+    returnedValue
42
+  ;
43
+  $allModules
44
+    .each(function(index) {
45
+      var
46
+        $module  = $(this),
47
+        element  = this,
48
+
49
+        // set at run time
50
+        settings,
51
+        instance,
52
+
53
+        error,
54
+        className,
55
+        metadata,
56
+        animationEnd,
57
+        animationName,
58
+
59
+        namespace,
60
+        moduleNamespace,
61
+        eventNamespace,
62
+        module
63
+      ;
64
+
65
+      module = {
66
+
67
+        initialize: function() {
68
+
69
+          // get full settings
70
+          settings        = module.get.settings.apply(element, moduleArguments);
71
+
72
+          // shorthand
73
+          className       = settings.className;
74
+          error           = settings.error;
75
+          metadata        = settings.metadata;
76
+
77
+          // define namespace
78
+          eventNamespace  = '.' + settings.namespace;
79
+          moduleNamespace = 'module-' + settings.namespace;
80
+          instance        = $module.data(moduleNamespace) || module;
81
+
82
+          // get vendor specific events
83
+          animationEnd    = module.get.animationEndEvent();
84
+
85
+          if(methodInvoked) {
86
+            methodInvoked = module.invoke(query);
87
+          }
88
+
89
+          // method not invoked, lets run an animation
90
+          if(methodInvoked === false) {
91
+            module.verbose('Converted arguments into settings object', settings);
92
+            if(settings.interval) {
93
+              module.delay(settings.animate);
94
+            }
95
+            else  {
96
+              module.animate();
97
+            }
98
+            module.instantiate();
99
+          }
100
+        },
101
+
102
+        instantiate: function() {
103
+          module.verbose('Storing instance of module', module);
104
+          instance = module;
105
+          $module
106
+            .data(moduleNamespace, instance)
107
+          ;
108
+        },
109
+
110
+        destroy: function() {
111
+          module.verbose('Destroying previous module for', element);
112
+          $module
113
+            .removeData(moduleNamespace)
114
+          ;
115
+        },
116
+
117
+        refresh: function() {
118
+          module.verbose('Refreshing display type on next animation');
119
+          delete module.displayType;
120
+        },
121
+
122
+        forceRepaint: function() {
123
+          module.verbose('Forcing element repaint');
124
+          var
125
+            $parentElement = $module.parent(),
126
+            $nextElement = $module.next()
127
+          ;
128
+          if($nextElement.length === 0) {
129
+            $module.detach().appendTo($parentElement);
130
+          }
131
+          else {
132
+            $module.detach().insertBefore($nextElement);
133
+          }
134
+        },
135
+
136
+        repaint: function() {
137
+          module.verbose('Repainting element');
138
+          var
139
+            fakeAssignment = element.offsetWidth
140
+          ;
141
+        },
142
+
143
+        delay: function(interval) {
144
+          var
145
+            direction = module.get.animationDirection(),
146
+            shouldReverse,
147
+            delay
148
+          ;
149
+          if(!direction) {
150
+            direction = module.can.transition()
151
+              ? module.get.direction()
152
+              : 'static'
153
+            ;
154
+          }
155
+          interval = (interval !== undefined)
156
+            ? interval
157
+            : settings.interval
158
+          ;
159
+          shouldReverse = (settings.reverse == 'auto' && direction == className.outward);
160
+          delay = (shouldReverse || settings.reverse == true)
161
+            ? ($allModules.length - index) * settings.interval
162
+            : index * settings.interval
163
+          ;
164
+          module.debug('Delaying animation by', delay);
165
+          setTimeout(module.animate, delay);
166
+        },
167
+
168
+        animate: function(overrideSettings) {
169
+          settings = overrideSettings || settings;
170
+          if(!module.is.supported()) {
171
+            module.error(error.support);
172
+            return false;
173
+          }
174
+          module.debug('Preparing animation', settings.animation);
175
+          if(module.is.animating()) {
176
+            if(settings.queue) {
177
+              if(!settings.allowRepeats && module.has.direction() && module.is.occurring() && module.queuing !== true) {
178
+                module.debug('Animation is currently occurring, preventing queueing same animation', settings.animation);
179
+              }
180
+              else {
181
+                module.queue(settings.animation);
182
+              }
183
+              return false;
184
+            }
185
+            else if(!settings.allowRepeats && module.is.occurring()) {
186
+              module.debug('Animation is already occurring, will not execute repeated animation', settings.animation);
187
+              return false;
188
+            }
189
+            else {
190
+              module.debug('New animation started, completing previous early', settings.animation);
191
+              instance.complete();
192
+            }
193
+          }
194
+          if( module.can.animate() ) {
195
+            module.set.animating(settings.animation);
196
+          }
197
+          else {
198
+            module.error(error.noAnimation, settings.animation, element);
199
+          }
200
+        },
201
+
202
+        reset: function() {
203
+          module.debug('Resetting animation to beginning conditions');
204
+          module.remove.animationCallbacks();
205
+          module.restore.conditions();
206
+          module.remove.animating();
207
+        },
208
+
209
+        queue: function(animation) {
210
+          module.debug('Queueing animation of', animation);
211
+          module.queuing = true;
212
+          $module
213
+            .one(animationEnd + '.queue' + eventNamespace, function() {
214
+              module.queuing = false;
215
+              module.repaint();
216
+              module.animate.apply(this, settings);
217
+            })
218
+          ;
219
+        },
220
+
221
+        complete: function (event) {
222
+          module.debug('Animation complete', settings.animation);
223
+          module.remove.completeCallback();
224
+          module.remove.failSafe();
225
+          if(!module.is.looping()) {
226
+            if( module.is.outward() ) {
227
+              module.verbose('Animation is outward, hiding element');
228
+              module.restore.conditions();
229
+              module.hide();
230
+            }
231
+            else if( module.is.inward() ) {
232
+              module.verbose('Animation is outward, showing element');
233
+              module.restore.conditions();
234
+              module.show();
235
+            }
236
+            else {
237
+              module.verbose('Static animation completed');
238
+              module.restore.conditions();
239
+              settings.onComplete.call(element);
240
+            }
241
+          }
242
+        },
243
+
244
+        force: {
245
+          visible: function() {
246
+            var
247
+              style          = $module.attr('style'),
248
+              userStyle      = module.get.userStyle(),
249
+              displayType    = module.get.displayType(),
250
+              overrideStyle  = userStyle + 'display: ' + displayType + ' !important;',
251
+              currentDisplay = $module.css('display'),
252
+              emptyStyle     = (style === undefined || style === '')
253
+            ;
254
+            if(currentDisplay !== displayType) {
255
+              module.verbose('Overriding default display to show element', displayType);
256
+              $module
257
+                .attr('style', overrideStyle)
258
+              ;
259
+            }
260
+            else if(emptyStyle) {
261
+              $module.removeAttr('style');
262
+            }
263
+          },
264
+          hidden: function() {
265
+            var
266
+              style          = $module.attr('style'),
267
+              currentDisplay = $module.css('display'),
268
+              emptyStyle     = (style === undefined || style === '')
269
+            ;
270
+            if(currentDisplay !== 'none' && !module.is.hidden()) {
271
+              module.verbose('Overriding default display to hide element');
272
+              $module
273
+                .css('display', 'none')
274
+              ;
275
+            }
276
+            else if(emptyStyle) {
277
+              $module
278
+                .removeAttr('style')
279
+              ;
280
+            }
281
+          }
282
+        },
283
+
284
+        has: {
285
+          direction: function(animation) {
286
+            var
287
+              hasDirection = false
288
+            ;
289
+            animation = animation || settings.animation;
290
+            if(typeof animation === 'string') {
291
+              animation = animation.split(' ');
292
+              $.each(animation, function(index, word){
293
+                if(word === className.inward || word === className.outward) {
294
+                  hasDirection = true;
295
+                }
296
+              });
297
+            }
298
+            return hasDirection;
299
+          },
300
+          inlineDisplay: function() {
301
+            var
302
+              style = $module.attr('style') || ''
303
+            ;
304
+            return $.isArray(style.match(/display.*?;/, ''));
305
+          }
306
+        },
307
+
308
+        set: {
309
+          animating: function(animation) {
310
+            var
311
+              animationClass,
312
+              direction
313
+            ;
314
+            // remove previous callbacks
315
+            module.remove.completeCallback();
316
+
317
+            // determine exact animation
318
+            animation      = animation || settings.animation;
319
+            animationClass = module.get.animationClass(animation);
320
+
321
+            // save animation class in cache to restore class names
322
+            module.save.animation(animationClass);
323
+
324
+            // override display if necessary so animation appears visibly
325
+            module.force.visible();
326
+
327
+            module.remove.hidden();
328
+            module.remove.direction();
329
+
330
+            module.start.animation(animationClass);
331
+
332
+          },
333
+          duration: function(animationName, duration) {
334
+            duration = duration || settings.duration;
335
+            duration = (typeof duration == 'number')
336
+              ? duration + 'ms'
337
+              : duration
338
+            ;
339
+            if(duration || duration === 0) {
340
+              module.verbose('Setting animation duration', duration);
341
+              $module
342
+                .css({
343
+                  'animation-duration':  duration
344
+                })
345
+              ;
346
+            }
347
+          },
348
+          direction: function(direction) {
349
+            direction = direction || module.get.direction();
350
+            if(direction == className.inward) {
351
+              module.set.inward();
352
+            }
353
+            else {
354
+              module.set.outward();
355
+            }
356
+          },
357
+          looping: function() {
358
+            module.debug('Transition set to loop');
359
+            $module
360
+              .addClass(className.looping)
361
+            ;
362
+          },
363
+          hidden: function() {
364
+            $module
365
+              .addClass(className.transition)
366
+              .addClass(className.hidden)
367
+            ;
368
+          },
369
+          inward: function() {
370
+            module.debug('Setting direction to inward');
371
+            $module
372
+              .removeClass(className.outward)
373
+              .addClass(className.inward)
374
+            ;
375
+          },
376
+          outward: function() {
377
+            module.debug('Setting direction to outward');
378
+            $module
379
+              .removeClass(className.inward)
380
+              .addClass(className.outward)
381
+            ;
382
+          },
383
+          visible: function() {
384
+            $module
385
+              .addClass(className.transition)
386
+              .addClass(className.visible)
387
+            ;
388
+          }
389
+        },
390
+
391
+        start: {
392
+          animation: function(animationClass) {
393
+            animationClass = animationClass || module.get.animationClass();
394
+            module.debug('Starting tween', animationClass);
395
+            $module
396
+              .addClass(animationClass)
397
+              .one(animationEnd + '.complete' + eventNamespace, module.complete)
398
+            ;
399
+            if(settings.useFailSafe) {
400
+              module.add.failSafe();
401
+            }
402
+            module.set.duration(settings.duration);
403
+            settings.onStart.call(element);
404
+          }
405
+        },
406
+
407
+        save: {
408
+          animation: function(animation) {
409
+            if(!module.cache) {
410
+              module.cache = {};
411
+            }
412
+            module.cache.animation = animation;
413
+          },
414
+          displayType: function(displayType) {
415
+            if(displayType !== 'none') {
416
+              $module.data(metadata.displayType, displayType);
417
+            }
418
+          },
419
+          transitionExists: function(animation, exists) {
420
+            $.fn.transition.exists[animation] = exists;
421
+            module.verbose('Saving existence of transition', animation, exists);
422
+          }
423
+        },
424
+
425
+        restore: {
426
+          conditions: function() {
427
+            var
428
+              animation = module.get.currentAnimation()
429
+            ;
430
+            if(animation) {
431
+              $module
432
+                .removeClass(animation)
433
+              ;
434
+              module.verbose('Removing animation class', module.cache);
435
+            }
436
+            module.remove.duration();
437
+          }
438
+        },
439
+
440
+        add: {
441
+          failSafe: function() {
442
+            var
443
+              duration = module.get.duration()
444
+            ;
445
+            module.timer = setTimeout(function() {
446
+              $module.triggerHandler(animationEnd);
447
+            }, duration + settings.failSafeDelay);
448
+            module.verbose('Adding fail safe timer', module.timer);
449
+          }
450
+        },
451
+
452
+        remove: {
453
+          animating: function() {
454
+            $module.removeClass(className.animating);
455
+          },
456
+          animationCallbacks: function() {
457
+            module.remove.queueCallback();
458
+            module.remove.completeCallback();
459
+          },
460
+          queueCallback: function() {
461
+            $module.off('.queue' + eventNamespace);
462
+          },
463
+          completeCallback: function() {
464
+            $module.off('.complete' + eventNamespace);
465
+          },
466
+          display: function() {
467
+            $module.css('display', '');
468
+          },
469
+          direction: function() {
470
+            $module
471
+              .removeClass(className.inward)
472
+              .removeClass(className.outward)
473
+            ;
474
+          },
475
+          duration: function() {
476
+            $module
477
+              .css('animation-duration', '')
478
+            ;
479
+          },
480
+          failSafe: function() {
481
+            module.verbose('Removing fail safe timer', module.timer);
482
+            if(module.timer) {
483
+              clearTimeout(module.timer);
484
+            }
485
+          },
486
+          hidden: function() {
487
+            $module.removeClass(className.hidden);
488
+          },
489
+          visible: function() {
490
+            $module.removeClass(className.visible);
491
+          },
492
+          looping: function() {
493
+            module.debug('Transitions are no longer looping');
494
+            if( module.is.looping() ) {
495
+              module.reset();
496
+              $module
497
+                .removeClass(className.looping)
498
+              ;
499
+            }
500
+          },
501
+          transition: function() {
502
+            $module
503
+              .removeClass(className.visible)
504
+              .removeClass(className.hidden)
505
+            ;
506
+          }
507
+        },
508
+        get: {
509
+          settings: function(animation, duration, onComplete) {
510
+            // single settings object
511
+            if(typeof animation == 'object') {
512
+              return $.extend(true, {}, $.fn.transition.settings, animation);
513
+            }
514
+            // all arguments provided
515
+            else if(typeof onComplete == 'function') {
516
+              return $.extend({}, $.fn.transition.settings, {
517
+                animation  : animation,
518
+                onComplete : onComplete,
519
+                duration   : duration
520
+              });
521
+            }
522
+            // only duration provided
523
+            else if(typeof duration == 'string' || typeof duration == 'number') {
524
+              return $.extend({}, $.fn.transition.settings, {
525
+                animation : animation,
526
+                duration  : duration
527
+              });
528
+            }
529
+            // duration is actually settings object
530
+            else if(typeof duration == 'object') {
531
+              return $.extend({}, $.fn.transition.settings, duration, {
532
+                animation : animation
533
+              });
534
+            }
535
+            // duration is actually callback
536
+            else if(typeof duration == 'function') {
537
+              return $.extend({}, $.fn.transition.settings, {
538
+                animation  : animation,
539
+                onComplete : duration
540
+              });
541
+            }
542
+            // only animation provided
543
+            else {
544
+              return $.extend({}, $.fn.transition.settings, {
545
+                animation : animation
546
+              });
547
+            }
548
+          },
549
+          animationClass: function(animation) {
550
+            var
551
+              animationClass = animation || settings.animation,
552
+              directionClass = (module.can.transition() && !module.has.direction())
553
+                ? module.get.direction() + ' '
554
+                : ''
555
+            ;
556
+            return className.animating + ' '
557
+              + className.transition + ' '
558
+              + directionClass
559
+              + animationClass
560
+            ;
561
+          },
562
+          currentAnimation: function() {
563
+            return (module.cache && module.cache.animation !== undefined)
564
+              ? module.cache.animation
565
+              : false
566
+            ;
567
+          },
568
+          currentDirection: function() {
569
+            return module.is.inward()
570
+              ? className.inward
571
+              : className.outward
572
+            ;
573
+          },
574
+          direction: function() {
575
+            return module.is.hidden() || !module.is.visible()
576
+              ? className.inward
577
+              : className.outward
578
+            ;
579
+          },
580
+          animationDirection: function(animation) {
581
+            var
582
+              direction
583
+            ;
584
+            animation = animation || settings.animation;
585
+            if(typeof animation === 'string') {
586
+              animation = animation.split(' ');
587
+              // search animation name for out/in class
588
+              $.each(animation, function(index, word){
589
+                if(word === className.inward) {
590
+                  direction = className.inward;
591
+                }
592
+                else if(word === className.outward) {
593
+                  direction = className.outward;
594
+                }
595
+              });
596
+            }
597
+            // return found direction
598
+            if(direction) {
599
+              return direction;
600
+            }
601
+            return false;
602
+          },
603
+          duration: function(duration) {
604
+            duration = duration || settings.duration;
605
+            if(duration === false) {
606
+              duration = $module.css('animation-duration') || 0;
607
+            }
608
+            return (typeof duration === 'string')
609
+              ? (duration.indexOf('ms') > -1)
610
+                ? parseFloat(duration)
611
+                : parseFloat(duration) * 1000
612
+              : duration
613
+            ;
614
+          },
615
+          displayType: function(shouldDetermine) {
616
+            shouldDetermine = (shouldDetermine !== undefined)
617
+              ? shouldDetermine
618
+              : true
619
+            ;
620
+            if(settings.displayType) {
621
+              return settings.displayType;
622
+            }
623
+            if(shouldDetermine && $module.data(metadata.displayType) === undefined) {
624
+              // create fake element to determine display state
625
+              module.can.transition(true);
626
+            }
627
+            return $module.data(metadata.displayType);
628
+          },
629
+          userStyle: function(style) {
630
+            style = style || $module.attr('style') || '';
631
+            return style.replace(/display.*?;/, '');
632
+          },
633
+          transitionExists: function(animation) {
634
+            return $.fn.transition.exists[animation];
635
+          },
636
+          animationStartEvent: function() {
637
+            var
638
+              element     = document.createElement('div'),
639
+              animations  = {
640
+                'animation'       :'animationstart',
641
+                'OAnimation'      :'oAnimationStart',
642
+                'MozAnimation'    :'mozAnimationStart',
643
+                'WebkitAnimation' :'webkitAnimationStart'
644
+              },
645
+              animation
646
+            ;
647
+            for(animation in animations){
648
+              if( element.style[animation] !== undefined ){
649
+                return animations[animation];
650
+              }
651
+            }
652
+            return false;
653
+          },
654
+          animationEndEvent: function() {
655
+            var
656
+              element     = document.createElement('div'),
657
+              animations  = {
658
+                'animation'       :'animationend',
659
+                'OAnimation'      :'oAnimationEnd',
660
+                'MozAnimation'    :'mozAnimationEnd',
661
+                'WebkitAnimation' :'webkitAnimationEnd'
662
+              },
663
+              animation
664
+            ;
665
+            for(animation in animations){
666
+              if( element.style[animation] !== undefined ){
667
+                return animations[animation];
668
+              }
669
+            }
670
+            return false;
671
+          }
672
+
673
+        },
674
+
675
+        can: {
676
+          transition: function(forced) {
677
+            var
678
+              animation         = settings.animation,
679
+              transitionExists  = module.get.transitionExists(animation),
680
+              displayType       = module.get.displayType(false),
681
+              elementClass,
682
+              tagName,
683
+              $clone,
684
+              currentAnimation,
685
+              inAnimation,
686
+              directionExists
687
+            ;
688
+            if( transitionExists === undefined || forced) {
689
+              module.verbose('Determining whether animation exists');
690
+              elementClass = $module.attr('class');
691
+              tagName      = $module.prop('tagName');
692
+
693
+              $clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module);
694
+              currentAnimation = $clone
695
+                .addClass(animation)
696
+                .removeClass(className.inward)
697
+                .removeClass(className.outward)
698
+                .addClass(className.animating)
699
+                .addClass(className.transition)
700
+                .css('animationName')
701
+              ;
702
+              inAnimation = $clone
703
+                .addClass(className.inward)
704
+                .css('animationName')
705
+              ;
706
+              if(!displayType) {
707