semantic-ui-sass 1.7.3.0 → 1.8.0.0

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