vue_crud 0.1.9.5 → 0.1.9.6

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