fomantic-ui-sass 2.8.8.1 → 2.9.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (113) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +4 -0
  3. data/app/assets/fonts/semantic-ui/Lato-Bold.woff +0 -0
  4. data/app/assets/fonts/semantic-ui/Lato-Bold.woff2 +0 -0
  5. data/app/assets/fonts/semantic-ui/Lato-BoldItalic.woff +0 -0
  6. data/app/assets/fonts/semantic-ui/Lato-BoldItalic.woff2 +0 -0
  7. data/app/assets/fonts/semantic-ui/Lato-Italic.woff +0 -0
  8. data/app/assets/fonts/semantic-ui/Lato-Italic.woff2 +0 -0
  9. data/app/assets/fonts/semantic-ui/Lato-Regular.woff +0 -0
  10. data/app/assets/fonts/semantic-ui/Lato-Regular.woff2 +0 -0
  11. data/app/assets/fonts/semantic-ui/LatoLatin-Bold.woff +0 -0
  12. data/app/assets/fonts/semantic-ui/LatoLatin-Bold.woff2 +0 -0
  13. data/app/assets/fonts/semantic-ui/LatoLatin-BoldItalic.woff +0 -0
  14. data/app/assets/fonts/semantic-ui/LatoLatin-BoldItalic.woff2 +0 -0
  15. data/app/assets/fonts/semantic-ui/LatoLatin-Italic.woff +0 -0
  16. data/app/assets/fonts/semantic-ui/LatoLatin-Italic.woff2 +0 -0
  17. data/app/assets/fonts/semantic-ui/LatoLatin-Regular.woff +0 -0
  18. data/app/assets/fonts/semantic-ui/LatoLatin-Regular.woff2 +0 -0
  19. data/app/assets/fonts/semantic-ui/brand-icons.eot +0 -0
  20. data/app/assets/fonts/semantic-ui/brand-icons.svg +41 -6
  21. data/app/assets/fonts/semantic-ui/brand-icons.ttf +0 -0
  22. data/app/assets/fonts/semantic-ui/brand-icons.woff +0 -0
  23. data/app/assets/fonts/semantic-ui/brand-icons.woff2 +0 -0
  24. data/app/assets/fonts/semantic-ui/icons.eot +0 -0
  25. data/app/assets/fonts/semantic-ui/icons.svg +245 -7
  26. data/app/assets/fonts/semantic-ui/icons.ttf +0 -0
  27. data/app/assets/fonts/semantic-ui/icons.woff +0 -0
  28. data/app/assets/fonts/semantic-ui/icons.woff2 +0 -0
  29. data/app/assets/fonts/semantic-ui/outline-icons.eot +0 -0
  30. data/app/assets/fonts/semantic-ui/outline-icons.svg +2 -2
  31. data/app/assets/fonts/semantic-ui/outline-icons.ttf +0 -0
  32. data/app/assets/fonts/semantic-ui/outline-icons.woff +0 -0
  33. data/app/assets/fonts/semantic-ui/outline-icons.woff2 +0 -0
  34. data/app/assets/javascripts/semantic-ui/accordion.js +569 -590
  35. data/app/assets/javascripts/semantic-ui/api.js +1153 -1116
  36. data/app/assets/javascripts/semantic-ui/calendar.js +1941 -1698
  37. data/app/assets/javascripts/semantic-ui/checkbox.js +862 -854
  38. data/app/assets/javascripts/semantic-ui/dimmer.js +697 -713
  39. data/app/assets/javascripts/semantic-ui/dropdown.js +4196 -4192
  40. data/app/assets/javascripts/semantic-ui/embed.js +646 -672
  41. data/app/assets/javascripts/semantic-ui/flyout.js +1579 -0
  42. data/app/assets/javascripts/semantic-ui/form.js +2024 -2000
  43. data/app/assets/javascripts/semantic-ui/modal.js +1546 -1384
  44. data/app/assets/javascripts/semantic-ui/nag.js +521 -527
  45. data/app/assets/javascripts/semantic-ui/popup.js +1457 -1463
  46. data/app/assets/javascripts/semantic-ui/progress.js +970 -995
  47. data/app/assets/javascripts/semantic-ui/rating.js +508 -520
  48. data/app/assets/javascripts/semantic-ui/search.js +1521 -1508
  49. data/app/assets/javascripts/semantic-ui/shape.js +784 -811
  50. data/app/assets/javascripts/semantic-ui/sidebar.js +1061 -1002
  51. data/app/assets/javascripts/semantic-ui/site.js +437 -477
  52. data/app/assets/javascripts/semantic-ui/slider.js +1311 -1297
  53. data/app/assets/javascripts/semantic-ui/state.js +639 -658
  54. data/app/assets/javascripts/semantic-ui/sticky.js +848 -891
  55. data/app/assets/javascripts/semantic-ui/tab.js +895 -941
  56. data/app/assets/javascripts/semantic-ui/toast.js +911 -851
  57. data/app/assets/javascripts/semantic-ui/transition.js +1049 -1073
  58. data/app/assets/javascripts/semantic-ui/visibility.js +1214 -1246
  59. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +7 -7
  60. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +389 -407
  61. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +203 -345
  62. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +372 -501
  63. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +154 -226
  64. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +2065 -880
  65. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +867 -1232
  66. data/app/assets/stylesheets/semantic-ui/elements/_container.scss +101 -6
  67. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +75 -93
  68. data/app/assets/stylesheets/semantic-ui/elements/_emoji.scss +11148 -9190
  69. data/app/assets/stylesheets/semantic-ui/elements/_flag.scss +1037 -929
  70. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +124 -146
  71. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +2728 -2759
  72. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +41 -65
  73. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +982 -163
  74. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +432 -479
  75. data/app/assets/stylesheets/semantic-ui/elements/_list.scss +80 -101
  76. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +452 -540
  77. data/app/assets/stylesheets/semantic-ui/elements/_placeholder.scss +56 -76
  78. data/app/assets/stylesheets/semantic-ui/elements/_rail.scss +17 -22
  79. data/app/assets/stylesheets/semantic-ui/elements/_reveal.scss +46 -85
  80. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +263 -255
  81. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +106 -179
  82. data/app/assets/stylesheets/semantic-ui/elements/_text.scss +33 -33
  83. data/app/assets/stylesheets/semantic-ui/globals/_reset.scss +14 -18
  84. data/app/assets/stylesheets/semantic-ui/globals/_site.scss +132 -48
  85. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +196 -74
  86. data/app/assets/stylesheets/semantic-ui/modules/_calendar.scss +43 -29
  87. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +210 -280
  88. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +78 -182
  89. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +339 -423
  90. data/app/assets/stylesheets/semantic-ui/modules/_embed.scss +24 -35
  91. data/app/assets/stylesheets/semantic-ui/modules/_flyout.scss +546 -0
  92. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +150 -153
  93. data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +55 -65
  94. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +530 -310
  95. data/app/assets/stylesheets/semantic-ui/modules/_progress.scss +108 -213
  96. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +88 -168
  97. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +73 -102
  98. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +16 -32
  99. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +126 -215
  100. data/app/assets/stylesheets/semantic-ui/modules/_slider.scss +110 -138
  101. data/app/assets/stylesheets/semantic-ui/modules/_sticky.scss +3 -7
  102. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +16 -20
  103. data/app/assets/stylesheets/semantic-ui/modules/_toast.scss +111 -141
  104. data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +371 -1282
  105. data/app/assets/stylesheets/semantic-ui/views/_ad.scss +39 -50
  106. data/app/assets/stylesheets/semantic-ui/views/_card.scss +949 -458
  107. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +44 -62
  108. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +50 -72
  109. data/app/assets/stylesheets/semantic-ui/views/_item.scss +89 -136
  110. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +78 -119
  111. data/lib/fomantic/ui/sass/version.rb +2 -2
  112. data/tasks/converter.rb +1 -1
  113. metadata +21 -3
@@ -1,10 +1,10 @@
1
1
  /*!
2
- * # Fomantic-UI 2.8.8 - Transition
3
- * http://github.com/fomantic/Fomantic-UI/
2
+ * # Fomantic-UI 2.9.1 - Transition
3
+ * https://github.com/fomantic/Fomantic-UI/
4
4
  *
5
5
  *
6
6
  * Released under the MIT license
7
- * http://opensource.org/licenses/MIT
7
+ * https://opensource.org/licenses/MIT
8
8
  *
9
9
  */
10
10
 
@@ -14,14 +14,10 @@
14
14
  *******************************/
15
15
 
16
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;
17
+ animation-iteration-count: 1;
18
+ animation-duration: 300ms;
19
+ animation-timing-function: ease;
20
+ animation-fill-mode: both;
25
21
  }
26
22
 
27
23
 
@@ -55,13 +51,13 @@
55
51
  display: block !important;
56
52
  visibility: visible !important;
57
53
 
58
- /* backface-visibility: @backfaceVisibility;
59
- transform: @use3DAcceleration;*/
54
+ /* backface-visibility: @backfaceVisibility;
55
+ transform: @use3DAcceleration; */
60
56
  }
57
+
61
58
  /* Disabled */
62
59
  .disabled.transition {
63
- -webkit-animation-play-state: paused;
64
- animation-play-state: paused;
60
+ animation-play-state: paused;
65
61
  }
66
62
 
67
63
 
@@ -70,8 +66,112 @@
70
66
  *******************************/
71
67
 
72
68
  .looping.transition {
73
- -webkit-animation-iteration-count: infinite;
74
- animation-iteration-count: infinite;
69
+ animation-iteration-count: infinite;
70
+ }
71
+
72
+ /* Pulsating */
73
+ .pulsating.transition {
74
+ animation-name: pulsating;
75
+ animation-duration: 2000ms;
76
+ box-shadow: 0 0 0 0 rgba(128, 128, 128, 0.5);
77
+ }
78
+ .inverted.pulsating.transition {
79
+ box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
80
+ }
81
+ @keyframes pulsating {
82
+ 100% {
83
+ box-shadow: 0 0 0 0.8rem rgba(255, 255, 255, 0);
84
+ }
85
+ }
86
+ .primary.pulsating.transition {
87
+ box-shadow: 0 0 0 0 rgba(33, 133, 208, 0.5);
88
+ }
89
+ .primary.inverted.pulsating.transition {
90
+ box-shadow: 0 0 0 0 rgba(84, 200, 255, 0.7);
91
+ }
92
+ .secondary.pulsating.transition {
93
+ box-shadow: 0 0 0 0 rgba(27, 28, 29, 0.5);
94
+ }
95
+ .secondary.inverted.pulsating.transition {
96
+ box-shadow: 0 0 0 0 rgba(84, 84, 84, 0.7);
97
+ }
98
+ .red.pulsating.transition {
99
+ box-shadow: 0 0 0 0 rgba(219, 40, 40, 0.5);
100
+ }
101
+ .red.inverted.pulsating.transition {
102
+ box-shadow: 0 0 0 0 rgba(255, 105, 94, 0.7);
103
+ }
104
+ .orange.pulsating.transition {
105
+ box-shadow: 0 0 0 0 rgba(242, 113, 28, 0.5);
106
+ }
107
+ .orange.inverted.pulsating.transition {
108
+ box-shadow: 0 0 0 0 rgba(255, 133, 27, 0.7);
109
+ }
110
+ .yellow.pulsating.transition {
111
+ box-shadow: 0 0 0 0 rgba(251, 189, 8, 0.5);
112
+ }
113
+ .yellow.inverted.pulsating.transition {
114
+ box-shadow: 0 0 0 0 rgba(255, 226, 31, 0.7);
115
+ }
116
+ .olive.pulsating.transition {
117
+ box-shadow: 0 0 0 0 rgba(181, 204, 24, 0.5);
118
+ }
119
+ .olive.inverted.pulsating.transition {
120
+ box-shadow: 0 0 0 0 rgba(217, 231, 120, 0.7);
121
+ }
122
+ .green.pulsating.transition {
123
+ box-shadow: 0 0 0 0 rgba(33, 186, 69, 0.5);
124
+ }
125
+ .green.inverted.pulsating.transition {
126
+ box-shadow: 0 0 0 0 rgba(46, 204, 64, 0.7);
127
+ }
128
+ .teal.pulsating.transition {
129
+ box-shadow: 0 0 0 0 rgba(0, 181, 173, 0.5);
130
+ }
131
+ .teal.inverted.pulsating.transition {
132
+ box-shadow: 0 0 0 0 rgba(109, 255, 255, 0.7);
133
+ }
134
+ .blue.pulsating.transition {
135
+ box-shadow: 0 0 0 0 rgba(33, 133, 208, 0.5);
136
+ }
137
+ .blue.inverted.pulsating.transition {
138
+ box-shadow: 0 0 0 0 rgba(84, 200, 255, 0.7);
139
+ }
140
+ .violet.pulsating.transition {
141
+ box-shadow: 0 0 0 0 rgba(100, 53, 201, 0.5);
142
+ }
143
+ .violet.inverted.pulsating.transition {
144
+ box-shadow: 0 0 0 0 rgba(162, 145, 251, 0.7);
145
+ }
146
+ .purple.pulsating.transition {
147
+ box-shadow: 0 0 0 0 rgba(163, 51, 200, 0.5);
148
+ }
149
+ .purple.inverted.pulsating.transition {
150
+ box-shadow: 0 0 0 0 rgba(220, 115, 255, 0.7);
151
+ }
152
+ .pink.pulsating.transition {
153
+ box-shadow: 0 0 0 0 rgba(224, 57, 151, 0.5);
154
+ }
155
+ .pink.inverted.pulsating.transition {
156
+ box-shadow: 0 0 0 0 rgba(255, 142, 223, 0.7);
157
+ }
158
+ .brown.pulsating.transition {
159
+ box-shadow: 0 0 0 0 rgba(165, 103, 63, 0.5);
160
+ }
161
+ .brown.inverted.pulsating.transition {
162
+ box-shadow: 0 0 0 0 rgba(214, 124, 28, 0.7);
163
+ }
164
+ .grey.pulsating.transition {
165
+ box-shadow: 0 0 0 0 rgba(118, 118, 118, 0.5);
166
+ }
167
+ .grey.inverted.pulsating.transition {
168
+ box-shadow: 0 0 0 0 rgba(220, 221, 222, 0.7);
169
+ }
170
+ .black.pulsating.transition {
171
+ box-shadow: 0 0 0 0 rgba(27, 28, 29, 0.5);
172
+ }
173
+ .black.inverted.pulsating.transition {
174
+ box-shadow: 0 0 0 0 rgba(84, 84, 84, 0.7);
75
175
  }
76
176
 
77
177
 
@@ -87,289 +187,155 @@
87
187
  by Nick Pettit - https://github.com/nickpettit/glide
88
188
  */
89
189
 
90
- /*--------------
91
- Browse
92
- ---------------*/
93
-
190
+ /* --------------
191
+ Browse
192
+ --------------- */
94
193
  .transition.browse {
95
- -webkit-animation-duration: 500ms;
96
- animation-duration: 500ms;
194
+ animation-duration: 500ms;
97
195
  }
98
196
  .transition.browse.in {
99
- -webkit-animation-name: browseIn;
100
- animation-name: browseIn;
197
+ animation-name: browseIn;
101
198
  }
102
199
  .transition.browse.out,
103
200
  .transition.browse.left.out {
104
- -webkit-animation-name: browseOutLeft;
105
- animation-name: browseOutLeft;
201
+ animation-name: browseOutLeft;
106
202
  }
107
203
  .transition.browse.right.out {
108
- -webkit-animation-name: browseOutRight;
109
- animation-name: browseOutRight;
204
+ animation-name: browseOutRight;
110
205
  }
111
206
 
112
207
  /* 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
208
  @keyframes browseIn {
138
209
  0% {
139
- -webkit-transform: scale(0.8) translateZ(0px);
140
- transform: scale(0.8) translateZ(0px);
210
+ transform: scale(0.8) translateZ(0);
141
211
  z-index: -1;
142
212
  }
143
213
  10% {
144
- -webkit-transform: scale(0.8) translateZ(0px);
145
- transform: scale(0.8) translateZ(0px);
214
+ transform: scale(0.8) translateZ(0);
146
215
  z-index: -1;
147
216
  opacity: 0.7;
148
217
  }
149
218
  80% {
150
- -webkit-transform: scale(1.05) translateZ(0px);
151
- transform: scale(1.05) translateZ(0px);
219
+ transform: scale(1.05) translateZ(0);
152
220
  opacity: 1;
153
221
  z-index: 999;
154
222
  }
155
223
  100% {
156
- -webkit-transform: scale(1) translateZ(0px);
157
- transform: scale(1) translateZ(0px);
224
+ transform: scale(1) translateZ(0);
158
225
  z-index: 999;
159
226
  }
160
227
  }
161
228
 
162
229
  /* 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
230
  @keyframes browseOutLeft {
185
231
  0% {
186
232
  z-index: 999;
187
- -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
188
- transform: translateX(0%) rotateY(0deg) rotateX(0deg);
233
+ transform: translateX(0) rotateY(0) rotateX(0);
189
234
  }
190
235
  50% {
191
236
  z-index: -1;
192
- -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
193
- transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
237
+ transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
194
238
  }
195
239
  80% {
196
240
  opacity: 1;
197
241
  }
198
242
  100% {
199
243
  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);
244
+ transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px);
223
245
  opacity: 0;
224
246
  }
225
247
  }
226
248
  @keyframes browseOutRight {
227
249
  0% {
228
250
  z-index: 999;
229
- -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
230
- transform: translateX(0%) rotateY(0deg) rotateX(0deg);
251
+ transform: translateX(0) rotateY(0) rotateX(0);
231
252
  }
232
253
  50% {
233
254
  z-index: 1;
234
- -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
235
- transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
255
+ transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
236
256
  }
237
257
  80% {
238
258
  opacity: 1;
239
259
  }
240
260
  100% {
241
261
  z-index: 1;
242
- -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
243
- transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
262
+ transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px);
244
263
  opacity: 0;
245
264
  }
246
265
  }
247
266
 
248
- /*--------------
249
- Drop
250
- ---------------*/
251
-
267
+ /* --------------
268
+ Drop
269
+ --------------- */
252
270
  .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);
271
+ transform-origin: top center;
272
+ animation-duration: 400ms;
273
+ animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
259
274
  }
260
275
  .drop.transition.in {
261
- -webkit-animation-name: dropIn;
262
- animation-name: dropIn;
276
+ animation-name: dropIn;
263
277
  }
264
278
  .drop.transition.out {
265
- -webkit-animation-name: dropOut;
266
- animation-name: dropOut;
279
+ animation-name: dropOut;
267
280
  }
268
281
 
269
282
  /* 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
283
  @keyframes dropIn {
283
284
  0% {
284
285
  opacity: 0;
285
- -webkit-transform: scale(0);
286
- transform: scale(0);
286
+ transform: scale(0);
287
287
  }
288
288
  100% {
289
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);
290
+ transform: scale(1);
304
291
  }
305
292
  }
306
293
  @keyframes dropOut {
307
294
  0% {
308
295
  opacity: 1;
309
- -webkit-transform: scale(1);
310
- transform: scale(1);
296
+ transform: scale(1);
311
297
  }
312
298
  100% {
313
299
  opacity: 0;
314
- -webkit-transform: scale(0);
315
- transform: scale(0);
300
+ transform: scale(0);
316
301
  }
317
302
  }
318
303
 
319
- /*--------------
320
- Fade
321
- ---------------*/
322
-
304
+ /* --------------
305
+ Fade
306
+ --------------- */
323
307
  .transition.fade.in {
324
- -webkit-animation-name: fadeIn;
325
- animation-name: fadeIn;
308
+ animation-name: fadeIn;
326
309
  }
327
310
  .transition[class*="fade up"].in {
328
- -webkit-animation-name: fadeInUp;
329
- animation-name: fadeInUp;
311
+ animation-name: fadeInUp;
330
312
  }
331
313
  .transition[class*="fade down"].in {
332
- -webkit-animation-name: fadeInDown;
333
- animation-name: fadeInDown;
314
+ animation-name: fadeInDown;
334
315
  }
335
316
  .transition[class*="fade left"].in {
336
- -webkit-animation-name: fadeInLeft;
337
- animation-name: fadeInLeft;
317
+ animation-name: fadeInLeft;
338
318
  }
339
319
  .transition[class*="fade right"].in {
340
- -webkit-animation-name: fadeInRight;
341
- animation-name: fadeInRight;
320
+ animation-name: fadeInRight;
342
321
  }
343
322
  .transition.fade.out {
344
- -webkit-animation-name: fadeOut;
345
- animation-name: fadeOut;
323
+ animation-name: fadeOut;
346
324
  }
347
325
  .transition[class*="fade up"].out {
348
- -webkit-animation-name: fadeOutUp;
349
- animation-name: fadeOutUp;
326
+ animation-name: fadeOutUp;
350
327
  }
351
328
  .transition[class*="fade down"].out {
352
- -webkit-animation-name: fadeOutDown;
353
- animation-name: fadeOutDown;
329
+ animation-name: fadeOutDown;
354
330
  }
355
331
  .transition[class*="fade left"].out {
356
- -webkit-animation-name: fadeOutLeft;
357
- animation-name: fadeOutLeft;
332
+ animation-name: fadeOutLeft;
358
333
  }
359
334
  .transition[class*="fade right"].out {
360
- -webkit-animation-name: fadeOutRight;
361
- animation-name: fadeOutRight;
335
+ animation-name: fadeOutRight;
362
336
  }
363
337
 
364
338
  /* In */
365
- @-webkit-keyframes fadeIn {
366
- 0% {
367
- opacity: 0;
368
- }
369
- 100% {
370
- opacity: 1;
371
- }
372
- }
373
339
  @keyframes fadeIn {
374
340
  0% {
375
341
  opacity: 0;
@@ -378,112 +344,48 @@
378
344
  opacity: 1;
379
345
  }
380
346
  }
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
347
  @keyframes fadeInUp {
394
348
  0% {
395
349
  opacity: 0;
396
- -webkit-transform: translateY(10%);
397
- transform: translateY(10%);
350
+ transform: translateY(10%);
398
351
  }
399
352
  100% {
400
353
  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%);
354
+ transform: translateY(0);
415
355
  }
416
356
  }
417
357
  @keyframes fadeInDown {
418
358
  0% {
419
359
  opacity: 0;
420
- -webkit-transform: translateY(-10%);
421
- transform: translateY(-10%);
360
+ transform: translateY(-10%);
422
361
  }
423
362
  100% {
424
363
  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%);
364
+ transform: translateY(0);
439
365
  }
440
366
  }
441
367
  @keyframes fadeInLeft {
442
368
  0% {
443
369
  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%);
370
+ transform: translateX(10%);
458
371
  }
459
372
  100% {
460
373
  opacity: 1;
461
- -webkit-transform: translateX(0%);
462
- transform: translateX(0%);
374
+ transform: translateX(0);
463
375
  }
464
376
  }
465
377
  @keyframes fadeInRight {
466
378
  0% {
467
379
  opacity: 0;
468
- -webkit-transform: translateX(-10%);
469
- transform: translateX(-10%);
380
+ transform: translateX(-10%);
470
381
  }
471
382
  100% {
472
383
  opacity: 1;
473
- -webkit-transform: translateX(0%);
474
- transform: translateX(0%);
384
+ transform: translateX(0);
475
385
  }
476
386
  }
477
387
 
478
388
  /* Out */
479
- @-webkit-keyframes fadeOut {
480
- 0% {
481
- opacity: 1;
482
- }
483
- 100% {
484
- opacity: 0;
485
- }
486
- }
487
389
  @keyframes fadeOut {
488
390
  0% {
489
391
  opacity: 1;
@@ -492,1218 +394,579 @@
492
394
  opacity: 0;
493
395
  }
494
396
  }
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
397
  @keyframes fadeOutUp {
508
398
  0% {
509
399
  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%);
400
+ transform: translateY(0);
524
401
  }
525
402
  100% {
526
403
  opacity: 0;
527
- -webkit-transform: translateY(-5%);
528
- transform: translateY(-5%);
404
+ transform: translateY(5%);
529
405
  }
530
406
  }
531
407
  @keyframes fadeOutDown {
532
408
  0% {
533
409
  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%);
410
+ transform: translateY(0);
548
411
  }
549
412
  100% {
550
413
  opacity: 0;
551
- -webkit-transform: translateX(5%);
552
- transform: translateX(5%);
414
+ transform: translateY(-5%);
553
415
  }
554
416
  }
555
417
  @keyframes fadeOutLeft {
556
418
  0% {
557
419
  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%);
420
+ transform: translateX(0);
572
421
  }
573
422
  100% {
574
423
  opacity: 0;
575
- -webkit-transform: translateX(-5%);
576
- transform: translateX(-5%);
424
+ transform: translateX(5%);
577
425
  }
578
426
  }
579
427
  @keyframes fadeOutRight {
580
428
  0% {
581
429
  opacity: 1;
582
- -webkit-transform: translateX(0%);
583
- transform: translateX(0%);
430
+ transform: translateX(0);
584
431
  }
585
432
  100% {
586
433
  opacity: 0;
587
- -webkit-transform: translateX(-5%);
588
- transform: translateX(-5%);
434
+ transform: translateX(-5%);
589
435
  }
590
436
  }
591
437
 
592
- /*--------------
593
- Flips
594
- ---------------*/
595
-
438
+ /* --------------
439
+ Flips
440
+ --------------- */
596
441
  .flip.transition.in,
597
442
  .flip.transition.out {
598
- -webkit-animation-duration: 600ms;
599
- animation-duration: 600ms;
443
+ animation-duration: 600ms;
600
444
  }
601
445
  .horizontal.flip.transition.in {
602
- -webkit-animation-name: horizontalFlipIn;
603
- animation-name: horizontalFlipIn;
446
+ animation-name: horizontalFlipIn;
604
447
  }
605
448
  .horizontal.flip.transition.out {
606
- -webkit-animation-name: horizontalFlipOut;
607
- animation-name: horizontalFlipOut;
449
+ animation-name: horizontalFlipOut;
608
450
  }
609
451
  .vertical.flip.transition.in {
610
- -webkit-animation-name: verticalFlipIn;
611
- animation-name: verticalFlipIn;
452
+ animation-name: verticalFlipIn;
612
453
  }
613
454
  .vertical.flip.transition.out {
614
- -webkit-animation-name: verticalFlipOut;
615
- animation-name: verticalFlipOut;
455
+ animation-name: verticalFlipOut;
616
456
  }
617
457
 
618
458
  /* 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
459
  @keyframes horizontalFlipIn {
632
460
  0% {
633
- -webkit-transform: perspective(2000px) rotateY(-90deg);
634
- transform: perspective(2000px) rotateY(-90deg);
461
+ transform: perspective(2000px) rotateY(-90deg);
635
462
  opacity: 0;
636
463
  }
637
464
  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);
465
+ transform: perspective(2000px) rotateY(0);
652
466
  opacity: 1;
653
467
  }
654
468
  }
655
469
  @keyframes verticalFlipIn {
656
470
  0% {
657
- -webkit-transform: perspective(2000px) rotateX(-90deg);
658
- transform: perspective(2000px) rotateX(-90deg);
471
+ transform: perspective(2000px) rotateX(-90deg);
659
472
  opacity: 0;
660
473
  }
661
474
  100% {
662
- -webkit-transform: perspective(2000px) rotateX(0deg);
663
- transform: perspective(2000px) rotateX(0deg);
475
+ transform: perspective(2000px) rotateX(0);
664
476
  opacity: 1;
665
477
  }
666
478
  }
667
479
 
668
480
  /* 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
481
  @keyframes horizontalFlipOut {
682
482
  0% {
683
- -webkit-transform: perspective(2000px) rotateY(0deg);
684
- transform: perspective(2000px) rotateY(0deg);
483
+ transform: perspective(2000px) rotateY(0);
685
484
  opacity: 1;
686
485
  }
687
486
  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);
487
+ transform: perspective(2000px) rotateY(90deg);
702
488
  opacity: 0;
703
489
  }
704
490
  }
705
491
  @keyframes verticalFlipOut {
706
492
  0% {
707
- -webkit-transform: perspective(2000px) rotateX(0deg);
708
- transform: perspective(2000px) rotateX(0deg);
493
+ transform: perspective(2000px) rotateX(0);
709
494
  opacity: 1;
710
495
  }
711
496
  100% {
712
- -webkit-transform: perspective(2000px) rotateX(-90deg);
713
- transform: perspective(2000px) rotateX(-90deg);
497
+ transform: perspective(2000px) rotateX(-90deg);
714
498
  opacity: 0;
715
499
  }
716
500
  }
717
501
 
718
- /*--------------
719
- Scale
720
- ---------------*/
721
-
502
+ /* --------------
503
+ Scale
504
+ --------------- */
722
505
  .scale.transition.in {
723
- -webkit-animation-name: scaleIn;
724
- animation-name: scaleIn;
506
+ animation-name: scaleIn;
725
507
  }
726
508
  .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
- }
509
+ animation-name: scaleOut;
741
510
  }
742
511
  @keyframes scaleIn {
743
512
  0% {
744
513
  opacity: 0;
745
- -webkit-transform: scale(0.8);
746
- transform: scale(0.8);
514
+ transform: scale(0.8);
747
515
  }
748
516
  100% {
749
517
  opacity: 1;
750
- -webkit-transform: scale(1);
751
- transform: scale(1);
518
+ transform: scale(1);
752
519
  }
753
520
  }
754
521
 
755
522
  /* 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
523
  @keyframes scaleOut {
769
524
  0% {
770
525
  opacity: 1;
771
- -webkit-transform: scale(1);
772
- transform: scale(1);
526
+ transform: scale(1);
773
527
  }
774
528
  100% {
775
529
  opacity: 0;
776
- -webkit-transform: scale(0.9);
777
- transform: scale(0.9);
530
+ transform: scale(0.9);
778
531
  }
779
532
  }
780
533
 
781
- /*--------------
782
- Fly
783
- ---------------*/
784
-
534
+ /* --------------
535
+ Fly
536
+ --------------- */
785
537
 
786
538
  /* Inward */
787
539
  .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);
540
+ animation-duration: 0.6s;
541
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
792
542
  }
793
543
  .transition.fly.in {
794
- -webkit-animation-name: flyIn;
795
- animation-name: flyIn;
544
+ animation-name: flyIn;
796
545
  }
797
546
  .transition[class*="fly up"].in {
798
- -webkit-animation-name: flyInUp;
799
- animation-name: flyInUp;
547
+ animation-name: flyInUp;
800
548
  }
801
549
  .transition[class*="fly down"].in {
802
- -webkit-animation-name: flyInDown;
803
- animation-name: flyInDown;
550
+ animation-name: flyInDown;
804
551
  }
805
552
  .transition[class*="fly left"].in {
806
- -webkit-animation-name: flyInLeft;
807
- animation-name: flyInLeft;
553
+ animation-name: flyInLeft;
808
554
  }
809
555
  .transition[class*="fly right"].in {
810
- -webkit-animation-name: flyInRight;
811
- animation-name: flyInRight;
556
+ animation-name: flyInRight;
812
557
  }
813
558
 
814
559
  /* Outward */
815
560
  .transition.fly.out {
816
- -webkit-animation-name: flyOut;
817
- animation-name: flyOut;
561
+ animation-name: flyOut;
818
562
  }
819
563
  .transition[class*="fly up"].out {
820
- -webkit-animation-name: flyOutUp;
821
- animation-name: flyOutUp;
564
+ animation-name: flyOutUp;
822
565
  }
823
566
  .transition[class*="fly down"].out {
824
- -webkit-animation-name: flyOutDown;
825
- animation-name: flyOutDown;
567
+ animation-name: flyOutDown;
826
568
  }
827
569
  .transition[class*="fly left"].out {
828
- -webkit-animation-name: flyOutLeft;
829
- animation-name: flyOutLeft;
570
+ animation-name: flyOutLeft;
830
571
  }
831
572
  .transition[class*="fly right"].out {
832
- -webkit-animation-name: flyOutRight;
833
- animation-name: flyOutRight;
573
+ animation-name: flyOutRight;
834
574
  }
835
575
 
836
576
  /* 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
577
  @keyframes flyIn {
867
578
  0% {
868
579
  opacity: 0;
869
- -webkit-transform: scale3d(0.3, 0.3, 0.3);
870
- transform: scale3d(0.3, 0.3, 0.3);
580
+ transform: scale3d(0.3, 0.3, 0.3);
871
581
  }
872
582
  20% {
873
- -webkit-transform: scale3d(1.1, 1.1, 1.1);
874
- transform: scale3d(1.1, 1.1, 1.1);
583
+ transform: scale3d(1.1, 1.1, 1.1);
875
584
  }
876
585
  40% {
877
- -webkit-transform: scale3d(0.9, 0.9, 0.9);
878
- transform: scale3d(0.9, 0.9, 0.9);
586
+ transform: scale3d(0.9, 0.9, 0.9);
879
587
  }
880
588
  60% {
881
589
  opacity: 1;
882
- -webkit-transform: scale3d(1.03, 1.03, 1.03);
883
- transform: scale3d(1.03, 1.03, 1.03);
590
+ transform: scale3d(1.03, 1.03, 1.03);
884
591
  }
885
592
  80% {
886
- -webkit-transform: scale3d(0.97, 0.97, 0.97);
887
- transform: scale3d(0.97, 0.97, 0.97);
593
+ transform: scale3d(0.97, 0.97, 0.97);
888
594
  }
889
595
  100% {
890
596
  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);
597
+ transform: scale3d(1, 1, 1);
917
598
  }
918
599
  }
919
600
  @keyframes flyInUp {
920
601
  0% {
921
602
  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);
603
+ transform: translate3d(0, 1500px, 0);
948
604
  }
949
605
  60% {
950
606
  opacity: 1;
951
- -webkit-transform: translate3d(0, 25px, 0);
952
- transform: translate3d(0, 25px, 0);
607
+ transform: translate3d(0, -20px, 0);
953
608
  }
954
609
  75% {
955
- -webkit-transform: translate3d(0, -10px, 0);
956
- transform: translate3d(0, -10px, 0);
610
+ transform: translate3d(0, 10px, 0);
957
611
  }
958
612
  90% {
959
- -webkit-transform: translate3d(0, 5px, 0);
960
- transform: translate3d(0, 5px, 0);
613
+ transform: translate3d(0, -5px, 0);
961
614
  }
962
615
  100% {
963
- -webkit-transform: none;
964
- transform: none;
616
+ transform: translate3d(0, 0, 0);
965
617
  }
966
618
  }
967
619
  @keyframes flyInDown {
968
620
  0% {
969
621
  opacity: 0;
970
- -webkit-transform: translate3d(0, -1500px, 0);
971
- transform: translate3d(0, -1500px, 0);
622
+ transform: translate3d(0, -1500px, 0);
972
623
  }
973
624
  60% {
974
625
  opacity: 1;
975
- -webkit-transform: translate3d(0, 25px, 0);
976
- transform: translate3d(0, 25px, 0);
626
+ transform: translate3d(0, 25px, 0);
977
627
  }
978
628
  75% {
979
- -webkit-transform: translate3d(0, -10px, 0);
980
- transform: translate3d(0, -10px, 0);
629
+ transform: translate3d(0, -10px, 0);
981
630
  }
982
631
  90% {
983
- -webkit-transform: translate3d(0, 5px, 0);
984
- transform: translate3d(0, 5px, 0);
632
+ transform: translate3d(0, 5px, 0);
985
633
  }
986
634
  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;
635
+ transform: none;
1013
636
  }
1014
637
  }
1015
638
  @keyframes flyInLeft {
1016
639
  0% {
1017
640
  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);
641
+ transform: translate3d(1500px, 0, 0);
1044
642
  }
1045
643
  60% {
1046
644
  opacity: 1;
1047
- -webkit-transform: translate3d(25px, 0, 0);
1048
- transform: translate3d(25px, 0, 0);
645
+ transform: translate3d(-25px, 0, 0);
1049
646
  }
1050
647
  75% {
1051
- -webkit-transform: translate3d(-10px, 0, 0);
1052
- transform: translate3d(-10px, 0, 0);
648
+ transform: translate3d(10px, 0, 0);
1053
649
  }
1054
650
  90% {
1055
- -webkit-transform: translate3d(5px, 0, 0);
1056
- transform: translate3d(5px, 0, 0);
651
+ transform: translate3d(-5px, 0, 0);
1057
652
  }
1058
653
  100% {
1059
- -webkit-transform: none;
1060
- transform: none;
654
+ transform: none;
1061
655
  }
1062
656
  }
1063
657
  @keyframes flyInRight {
1064
658
  0% {
1065
659
  opacity: 0;
1066
- -webkit-transform: translate3d(-1500px, 0, 0);
1067
- transform: translate3d(-1500px, 0, 0);
660
+ transform: translate3d(-1500px, 0, 0);
1068
661
  }
1069
662
  60% {
1070
663
  opacity: 1;
1071
- -webkit-transform: translate3d(25px, 0, 0);
1072
- transform: translate3d(25px, 0, 0);
664
+ transform: translate3d(25px, 0, 0);
1073
665
  }
1074
666
  75% {
1075
- -webkit-transform: translate3d(-10px, 0, 0);
1076
- transform: translate3d(-10px, 0, 0);
667
+ transform: translate3d(-10px, 0, 0);
1077
668
  }
1078
669
  90% {
1079
- -webkit-transform: translate3d(5px, 0, 0);
1080
- transform: translate3d(5px, 0, 0);
670
+ transform: translate3d(5px, 0, 0);
1081
671
  }
1082
672
  100% {
1083
- -webkit-transform: none;
1084
- transform: none;
673
+ transform: none;
1085
674
  }
1086
675
  }
1087
676
 
1088
677
  /* 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
678
  @keyframes flyOut {
1107
679
  20% {
1108
- -webkit-transform: scale3d(0.9, 0.9, 0.9);
1109
- transform: scale3d(0.9, 0.9, 0.9);
680
+ transform: scale3d(0.9, 0.9, 0.9);
1110
681
  }
1111
682
  50%,
1112
683
  55% {
1113
684
  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);
685
+ transform: scale3d(1.1, 1.1, 1.1);
1133
686
  }
1134
687
  100% {
1135
688
  opacity: 0;
1136
- -webkit-transform: translate3d(0, 2000px, 0);
1137
- transform: translate3d(0, 2000px, 0);
689
+ transform: scale3d(0.3, 0.3, 0.3);
1138
690
  }
1139
691
  }
1140
692
  @keyframes flyOutUp {
1141
693
  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);
694
+ transform: translate3d(0, 10px, 0);
1161
695
  }
1162
696
  40%,
1163
697
  45% {
1164
698
  opacity: 1;
1165
- -webkit-transform: translate3d(0, 20px, 0);
1166
- transform: translate3d(0, 20px, 0);
699
+ transform: translate3d(0, -20px, 0);
1167
700
  }
1168
701
  100% {
1169
702
  opacity: 0;
1170
- -webkit-transform: translate3d(0, -2000px, 0);
1171
- transform: translate3d(0, -2000px, 0);
703
+ transform: translate3d(0, 2000px, 0);
1172
704
  }
1173
705
  }
1174
706
  @keyframes flyOutDown {
1175
707
  20% {
1176
- -webkit-transform: translate3d(0, -10px, 0);
1177
- transform: translate3d(0, -10px, 0);
708
+ transform: translate3d(0, -10px, 0);
1178
709
  }
1179
710
  40%,
1180
711
  45% {
1181
712
  opacity: 1;
1182
- -webkit-transform: translate3d(0, 20px, 0);
1183
- transform: translate3d(0, 20px, 0);
713
+ transform: translate3d(0, 20px, 0);
1184
714
  }
1185
715
  100% {
1186
716
  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);
717
+ transform: translate3d(0, -2000px, 0);
1201
718
  }
1202
719
  }
1203
720
  @keyframes flyOutRight {
1204
721
  20% {
1205
722
  opacity: 1;
1206
- -webkit-transform: translate3d(20px, 0, 0);
1207
- transform: translate3d(20px, 0, 0);
723
+ transform: translate3d(20px, 0, 0);
1208
724
  }
1209
725
  100% {
1210
726
  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);
727
+ transform: translate3d(-2000px, 0, 0);
1225
728
  }
1226
729
  }
1227
730
  @keyframes flyOutLeft {
1228
731
  20% {
1229
732
  opacity: 1;
1230
- -webkit-transform: translate3d(-20px, 0, 0);
1231
- transform: translate3d(-20px, 0, 0);
733
+ transform: translate3d(-20px, 0, 0);
1232
734
  }
1233
735
  100% {
1234
736
  opacity: 0;
1235
- -webkit-transform: translate3d(2000px, 0, 0);
1236
- transform: translate3d(2000px, 0, 0);
737
+ transform: translate3d(2000px, 0, 0);
1237
738
  }
1238
739
  }
1239
740
 
1240
- /*--------------
1241
- Slide
1242
- ---------------*/
1243
-
741
+ /* --------------
742
+ Slide
743
+ --------------- */
1244
744
  .transition.slide.in,
1245
745
  .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;
746
+ animation-name: slideInY;
747
+ transform-origin: top center;
1250
748
  }
1251
749
  .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;
750
+ animation-name: slideInY;
751
+ transform-origin: bottom center;
1256
752
  }
1257
753
  .transition[class*="slide left"].in {
1258
- -webkit-animation-name: slideInX;
1259
- animation-name: slideInX;
1260
- -webkit-transform-origin: right center;
1261
- transform-origin: right center;
754
+ animation-name: slideInX;
755
+ transform-origin: right center;
1262
756
  }
1263
757
  .transition[class*="slide right"].in {
1264
- -webkit-animation-name: slideInX;
1265
- animation-name: slideInX;
1266
- -webkit-transform-origin: left center;
1267
- transform-origin: left center;
758
+ animation-name: slideInX;
759
+ transform-origin: left center;
1268
760
  }
1269
761
  .transition.slide.out,
1270
762
  .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;
763
+ animation-name: slideOutY;
764
+ transform-origin: top center;
1275
765
  }
1276
766
  .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;
767
+ animation-name: slideOutY;
768
+ transform-origin: bottom center;
1281
769
  }
1282
770
  .transition[class*="slide left"].out {
1283
- -webkit-animation-name: slideOutX;
1284
- animation-name: slideOutX;
1285
- -webkit-transform-origin: right center;
1286
- transform-origin: right center;
771
+ animation-name: slideOutX;
772
+ transform-origin: right center;
1287
773
  }
1288
774
  .transition[class*="slide right"].out {
1289
- -webkit-animation-name: slideOutX;
1290
- animation-name: slideOutX;
1291
- -webkit-transform-origin: left center;
1292
- transform-origin: left center;
775
+ animation-name: slideOutX;
776
+ transform-origin: left center;
1293
777
  }
1294
778
 
1295
779
  /* 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
780
  @keyframes slideInY {
1309
781
  0% {
1310
782
  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);
783
+ transform: scaleY(0);
1325
784
  }
1326
785
  100% {
1327
786
  opacity: 1;
1328
- -webkit-transform: scaleX(1);
1329
- transform: scaleX(1);
787
+ transform: scaleY(1);
1330
788
  }
1331
789
  }
1332
790
  @keyframes slideInX {
1333
791
  0% {
1334
792
  opacity: 0;
1335
- -webkit-transform: scaleX(0);
1336
- transform: scaleX(0);
793
+ transform: scaleX(0);
1337
794
  }
1338
795
  100% {
1339
796
  opacity: 1;
1340
- -webkit-transform: scaleX(1);
1341
- transform: scaleX(1);
797
+ transform: scaleX(1);
1342
798
  }
1343
799
  }
1344
800
 
1345
801
  /* 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
802
  @keyframes slideOutY {
1359
803
  0% {
1360
804
  opacity: 1;
1361
- -webkit-transform: scaleY(1);
1362
- transform: scaleY(1);
805
+ transform: scaleY(1);
1363
806
  }
1364
807
  100% {
1365
808
  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);
809
+ transform: scaleY(0);
1380
810
  }
1381
811
  }
1382
812
  @keyframes slideOutX {
1383
813
  0% {
1384
814
  opacity: 1;
1385
- -webkit-transform: scaleX(1);
1386
- transform: scaleX(1);
815
+ transform: scaleX(1);
1387
816
  }
1388
817
  100% {
1389
818
  opacity: 0;
1390
- -webkit-transform: scaleX(0);
1391
- transform: scaleX(0);
819
+ transform: scaleX(0);
1392
820
  }
1393
821
  }
1394
822
 
1395
- /*--------------
1396
- Swing
1397
- ---------------*/
1398
-
823
+ /* --------------
824
+ Swing
825
+ --------------- */
1399
826
  .transition.swing {
1400
- -webkit-animation-duration: 800ms;
1401
- animation-duration: 800ms;
827
+ animation-duration: 800ms;
1402
828
  }
1403
829
  .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;
830
+ animation-name: swingInX;
831
+ transform-origin: top center;
1408
832
  }
1409
833
  .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;
834
+ animation-name: swingInX;
835
+ transform-origin: bottom center;
1414
836
  }
1415
837
  .transition[class*="swing left"].in {
1416
- -webkit-animation-name: swingInY;
1417
- animation-name: swingInY;
1418
- -webkit-transform-origin: right center;
1419
- transform-origin: right center;
838
+ animation-name: swingInY;
839
+ transform-origin: right center;
1420
840
  }
1421
841
  .transition[class*="swing right"].in {
1422
- -webkit-animation-name: swingInY;
1423
- animation-name: swingInY;
1424
- -webkit-transform-origin: left center;
1425
- transform-origin: left center;
842
+ animation-name: swingInY;
843
+ transform-origin: left center;
1426
844
  }
1427
845
  .transition.swing.out,
1428
846
  .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;
847
+ animation-name: swingOutX;
848
+ transform-origin: top center;
1433
849
  }
1434
850
  .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;
851
+ animation-name: swingOutX;
852
+ transform-origin: bottom center;
1439
853
  }
1440
854
  .transition[class*="swing left"].out {
1441
- -webkit-animation-name: swingOutY;
1442
- animation-name: swingOutY;
1443
- -webkit-transform-origin: right center;
1444
- transform-origin: right center;
855
+ animation-name: swingOutY;
856
+ transform-origin: right center;
1445
857
  }
1446
858
  .transition[class*="swing right"].out {
1447
- -webkit-animation-name: swingOutY;
1448
- animation-name: swingOutY;
1449
- -webkit-transform-origin: left center;
1450
- transform-origin: left center;
859
+ animation-name: swingOutY;
860
+ transform-origin: left center;
1451
861
  }
1452
862
 
1453
863
  /* 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
864
  @keyframes swingInX {
1479
865
  0% {
1480
- -webkit-transform: perspective(1000px) rotateX(90deg);
1481
- transform: perspective(1000px) rotateX(90deg);
866
+ transform: perspective(1000px) rotateX(90deg);
1482
867
  opacity: 0;
1483
868
  }
1484
869
  40% {
1485
- -webkit-transform: perspective(1000px) rotateX(-30deg);
1486
- transform: perspective(1000px) rotateX(-30deg);
870
+ transform: perspective(1000px) rotateX(-30deg);
1487
871
  opacity: 1;
1488
872
  }
1489
873
  60% {
1490
- -webkit-transform: perspective(1000px) rotateX(15deg);
1491
- transform: perspective(1000px) rotateX(15deg);
874
+ transform: perspective(1000px) rotateX(15deg);
1492
875
  }
1493
876
  80% {
1494
- -webkit-transform: perspective(1000px) rotateX(-7.5deg);
1495
- transform: perspective(1000px) rotateX(-7.5deg);
877
+ transform: perspective(1000px) rotateX(-7.5deg);
1496
878
  }
1497
879
  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);
880
+ transform: perspective(1000px) rotateX(0);
1524
881
  }
1525
882
  }
1526
883
  @keyframes swingInY {
1527
884
  0% {
1528
- -webkit-transform: perspective(1000px) rotateY(-90deg);
1529
- transform: perspective(1000px) rotateY(-90deg);
885
+ transform: perspective(1000px) rotateY(-90deg);
1530
886
  opacity: 0;
1531
887
  }
1532
888
  40% {
1533
- -webkit-transform: perspective(1000px) rotateY(30deg);
1534
- transform: perspective(1000px) rotateY(30deg);
889
+ transform: perspective(1000px) rotateY(30deg);
1535
890
  opacity: 1;
1536
891
  }
1537
892
  60% {
1538
- -webkit-transform: perspective(1000px) rotateY(-17.5deg);
1539
- transform: perspective(1000px) rotateY(-17.5deg);
893
+ transform: perspective(1000px) rotateY(-17.5deg);
1540
894
  }
1541
895
  80% {
1542
- -webkit-transform: perspective(1000px) rotateY(7.5deg);
1543
- transform: perspective(1000px) rotateY(7.5deg);
896
+ transform: perspective(1000px) rotateY(7.5deg);
1544
897
  }
1545
898
  100% {
1546
- -webkit-transform: perspective(1000px) rotateY(0deg);
1547
- transform: perspective(1000px) rotateY(0deg);
899
+ transform: perspective(1000px) rotateY(0);
1548
900
  }
1549
901
  }
1550
902
 
1551
903
  /* 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
904
  @keyframes swingOutX {
1577
905
  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);
906
+ transform: perspective(1000px) rotateX(0);
1604
907
  }
1605
908
  40% {
1606
- -webkit-transform: perspective(1000px) rotateY(7.5deg);
1607
- transform: perspective(1000px) rotateY(7.5deg);
909
+ transform: perspective(1000px) rotateX(-7.5deg);
1608
910
  }
1609
911
  60% {
1610
- -webkit-transform: perspective(1000px) rotateY(-10deg);
1611
- transform: perspective(1000px) rotateY(-10deg);
912
+ transform: perspective(1000px) rotateX(17.5deg);
1612
913
  }
1613
914
  80% {
1614
- -webkit-transform: perspective(1000px) rotateY(30deg);
1615
- transform: perspective(1000px) rotateY(30deg);
915
+ transform: perspective(1000px) rotateX(-30deg);
1616
916
  opacity: 1;
1617
917
  }
1618
918
  100% {
1619
- -webkit-transform: perspective(1000px) rotateY(-90deg);
1620
- transform: perspective(1000px) rotateY(-90deg);
919
+ transform: perspective(1000px) rotateX(90deg);
1621
920
  opacity: 0;
1622
921
  }
1623
922
  }
1624
923
  @keyframes swingOutY {
1625
924
  0% {
1626
- -webkit-transform: perspective(1000px) rotateY(0deg);
1627
- transform: perspective(1000px) rotateY(0deg);
925
+ transform: perspective(1000px) rotateY(0);
1628
926
  }
1629
927
  40% {
1630
- -webkit-transform: perspective(1000px) rotateY(7.5deg);
1631
- transform: perspective(1000px) rotateY(7.5deg);
928
+ transform: perspective(1000px) rotateY(7.5deg);
1632
929
  }
1633
930
  60% {
1634
- -webkit-transform: perspective(1000px) rotateY(-10deg);
1635
- transform: perspective(1000px) rotateY(-10deg);
931
+ transform: perspective(1000px) rotateY(-10deg);
1636
932
  }
1637
933
  80% {
1638
- -webkit-transform: perspective(1000px) rotateY(30deg);
1639
- transform: perspective(1000px) rotateY(30deg);
934
+ transform: perspective(1000px) rotateY(30deg);
1640
935
  opacity: 1;
1641
936
  }
1642
937
  100% {
1643
- -webkit-transform: perspective(1000px) rotateY(-90deg);
1644
- transform: perspective(1000px) rotateY(-90deg);
938
+ transform: perspective(1000px) rotateY(-90deg);
1645
939
  opacity: 0;
1646
940
  }
1647
941
  }
1648
942
 
1649
- /*--------------
1650
- Zoom
1651
- ---------------*/
1652
-
943
+ /* --------------
944
+ Zoom
945
+ --------------- */
1653
946
  .transition.zoom.in {
1654
- -webkit-animation-name: zoomIn;
1655
- animation-name: zoomIn;
947
+ animation-name: zoomIn;
1656
948
  }
1657
949
  .transition.zoom.out {
1658
- -webkit-animation-name: zoomOut;
1659
- animation-name: zoomOut;
1660
- }
1661
- @-webkit-keyframes zoomIn {
1662
- 0% {
1663
- opacity: 1;
1664
- -webkit-transform: scale(0);
1665
- transform: scale(0);
1666
- }
1667
- 100% {
1668
- opacity: 1;
1669
- -webkit-transform: scale(1);
1670
- transform: scale(1);
1671
- }
950
+ animation-name: zoomOut;
1672
951
  }
1673
952
  @keyframes zoomIn {
1674
953
  0% {
1675
954
  opacity: 1;
1676
- -webkit-transform: scale(0);
1677
- transform: scale(0);
1678
- }
1679
- 100% {
1680
- opacity: 1;
1681
- -webkit-transform: scale(1);
1682
- transform: scale(1);
1683
- }
1684
- }
1685
- @-webkit-keyframes zoomOut {
1686
- 0% {
1687
- opacity: 1;
1688
- -webkit-transform: scale(1);
1689
- transform: scale(1);
955
+ transform: scale(0);
1690
956
  }
1691
957
  100% {
1692
958
  opacity: 1;
1693
- -webkit-transform: scale(0);
1694
- transform: scale(0);
959
+ transform: scale(1);
1695
960
  }
1696
961
  }
1697
962
  @keyframes zoomOut {
1698
963
  0% {
1699
964
  opacity: 1;
1700
- -webkit-transform: scale(1);
1701
- transform: scale(1);
965
+ transform: scale(1);
1702
966
  }
1703
967
  100% {
1704
968
  opacity: 1;
1705
- -webkit-transform: scale(0);
1706
- transform: scale(0);
969
+ transform: scale(0);
1707
970
  }
1708
971
  }
1709
972
 
@@ -1713,69 +976,42 @@
1713
976
  *******************************/
1714
977
 
1715
978
 
1716
- /*--------------
979
+ /* --------------
1717
980
  Emphasis
1718
- ---------------*/
1719
-
981
+ --------------- */
1720
982
  .flash.transition {
1721
- -webkit-animation-duration: 750ms;
1722
- animation-duration: 750ms;
1723
- -webkit-animation-name: flash;
1724
- animation-name: flash;
983
+ animation-duration: 750ms;
984
+ animation-name: flash;
1725
985
  }
1726
986
  .shake.transition {
1727
- -webkit-animation-duration: 750ms;
1728
- animation-duration: 750ms;
1729
- -webkit-animation-name: shake;
1730
- animation-name: shake;
987
+ animation-duration: 750ms;
988
+ animation-name: shake;
1731
989
  }
1732
990
  .bounce.transition {
1733
- -webkit-animation-duration: 750ms;
1734
- animation-duration: 750ms;
1735
- -webkit-animation-name: bounce;
1736
- animation-name: bounce;
991
+ animation-duration: 750ms;
992
+ animation-name: bounce;
1737
993
  }
1738
994
  .tada.transition {
1739
- -webkit-animation-duration: 750ms;
1740
- animation-duration: 750ms;
1741
- -webkit-animation-name: tada;
1742
- animation-name: tada;
995
+ animation-duration: 750ms;
996
+ animation-name: tada;
1743
997
  }
1744
998
  .pulse.transition {
1745
- -webkit-animation-duration: 500ms;
1746
- animation-duration: 500ms;
1747
- -webkit-animation-name: pulse;
1748
- animation-name: pulse;
999
+ animation-duration: 500ms;
1000
+ animation-name: pulse;
1749
1001
  }
1750
1002
  .jiggle.transition {
1751
- -webkit-animation-duration: 750ms;
1752
- animation-duration: 750ms;
1753
- -webkit-animation-name: jiggle;
1754
- animation-name: jiggle;
1003
+ animation-duration: 750ms;
1004
+ animation-name: jiggle;
1755
1005
  }
1756
1006
  .transition.glow {
1757
- -webkit-animation-duration: 2000ms;
1758
- animation-duration: 2000ms;
1759
- -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
1760
- animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
1007
+ animation-duration: 2000ms;
1008
+ animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
1761
1009
  }
1762
1010
  .transition.glow {
1763
- -webkit-animation-name: glow;
1764
- animation-name: glow;
1011
+ animation-name: glow;
1765
1012
  }
1766
1013
 
1767
1014
  /* Flash */
1768
- @-webkit-keyframes flash {
1769
- 0%,
1770
- 50%,
1771
- 100% {
1772
- opacity: 1;
1773
- }
1774
- 25%,
1775
- 75% {
1776
- opacity: 0;
1777
- }
1778
- }
1779
1015
  @keyframes flash {
1780
1016
  0%,
1781
1017
  50%,
@@ -1789,266 +1025,119 @@
1789
1025
  }
1790
1026
 
1791
1027
  /* Shake */
1792
- @-webkit-keyframes shake {
1793
- 0%,
1794
- 100% {
1795
- -webkit-transform: translateX(0);
1796
- transform: translateX(0);
1797
- }
1798
- 10%,
1799
- 30%,
1800
- 50%,
1801
- 70%,
1802
- 90% {
1803
- -webkit-transform: translateX(-10px);
1804
- transform: translateX(-10px);
1805
- }
1806
- 20%,
1807
- 40%,
1808
- 60%,
1809
- 80% {
1810
- -webkit-transform: translateX(10px);
1811
- transform: translateX(10px);
1812
- }
1813
- }
1814
1028
  @keyframes shake {
1815
1029
  0%,
1816
1030
  100% {
1817
- -webkit-transform: translateX(0);
1818
- transform: translateX(0);
1031
+ transform: translateX(0);
1819
1032
  }
1820
1033
  10%,
1821
1034
  30%,
1822
1035
  50%,
1823
1036
  70%,
1824
1037
  90% {
1825
- -webkit-transform: translateX(-10px);
1826
- transform: translateX(-10px);
1038
+ transform: translateX(-10px);
1827
1039
  }
1828
1040
  20%,
1829
1041
  40%,
1830
1042
  60%,
1831
1043
  80% {
1832
- -webkit-transform: translateX(10px);
1833
- transform: translateX(10px);
1044
+ transform: translateX(10px);
1834
1045
  }
1835
1046
  }
1836
1047
 
1837
1048
  /* Bounce */
1838
- @-webkit-keyframes bounce {
1839
- 0%,
1840
- 20%,
1841
- 50%,
1842
- 80%,
1843
- 100% {
1844
- -webkit-transform: translateY(0);
1845
- transform: translateY(0);
1846
- }
1847
- 40% {
1848
- -webkit-transform: translateY(-30px);
1849
- transform: translateY(-30px);
1850
- }
1851
- 60% {
1852
- -webkit-transform: translateY(-15px);
1853
- transform: translateY(-15px);
1854
- }
1855
- }
1856
1049
  @keyframes bounce {
1857
1050
  0%,
1858
1051
  20%,
1859
1052
  50%,
1860
1053
  80%,
1861
1054
  100% {
1862
- -webkit-transform: translateY(0);
1863
- transform: translateY(0);
1055
+ transform: translateY(0);
1864
1056
  }
1865
1057
  40% {
1866
- -webkit-transform: translateY(-30px);
1867
- transform: translateY(-30px);
1058
+ transform: translateY(-30px);
1868
1059
  }
1869
1060
  60% {
1870
- -webkit-transform: translateY(-15px);
1871
- transform: translateY(-15px);
1061
+ transform: translateY(-15px);
1872
1062
  }
1873
1063
  }
1874
1064
 
1875
1065
  /* Tada */
1876
- @-webkit-keyframes tada {
1877
- 0% {
1878
- -webkit-transform: scale(1);
1879
- transform: scale(1);
1880
- }
1881
- 10%,
1882
- 20% {
1883
- -webkit-transform: scale(0.9) rotate(-3deg);
1884
- transform: scale(0.9) rotate(-3deg);
1885
- }
1886
- 30%,
1887
- 50%,
1888
- 70%,
1889
- 90% {
1890
- -webkit-transform: scale(1.1) rotate(3deg);
1891
- transform: scale(1.1) rotate(3deg);
1892
- }
1893
- 40%,
1894
- 60%,
1895
- 80% {
1896
- -webkit-transform: scale(1.1) rotate(-3deg);
1897
- transform: scale(1.1) rotate(-3deg);
1898
- }
1899
- 100% {
1900
- -webkit-transform: scale(1) rotate(0);
1901
- transform: scale(1) rotate(0);
1902
- }
1903
- }
1904
1066
  @keyframes tada {
1905
1067
  0% {
1906
- -webkit-transform: scale(1);
1907
- transform: scale(1);
1068
+ transform: scale(1);
1908
1069
  }
1909
1070
  10%,
1910
1071
  20% {
1911
- -webkit-transform: scale(0.9) rotate(-3deg);
1912
- transform: scale(0.9) rotate(-3deg);
1072
+ transform: scale(0.9) rotate(-3deg);
1913
1073
  }
1914
1074
  30%,
1915
1075
  50%,
1916
1076
  70%,
1917
1077
  90% {
1918
- -webkit-transform: scale(1.1) rotate(3deg);
1919
- transform: scale(1.1) rotate(3deg);
1078
+ transform: scale(1.1) rotate(3deg);
1920
1079
  }
1921
1080
  40%,
1922
1081
  60%,
1923
1082
  80% {
1924
- -webkit-transform: scale(1.1) rotate(-3deg);
1925
- transform: scale(1.1) rotate(-3deg);
1083
+ transform: scale(1.1) rotate(-3deg);
1926
1084
  }
1927
1085
  100% {
1928
- -webkit-transform: scale(1) rotate(0);
1929
- transform: scale(1) rotate(0);
1086
+ transform: scale(1) rotate(0);
1930
1087
  }
1931
1088
  }
1932
1089
 
1933
1090
  /* Pulse */
1934
- @-webkit-keyframes pulse {
1935
- 0% {
1936
- -webkit-transform: scale(1);
1937
- transform: scale(1);
1938
- opacity: 1;
1939
- }
1940
- 50% {
1941
- -webkit-transform: scale(0.9);
1942
- transform: scale(0.9);
1943
- opacity: 0.7;
1944
- }
1945
- 100% {
1946
- -webkit-transform: scale(1);
1947
- transform: scale(1);
1948
- opacity: 1;
1949
- }
1950
- }
1951
1091
  @keyframes pulse {
1952
1092
  0% {
1953
- -webkit-transform: scale(1);
1954
- transform: scale(1);
1093
+ transform: scale(1);
1955
1094
  opacity: 1;
1956
1095
  }
1957
1096
  50% {
1958
- -webkit-transform: scale(0.9);
1959
- transform: scale(0.9);
1097
+ transform: scale(0.9);
1960
1098
  opacity: 0.7;
1961
1099
  }
1962
1100
  100% {
1963
- -webkit-transform: scale(1);
1964
- transform: scale(1);
1101
+ transform: scale(1);
1965
1102
  opacity: 1;
1966
1103
  }
1967
1104
  }
1968
1105
 
1969
1106
  /* Jiggle */
1970
- @-webkit-keyframes jiggle {
1971
- 0% {
1972
- -webkit-transform: scale3d(1, 1, 1);
1973
- transform: scale3d(1, 1, 1);
1974
- }
1975
- 30% {
1976
- -webkit-transform: scale3d(1.25, 0.75, 1);
1977
- transform: scale3d(1.25, 0.75, 1);
1978
- }
1979
- 40% {
1980
- -webkit-transform: scale3d(0.75, 1.25, 1);
1981
- transform: scale3d(0.75, 1.25, 1);
1982
- }
1983
- 50% {
1984
- -webkit-transform: scale3d(1.15, 0.85, 1);
1985
- transform: scale3d(1.15, 0.85, 1);
1986
- }
1987
- 65% {
1988
- -webkit-transform: scale3d(0.95, 1.05, 1);
1989
- transform: scale3d(0.95, 1.05, 1);
1990
- }
1991
- 75% {
1992
- -webkit-transform: scale3d(1.05, 0.95, 1);
1993
- transform: scale3d(1.05, 0.95, 1);
1994
- }
1995
- 100% {
1996
- -webkit-transform: scale3d(1, 1, 1);
1997
- transform: scale3d(1, 1, 1);
1998
- }
1999
- }
2000
1107
  @keyframes jiggle {
2001
1108
  0% {
2002
- -webkit-transform: scale3d(1, 1, 1);
2003
- transform: scale3d(1, 1, 1);
1109
+ transform: scale3d(1, 1, 1);
2004
1110
  }
2005
1111
  30% {
2006
- -webkit-transform: scale3d(1.25, 0.75, 1);
2007
- transform: scale3d(1.25, 0.75, 1);
1112
+ transform: scale3d(1.25, 0.75, 1);
2008
1113
  }
2009
1114
  40% {
2010
- -webkit-transform: scale3d(0.75, 1.25, 1);
2011
- transform: scale3d(0.75, 1.25, 1);
1115
+ transform: scale3d(0.75, 1.25, 1);
2012
1116
  }
2013
1117
  50% {
2014
- -webkit-transform: scale3d(1.15, 0.85, 1);
2015
- transform: scale3d(1.15, 0.85, 1);
1118
+ transform: scale3d(1.15, 0.85, 1);
2016
1119
  }
2017
1120
  65% {
2018
- -webkit-transform: scale3d(0.95, 1.05, 1);
2019
- transform: scale3d(0.95, 1.05, 1);
1121
+ transform: scale3d(0.95, 1.05, 1);
2020
1122
  }
2021
1123
  75% {
2022
- -webkit-transform: scale3d(1.05, 0.95, 1);
2023
- transform: scale3d(1.05, 0.95, 1);
1124
+ transform: scale3d(1.05, 0.95, 1);
2024
1125
  }
2025
1126
  100% {
2026
- -webkit-transform: scale3d(1, 1, 1);
2027
- transform: scale3d(1, 1, 1);
1127
+ transform: scale3d(1, 1, 1);
2028
1128
  }
2029
1129
  }
2030
1130
 
2031
1131
  /* Glow */
2032
- @-webkit-keyframes glow {
2033
- 0% {
2034
- background-color: #FCFCFD;
2035
- }
2036
- 30% {
2037
- background-color: #FFF6CD;
2038
- }
2039
- 100% {
2040
- background-color: #FCFCFD;
2041
- }
2042
- }
2043
1132
  @keyframes glow {
2044
1133
  0% {
2045
- background-color: #FCFCFD;
1134
+ background-color: #fcfcfd;
2046
1135
  }
2047
1136
  30% {
2048
- background-color: #FFF6CD;
1137
+ background-color: #fff6cd;
2049
1138
  }
2050
1139
  100% {
2051
- background-color: #FCFCFD;
1140
+ background-color: #fcfcfd;
2052
1141
  }
2053
1142
  }
2054
1143