Skip to content

dev / marubi-wish-list-mp

Go to a project
Toggle navigation
Toggle navigation pinning
b83d74e4 by simon
Options

no message

1 parent a13126d4
Inline Side-by-side
Showing 19 changed files with 331 additions and 3528 deletions
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
12 // 原子类 12 // 原子类
13 @import "assets/scss/utils"; 13 @import "assets/scss/utils";
14 14
15
15 // 图标 16 // 图标
16 // @import 'styles/iconfont.wxss'; 17 // @import 'styles/iconfont.wxss';
17 18
...@@ -131,3 +132,85 @@ button::after { ...@@ -131,3 +132,85 @@ button::after {
131 border: none; 132 border: none;
132 } 133 }
133 134
135 .animated {
136 -webkit-animation-duration: 1s;
137 animation-duration: 1s;
138 -webkit-animation-fill-mode: both;
139 animation-fill-mode: both;
140 }
141
142 .animated.infinite {
143 -webkit-animation-iteration-count: infinite;
144 animation-iteration-count: infinite;
145 }
146
147 @-webkit-keyframes tada {
148 from {
149 -webkit-transform: scale3d(1, 1, 1);
150 transform: scale3d(1, 1, 1);
151 }
152
153 10%,
154 20% {
155 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
156 transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
157 }
158
159 30%,
160 50%,
161 70%,
162 90% {
163 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
164 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
165 }
166
167 40%,
168 60%,
169 80% {
170 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
171 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
172 }
173
174 to {
175 -webkit-transform: scale3d(1, 1, 1);
176 transform: scale3d(1, 1, 1);
177 }
178 }
179
180 @keyframes tada {
181 from {
182 -webkit-transform: scale3d(1, 1, 1);
183 transform: scale3d(1, 1, 1);
184 }
185
186 10%,
187 20% {
188 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
189 transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
190 }
191
192 30%,
193 50%,
194 70%,
195 90% {
196 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
197 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
198 }
199
200 40%,
201 60%,
202 80% {
203 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
204 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
205 }
206
207 to {
208 -webkit-transform: scale3d(1, 1, 1);
209 transform: scale3d(1, 1, 1);
210 }
211 }
212
213 .tada {
214 -webkit-animation-name: tada;
215 animation-name: tada;
216 }
......
1 @charset "UTF-8";
2
3 /*!
4 * animate.css -http://daneden.me/animate
5 * Version - 3.6.0
6 * Licensed under the MIT license - http://opensource.org/licenses/MIT
7 *
8 * Copyright (c) 2018 Daniel Eden
9 */
10
11 .animated {
12 -webkit-animation-duration: 1s;
13 animation-duration: 1s;
14 -webkit-animation-fill-mode: both;
15 animation-fill-mode: both;
16 }
17
18 .animated.infinite {
19 -webkit-animation-iteration-count: infinite;
20 animation-iteration-count: infinite;
21 }
22
23 @-webkit-keyframes bounce {
24 from,
25 20%,
26 53%,
27 80%,
28 to {
29 -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
30 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
31 -webkit-transform: translate3d(0, 0, 0);
32 transform: translate3d(0, 0, 0);
33 }
34
35 40%,
36 43% {
37 -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
38 animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
39 -webkit-transform: translate3d(0, -30px, 0);
40 transform: translate3d(0, -30px, 0);
41 }
42
43 70% {
44 -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
45 animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
46 -webkit-transform: translate3d(0, -15px, 0);
47 transform: translate3d(0, -15px, 0);
48 }
49
50 90% {
51 -webkit-transform: translate3d(0, -4px, 0);
52 transform: translate3d(0, -4px, 0);
53 }
54 }
55
56 @keyframes bounce {
57 from,
58 20%,
59 53%,
60 80%,
61 to {
62 -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
63 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
64 -webkit-transform: translate3d(0, 0, 0);
65 transform: translate3d(0, 0, 0);
66 }
67
68 40%,
69 43% {
70 -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
71 animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
72 -webkit-transform: translate3d(0, -30px, 0);
73 transform: translate3d(0, -30px, 0);
74 }
75
76 70% {
77 -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
78 animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
79 -webkit-transform: translate3d(0, -15px, 0);
80 transform: translate3d(0, -15px, 0);
81 }
82
83 90% {
84 -webkit-transform: translate3d(0, -4px, 0);
85 transform: translate3d(0, -4px, 0);
86 }
87 }
88
89 .bounce {
90 -webkit-animation-name: bounce;
91 animation-name: bounce;
92 -webkit-transform-origin: center bottom;
93 transform-origin: center bottom;
94 }
95
96 @-webkit-keyframes flash {
97 from,
98 50%,
99 to {
100 opacity: 1;
101 }
102
103 25%,
104 75% {
105 opacity: 0;
106 }
107 }
108
109 @keyframes flash {
110 from,
111 50%,
112 to {
113 opacity: 1;
114 }
115
116 25%,
117 75% {
118 opacity: 0;
119 }
120 }
121
122 .flash {
123 -webkit-animation-name: flash;
124 animation-name: flash;
125 }
126
127 @-webkit-keyframes pulse {
128 from {
129 -webkit-transform: scale3d(1, 1, 1);
130 transform: scale3d(1, 1, 1);
131 }
132
133 50% {
134 -webkit-transform: scale3d(1.05, 1.05, 1.05);
135 transform: scale3d(1.05, 1.05, 1.05);
136 }
137
138 to {
139 -webkit-transform: scale3d(1, 1, 1);
140 transform: scale3d(1, 1, 1);
141 }
142 }
143
144 @keyframes pulse {
145 from {
146 -webkit-transform: scale3d(1, 1, 1);
147 transform: scale3d(1, 1, 1);
148 }
149
150 50% {
151 -webkit-transform: scale3d(1.05, 1.05, 1.05);
152 transform: scale3d(1.05, 1.05, 1.05);
153 }
154
155 to {
156 -webkit-transform: scale3d(1, 1, 1);
157 transform: scale3d(1, 1, 1);
158 }
159 }
160
161 .pulse {
162 -webkit-animation-name: pulse;
163 animation-name: pulse;
164 }
165
166 @-webkit-keyframes rubberBand {
167 from {
168 -webkit-transform: scale3d(1, 1, 1);
169 transform: scale3d(1, 1, 1);
170 }
171
172 30% {
173 -webkit-transform: scale3d(1.25, 0.75, 1);
174 transform: scale3d(1.25, 0.75, 1);
175 }
176
177 40% {
178 -webkit-transform: scale3d(0.75, 1.25, 1);
179 transform: scale3d(0.75, 1.25, 1);
180 }
181
182 50% {
183 -webkit-transform: scale3d(1.15, 0.85, 1);
184 transform: scale3d(1.15, 0.85, 1);
185 }
186
187 65% {
188 -webkit-transform: scale3d(0.95, 1.05, 1);
189 transform: scale3d(0.95, 1.05, 1);
190 }
191
192 75% {
193 -webkit-transform: scale3d(1.05, 0.95, 1);
194 transform: scale3d(1.05, 0.95, 1);
195 }
196
197 to {
198 -webkit-transform: scale3d(1, 1, 1);
199 transform: scale3d(1, 1, 1);
200 }
201 }
202
203 @keyframes rubberBand {
204 from {
205 -webkit-transform: scale3d(1, 1, 1);
206 transform: scale3d(1, 1, 1);
207 }
208
209 30% {
210 -webkit-transform: scale3d(1.25, 0.75, 1);
211 transform: scale3d(1.25, 0.75, 1);
212 }
213
214 40% {
215 -webkit-transform: scale3d(0.75, 1.25, 1);
216 transform: scale3d(0.75, 1.25, 1);
217 }
218
219 50% {
220 -webkit-transform: scale3d(1.15, 0.85, 1);
221 transform: scale3d(1.15, 0.85, 1);
222 }
223
224 65% {
225 -webkit-transform: scale3d(0.95, 1.05, 1);
226 transform: scale3d(0.95, 1.05, 1);
227 }
228
229 75% {
230 -webkit-transform: scale3d(1.05, 0.95, 1);
231 transform: scale3d(1.05, 0.95, 1);
232 }
233
234 to {
235 -webkit-transform: scale3d(1, 1, 1);
236 transform: scale3d(1, 1, 1);
237 }
238 }
239
240 .rubberBand {
241 -webkit-animation-name: rubberBand;
242 animation-name: rubberBand;
243 }
244
245 @-webkit-keyframes shake {
246 from,
247 to {
248 -webkit-transform: translate3d(0, 0, 0);
249 transform: translate3d(0, 0, 0);
250 }
251
252 10%,
253 30%,
254 50%,
255 70%,
256 90% {
257 -webkit-transform: translate3d(-10px, 0, 0);
258 transform: translate3d(-10px, 0, 0);
259 }
260
261 20%,
262 40%,
263 60%,
264 80% {
265 -webkit-transform: translate3d(10px, 0, 0);
266 transform: translate3d(10px, 0, 0);
267 }
268 }
269
270 @keyframes shake {
271 from,
272 to {
273 -webkit-transform: translate3d(0, 0, 0);
274 transform: translate3d(0, 0, 0);
275 }
276
277 10%,
278 30%,
279 50%,
280 70%,
281 90% {
282 -webkit-transform: translate3d(-10px, 0, 0);
283 transform: translate3d(-10px, 0, 0);
284 }
285
286 20%,
287 40%,
288 60%,
289 80% {
290 -webkit-transform: translate3d(10px, 0, 0);
291 transform: translate3d(10px, 0, 0);
292 }
293 }
294
295 .shake {
296 -webkit-animation-name: shake;
297 animation-name: shake;
298 }
299
300 @-webkit-keyframes headShake {
301 0% {
302 -webkit-transform: translateX(0);
303 transform: translateX(0);
304 }
305
306 6.5% {
307 -webkit-transform: translateX(-6px) rotateY(-9deg);
308 transform: translateX(-6px) rotateY(-9deg);
309 }
310
311 18.5% {
312 -webkit-transform: translateX(5px) rotateY(7deg);
313 transform: translateX(5px) rotateY(7deg);
314 }
315
316 31.5% {
317 -webkit-transform: translateX(-3px) rotateY(-5deg);
318 transform: translateX(-3px) rotateY(-5deg);
319 }
320
321 43.5% {
322 -webkit-transform: translateX(2px) rotateY(3deg);
323 transform: translateX(2px) rotateY(3deg);
324 }
325
326 50% {
327 -webkit-transform: translateX(0);
328 transform: translateX(0);
329 }
330 }
331
332 @keyframes headShake {
333 0% {
334 -webkit-transform: translateX(0);
335 transform: translateX(0);
336 }
337
338 6.5% {
339 -webkit-transform: translateX(-6px) rotateY(-9deg);
340 transform: translateX(-6px) rotateY(-9deg);
341 }
342
343 18.5% {
344 -webkit-transform: translateX(5px) rotateY(7deg);
345 transform: translateX(5px) rotateY(7deg);
346 }
347
348 31.5% {
349 -webkit-transform: translateX(-3px) rotateY(-5deg);
350 transform: translateX(-3px) rotateY(-5deg);
351 }
352
353 43.5% {
354 -webkit-transform: translateX(2px) rotateY(3deg);
355 transform: translateX(2px) rotateY(3deg);
356 }
357
358 50% {
359 -webkit-transform: translateX(0);
360 transform: translateX(0);
361 }
362 }
363
364 .headShake {
365 -webkit-animation-timing-function: ease-in-out;
366 animation-timing-function: ease-in-out;
367 -webkit-animation-name: headShake;
368 animation-name: headShake;
369 }
370
371 @-webkit-keyframes swing {
372 20% {
373 -webkit-transform: rotate3d(0, 0, 1, 15deg);
374 transform: rotate3d(0, 0, 1, 15deg);
375 }
376
377 40% {
378 -webkit-transform: rotate3d(0, 0, 1, -10deg);
379 transform: rotate3d(0, 0, 1, -10deg);
380 }
381
382 60% {
383 -webkit-transform: rotate3d(0, 0, 1, 5deg);
384 transform: rotate3d(0, 0, 1, 5deg);
385 }
386
387 80% {
388 -webkit-transform: rotate3d(0, 0, 1, -5deg);
389 transform: rotate3d(0, 0, 1, -5deg);
390 }
391
392 to {
393 -webkit-transform: rotate3d(0, 0, 1, 0deg);
394 transform: rotate3d(0, 0, 1, 0deg);
395 }
396 }
397
398 @keyframes swing {
399 20% {
400 -webkit-transform: rotate3d(0, 0, 1, 15deg);
401 transform: rotate3d(0, 0, 1, 15deg);
402 }
403
404 40% {
405 -webkit-transform: rotate3d(0, 0, 1, -10deg);
406 transform: rotate3d(0, 0, 1, -10deg);
407 }
408
409 60% {
410 -webkit-transform: rotate3d(0, 0, 1, 5deg);
411 transform: rotate3d(0, 0, 1, 5deg);
412 }
413
414 80% {
415 -webkit-transform: rotate3d(0, 0, 1, -5deg);
416 transform: rotate3d(0, 0, 1, -5deg);
417 }
418
419 to {
420 -webkit-transform: rotate3d(0, 0, 1, 0deg);
421 transform: rotate3d(0, 0, 1, 0deg);
422 }
423 }
424
425 .swing {
426 -webkit-transform-origin: top center;
427 transform-origin: top center;
428 -webkit-animation-name: swing;
429 animation-name: swing;
430 }
431
432 @-webkit-keyframes tada {
433 from {
434 -webkit-transform: scale3d(1, 1, 1);
435 transform: scale3d(1, 1, 1);
436 }
437
438 10%,
439 20% {
440 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
441 transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
442 }
443
444 30%,
445 50%,
446 70%,
447 90% {
448 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
449 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
450 }
451
452 40%,
453 60%,
454 80% {
455 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
456 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
457 }
458
459 to {
460 -webkit-transform: scale3d(1, 1, 1);
461 transform: scale3d(1, 1, 1);
462 }
463 }
464
465 @keyframes tada {
466 from {
467 -webkit-transform: scale3d(1, 1, 1);
468 transform: scale3d(1, 1, 1);
469 }
470
471 10%,
472 20% {
473 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
474 transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
475 }
476
477 30%,
478 50%,
479 70%,
480 90% {
481 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
482 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
483 }
484
485 40%,
486 60%,
487 80% {
488 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
489 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
490 }
491
492 to {
493 -webkit-transform: scale3d(1, 1, 1);
494 transform: scale3d(1, 1, 1);
495 }
496 }
497
498 .tada {
499 -webkit-animation-name: tada;
500 animation-name: tada;
501 }
502
503 @-webkit-keyframes wobble {
504 from {
505 -webkit-transform: translate3d(0, 0, 0);
506 transform: translate3d(0, 0, 0);
507 }
508
509 15% {
510 -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
511 transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
512 }
513
514 30% {
515 -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
516 transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
517 }
518
519 45% {
520 -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
521 transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
522 }
523
524 60% {
525 -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
526 transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
527 }
528
529 75% {
530 -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
531 transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
532 }
533
534 to {
535 -webkit-transform: translate3d(0, 0, 0);
536 transform: translate3d(0, 0, 0);
537 }
538 }
539
540 @keyframes wobble {
541 from {
542 -webkit-transform: translate3d(0, 0, 0);
543 transform: translate3d(0, 0, 0);
544 }
545
546 15% {
547 -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
548 transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
549 }
550
551 30% {
552 -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
553 transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
554 }
555
556 45% {
557 -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
558 transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
559 }
560
561 60% {
562 -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
563 transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
564 }
565
566 75% {
567 -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
568 transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
569 }
570
571 to {
572 -webkit-transform: translate3d(0, 0, 0);
573 transform: translate3d(0, 0, 0);
574 }
575 }
576
577 .wobble {
578 -webkit-animation-name: wobble;
579 animation-name: wobble;
580 }
581
582 @-webkit-keyframes jello {
583 from,
584 11.1%,
585 to {
586 -webkit-transform: translate3d(0, 0, 0);
587 transform: translate3d(0, 0, 0);
588 }
589
590 22.2% {
591 -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
592 transform: skewX(-12.5deg) skewY(-12.5deg);
593 }
594
595 33.3% {
596 -webkit-transform: skewX(6.25deg) skewY(6.25deg);
597 transform: skewX(6.25deg) skewY(6.25deg);
598 }
599
600 44.4% {
601 -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
602 transform: skewX(-3.125deg) skewY(-3.125deg);
603 }
604
605 55.5% {
606 -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
607 transform: skewX(1.5625deg) skewY(1.5625deg);
608 }
609
610 66.6% {
611 -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
612 transform: skewX(-0.78125deg) skewY(-0.78125deg);
613 }
614
615 77.7% {
616 -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
617 transform: skewX(0.390625deg) skewY(0.390625deg);
618 }
619
620 88.8% {
621 -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
622 transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
623 }
624 }
625
626 @keyframes jello {
627 from,
628 11.1%,
629 to {
630 -webkit-transform: translate3d(0, 0, 0);
631 transform: translate3d(0, 0, 0);
632 }
633
634 22.2% {
635 -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
636 transform: skewX(-12.5deg) skewY(-12.5deg);
637 }
638
639 33.3% {
640 -webkit-transform: skewX(6.25deg) skewY(6.25deg);
641 transform: skewX(6.25deg) skewY(6.25deg);
642 }
643
644 44.4% {
645 -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
646 transform: skewX(-3.125deg) skewY(-3.125deg);
647 }
648
649 55.5% {
650 -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
651 transform: skewX(1.5625deg) skewY(1.5625deg);
652 }
653
654 66.6% {
655 -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
656 transform: skewX(-0.78125deg) skewY(-0.78125deg);
657 }
658
659 77.7% {
660 -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
661 transform: skewX(0.390625deg) skewY(0.390625deg);
662 }
663
664 88.8% {
665 -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
666 transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
667 }
668 }
669
670 .jello {
671 -webkit-animation-name: jello;
672 animation-name: jello;
673 -webkit-transform-origin: center;
674 transform-origin: center;
675 }
676
677 @-webkit-keyframes bounceIn {
678 from,
679 20%,
680 40%,
681 60%,
682 80%,
683 to {
684 -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
685 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
686 }
687
688 0% {
689 opacity: 0;
690 -webkit-transform: scale3d(0.3, 0.3, 0.3);
691 transform: scale3d(0.3, 0.3, 0.3);
692 }
693
694 20% {
695 -webkit-transform: scale3d(1.1, 1.1, 1.1);
696 transform: scale3d(1.1, 1.1, 1.1);
697 }
698
699 40% {
700 -webkit-transform: scale3d(0.9, 0.9, 0.9);
701 transform: scale3d(0.9, 0.9, 0.9);
702 }
703
704 60% {
705 opacity: 1;
706 -webkit-transform: scale3d(1.03, 1.03, 1.03);
707 transform: scale3d(1.03, 1.03, 1.03);
708 }
709
710 80% {
711 -webkit-transform: scale3d(0.97, 0.97, 0.97);
712 transform: scale3d(0.97, 0.97, 0.97);
713 }
714
715 to {
716 opacity: 1;
717 -webkit-transform: scale3d(1, 1, 1);
718 transform: scale3d(1, 1, 1);
719 }
720 }
721
722 @keyframes bounceIn {
723 from,
724 20%,
725 40%,
726 60%,
727 80%,
728 to {
729 -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
730 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
731 }
732
733 0% {
734 opacity: 0;
735 -webkit-transform: scale3d(0.3, 0.3, 0.3);
736 transform: scale3d(0.3, 0.3, 0.3);
737 }
738
739 20% {
740 -webkit-transform: scale3d(1.1, 1.1, 1.1);
741 transform: scale3d(1.1, 1.1, 1.1);
742 }
743
744 40% {
745 -webkit-transform: scale3d(0.9, 0.9, 0.9);
746 transform: scale3d(0.9, 0.9, 0.9);
747 }
748
749 60% {
750 opacity: 1;
751 -webkit-transform: scale3d(1.03, 1.03, 1.03);
752 transform: scale3d(1.03, 1.03, 1.03);
753 }
754
755 80% {
756 -webkit-transform: scale3d(0.97, 0.97, 0.97);
757 transform: scale3d(0.97, 0.97, 0.97);
758 }
759
760 to {
761 opacity: 1;
762 -webkit-transform: scale3d(1, 1, 1);
763 transform: scale3d(1, 1, 1);
764 }
765 }
766
767 .bounceIn {
768 -webkit-animation-duration: 0.75s;
769 animation-duration: 0.75s;
770 -webkit-animation-name: bounceIn;
771 animation-name: bounceIn;
772 }
773
774 @-webkit-keyframes bounceInDown {
775 from,
776 60%,
777 75%,
778 90%,
779 to {
780 -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
781 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
782 }
783
784 0% {
785 opacity: 0;
786 -webkit-transform: translate3d(0, -3000px, 0);
787 transform: translate3d(0, -3000px, 0);
788 }
789
790 60% {
791 opacity: 1;
792 -webkit-transform: translate3d(0, 25px, 0);
793 transform: translate3d(0, 25px, 0);
794 }
795
796 75% {
797 -webkit-transform: translate3d(0, -10px, 0);
798 transform: translate3d(0, -10px, 0);
799 }
800
801 90% {
802 -webkit-transform: translate3d(0, 5px, 0);
803 transform: translate3d(0, 5px, 0);
804 }
805
806 to {
807 -webkit-transform: translate3d(0, 0, 0);
808 transform: translate3d(0, 0, 0);
809 }
810 }
811
812 @keyframes bounceInDown {
813 from,
814 60%,
815 75%,
816 90%,
817 to {
818 -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
819 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
820 }
821
822 0% {
823 opacity: 0;
824 -webkit-transform: translate3d(0, -3000px, 0);
825 transform: translate3d(0, -3000px, 0);
826 }
827
828 60% {
829 opacity: 1;
830 -webkit-transform: translate3d(0, 25px, 0);
831 transform: translate3d(0, 25px, 0);
832 }
833
834 75% {
835 -webkit-transform: translate3d(0, -10px, 0);
836 transform: translate3d(0, -10px, 0);
837 }
838
839 90% {
840 -webkit-transform: translate3d(0, 5px, 0);
841 transform: translate3d(0, 5px, 0);
842 }
843
844 to {
845 -webkit-transform: translate3d(0, 0, 0);
846 transform: translate3d(0, 0, 0);
847 }
848 }
849
850 .bounceInDown {
851 -webkit-animation-name: bounceInDown;
852 animation-name: bounceInDown;
853 }
854
855 @-webkit-keyframes bounceInLeft {
856 from,
857 60%,
858 75%,
859 90%,
860 to {
861 -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
862 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
863 }
864
865 0% {
866 opacity: 0;
867 -webkit-transform: translate3d(-3000px, 0, 0);
868 transform: translate3d(-3000px, 0, 0);
869 }
870
871 60% {
872 opacity: 1;
873 -webkit-transform: translate3d(25px, 0, 0);
874 transform: translate3d(25px, 0, 0);
875 }
876
877 75% {
878 -webkit-transform: translate3d(-10px, 0, 0);
879 transform: translate3d(-10px, 0, 0);
880 }
881
882 90% {
883 -webkit-transform: translate3d(5px, 0, 0);
884 transform: translate3d(5px, 0, 0);
885 }
886
887 to {
888 -webkit-transform: translate3d(0, 0, 0);
889 transform: translate3d(0, 0, 0);
890 }
891 }
892
893 @keyframes bounceInLeft {
894 from,
895 60%,
896 75%,
897 90%,
898 to {
899 -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
900 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
901 }
902
903 0% {
904 opacity: 0;
905 -webkit-transform: translate3d(-3000px, 0, 0);
906 transform: translate3d(-3000px, 0, 0);
907 }
908
909 60% {
910 opacity: 1;
911 -webkit-transform: translate3d(25px, 0, 0);
912 transform: translate3d(25px, 0, 0);
913 }
914
915 75% {
916 -webkit-transform: translate3d(-10px, 0, 0);
917 transform: translate3d(-10px, 0, 0);
918 }
919
920 90% {
921 -webkit-transform: translate3d(5px, 0, 0);
922 transform: translate3d(5px, 0, 0);
923 }
924
925 to {
926 -webkit-transform: translate3d(0, 0, 0);
927 transform: translate3d(0, 0, 0);
928 }
929 }
930
931 .bounceInLeft {
932 -webkit-animation-name: bounceInLeft;
933 animation-name: bounceInLeft;
934 }
935
936 @-webkit-keyframes bounceInRight {
937 from,
938 60%,
939 75%,
940 90%,
941 to {
942 -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
943 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
944 }
945
946 from {
947 opacity: 0;
948 -webkit-transform: translate3d(3000px, 0, 0);
949 transform: translate3d(3000px, 0, 0);
950 }
951
952 60% {
953 opacity: 1;
954 -webkit-transform: translate3d(-25px, 0, 0);
955 transform: translate3d(-25px, 0, 0);
956 }
957
958 75% {
959 -webkit-transform: translate3d(10px, 0, 0);
960 transform: translate3d(10px, 0, 0);
961 }
962
963 90% {
964 -webkit-transform: translate3d(-5px, 0, 0);
965 transform: translate3d(-5px, 0, 0);
966 }
967
968 to {
969 -webkit-transform: translate3d(0, 0, 0);
970 transform: translate3d(0, 0, 0);
971 }
972 }
973
974 @keyframes bounceInRight {
975 from,
976 60%,
977 75%,
978 90%,
979 to {
980 -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
981 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
982 }
983
984 from {
985 opacity: 0;
986 -webkit-transform: translate3d(3000px, 0, 0);
987 transform: translate3d(3000px, 0, 0);
988 }
989
990 60% {
991 opacity: 1;
992 -webkit-transform: translate3d(-25px, 0, 0);
993 transform: translate3d(-25px, 0, 0);
994 }
995
996 75% {
997 -webkit-transform: translate3d(10px, 0, 0);
998 transform: translate3d(10px, 0, 0);
999 }
1000
1001 90% {
1002 -webkit-transform: translate3d(-5px, 0, 0);
1003 transform: translate3d(-5px, 0, 0);
1004 }
1005
1006 to {
1007 -webkit-transform: translate3d(0, 0, 0);
1008 transform: translate3d(0, 0, 0);
1009 }
1010 }
1011
1012 .bounceInRight {
1013 -webkit-animation-name: bounceInRight;
1014 animation-name: bounceInRight;
1015 }
1016
1017 @-webkit-keyframes bounceInUp {
1018 from,
1019 60%,
1020 75%,
1021 90%,
1022 to {
1023 -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1024 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1025 }
1026
1027 from {
1028 opacity: 0;
1029 -webkit-transform: translate3d(0, 3000px, 0);
1030 transform: translate3d(0, 3000px, 0);
1031 }
1032
1033 60% {
1034 opacity: 1;
1035 -webkit-transform: translate3d(0, -20px, 0);
1036 transform: translate3d(0, -20px, 0);
1037 }
1038
1039 75% {
1040 -webkit-transform: translate3d(0, 10px, 0);
1041 transform: translate3d(0, 10px, 0);
1042 }
1043
1044 90% {
1045 -webkit-transform: translate3d(0, -5px, 0);
1046 transform: translate3d(0, -5px, 0);
1047 }
1048
1049 to {
1050 -webkit-transform: translate3d(0, 0, 0);
1051 transform: translate3d(0, 0, 0);
1052 }
1053 }
1054
1055 @keyframes bounceInUp {
1056 from,
1057 60%,
1058 75%,
1059 90%,
1060 to {
1061 -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1062 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1063 }
1064
1065 from {
1066 opacity: 0;
1067 -webkit-transform: translate3d(0, 3000px, 0);
1068 transform: translate3d(0, 3000px, 0);
1069 }
1070
1071 60% {
1072 opacity: 1;
1073 -webkit-transform: translate3d(0, -20px, 0);
1074 transform: translate3d(0, -20px, 0);
1075 }
1076
1077 75% {
1078 -webkit-transform: translate3d(0, 10px, 0);
1079 transform: translate3d(0, 10px, 0);
1080 }
1081
1082 90% {
1083 -webkit-transform: translate3d(0, -5px, 0);
1084 transform: translate3d(0, -5px, 0);
1085 }
1086
1087 to {
1088 -webkit-transform: translate3d(0, 0, 0);
1089 transform: translate3d(0, 0, 0);
1090 }
1091 }
1092
1093 .bounceInUp {
1094 -webkit-animation-name: bounceInUp;
1095 animation-name: bounceInUp;
1096 }
1097
1098 @-webkit-keyframes bounceOut {
1099 20% {
1100 -webkit-transform: scale3d(0.9, 0.9, 0.9);
1101 transform: scale3d(0.9, 0.9, 0.9);
1102 }
1103
1104 50%,
1105 55% {
1106 opacity: 1;
1107 -webkit-transform: scale3d(1.1, 1.1, 1.1);
1108 transform: scale3d(1.1, 1.1, 1.1);
1109 }
1110
1111 to {
1112 opacity: 0;
1113 -webkit-transform: scale3d(0.3, 0.3, 0.3);
1114 transform: scale3d(0.3, 0.3, 0.3);
1115 }
1116 }
1117
1118 @keyframes bounceOut {
1119 20% {
1120 -webkit-transform: scale3d(0.9, 0.9, 0.9);
1121 transform: scale3d(0.9, 0.9, 0.9);
1122 }
1123
1124 50%,
1125 55% {
1126 opacity: 1;
1127 -webkit-transform: scale3d(1.1, 1.1, 1.1);
1128 transform: scale3d(1.1, 1.1, 1.1);
1129 }
1130
1131 to {
1132 opacity: 0;
1133 -webkit-transform: scale3d(0.3, 0.3, 0.3);
1134 transform: scale3d(0.3, 0.3, 0.3);
1135 }
1136 }
1137
1138 .bounceOut {
1139 -webkit-animation-duration: 0.75s;
1140 animation-duration: 0.75s;
1141 -webkit-animation-name: bounceOut;
1142 animation-name: bounceOut;
1143 }
1144
1145 @-webkit-keyframes bounceOutDown {
1146 20% {
1147 -webkit-transform: translate3d(0, 10px, 0);
1148 transform: translate3d(0, 10px, 0);
1149 }
1150
1151 40%,
1152 45% {
1153 opacity: 1;
1154 -webkit-transform: translate3d(0, -20px, 0);
1155 transform: translate3d(0, -20px, 0);
1156 }
1157
1158 to {
1159 opacity: 0;
1160 -webkit-transform: translate3d(0, 2000px, 0);
1161 transform: translate3d(0, 2000px, 0);
1162 }
1163 }
1164
1165 @keyframes bounceOutDown {
1166 20% {
1167 -webkit-transform: translate3d(0, 10px, 0);
1168 transform: translate3d(0, 10px, 0);
1169 }
1170
1171 40%,
1172 45% {
1173 opacity: 1;
1174 -webkit-transform: translate3d(0, -20px, 0);
1175 transform: translate3d(0, -20px, 0);
1176 }
1177
1178 to {
1179 opacity: 0;
1180 -webkit-transform: translate3d(0, 2000px, 0);
1181 transform: translate3d(0, 2000px, 0);
1182 }
1183 }
1184
1185 .bounceOutDown {
1186 -webkit-animation-name: bounceOutDown;
1187 animation-name: bounceOutDown;
1188 }
1189
1190 @-webkit-keyframes bounceOutLeft {
1191 20% {
1192 opacity: 1;
1193 -webkit-transform: translate3d(20px, 0, 0);
1194 transform: translate3d(20px, 0, 0);
1195 }
1196
1197 to {
1198 opacity: 0;
1199 -webkit-transform: translate3d(-2000px, 0, 0);
1200 transform: translate3d(-2000px, 0, 0);
1201 }
1202 }
1203
1204 @keyframes bounceOutLeft {
1205 20% {
1206 opacity: 1;
1207 -webkit-transform: translate3d(20px, 0, 0);
1208 transform: translate3d(20px, 0, 0);
1209 }
1210
1211 to {
1212 opacity: 0;
1213 -webkit-transform: translate3d(-2000px, 0, 0);
1214 transform: translate3d(-2000px, 0, 0);
1215 }
1216 }
1217
1218 .bounceOutLeft {
1219 -webkit-animation-name: bounceOutLeft;
1220 animation-name: bounceOutLeft;
1221 }
1222
1223 @-webkit-keyframes bounceOutRight {
1224 20% {
1225 opacity: 1;
1226 -webkit-transform: translate3d(-20px, 0, 0);
1227 transform: translate3d(-20px, 0, 0);
1228 }
1229
1230 to {
1231 opacity: 0;
1232 -webkit-transform: translate3d(2000px, 0, 0);
1233 transform: translate3d(2000px, 0, 0);
1234 }
1235 }
1236
1237 @keyframes bounceOutRight {
1238 20% {
1239 opacity: 1;
1240 -webkit-transform: translate3d(-20px, 0, 0);
1241 transform: translate3d(-20px, 0, 0);
1242 }
1243
1244 to {
1245 opacity: 0;
1246 -webkit-transform: translate3d(2000px, 0, 0);
1247 transform: translate3d(2000px, 0, 0);
1248 }
1249 }
1250
1251 .bounceOutRight {
1252 -webkit-animation-name: bounceOutRight;
1253 animation-name: bounceOutRight;
1254 }
1255
1256 @-webkit-keyframes bounceOutUp {
1257 20% {
1258 -webkit-transform: translate3d(0, -10px, 0);
1259 transform: translate3d(0, -10px, 0);
1260 }
1261
1262 40%,
1263 45% {
1264 opacity: 1;
1265 -webkit-transform: translate3d(0, 20px, 0);
1266 transform: translate3d(0, 20px, 0);
1267 }
1268
1269 to {
1270 opacity: 0;
1271 -webkit-transform: translate3d(0, -2000px, 0);
1272 transform: translate3d(0, -2000px, 0);
1273 }
1274 }
1275
1276 @keyframes bounceOutUp {
1277 20% {
1278 -webkit-transform: translate3d(0, -10px, 0);
1279 transform: translate3d(0, -10px, 0);
1280 }
1281
1282 40%,
1283 45% {
1284 opacity: 1;
1285 -webkit-transform: translate3d(0, 20px, 0);
1286 transform: translate3d(0, 20px, 0);
1287 }
1288
1289 to {
1290 opacity: 0;
1291 -webkit-transform: translate3d(0, -2000px, 0);
1292 transform: translate3d(0, -2000px, 0);
1293 }
1294 }
1295
1296 .bounceOutUp {
1297 -webkit-animation-name: bounceOutUp;
1298 animation-name: bounceOutUp;
1299 }
1300
1301 @-webkit-keyframes fadeIn {
1302 from {
1303 opacity: 0;
1304 }
1305
1306 to {
1307 opacity: 1;
1308 }
1309 }
1310
1311 @keyframes fadeIn {
1312 from {
1313 opacity: 0;
1314 }
1315
1316 to {
1317 opacity: 1;
1318 }
1319 }
1320
1321 .fadeIn {
1322 -webkit-animation-name: fadeIn;
1323 animation-name: fadeIn;
1324 }
1325
1326 @-webkit-keyframes fadeInDown {
1327 from {
1328 opacity: 0;
1329 -webkit-transform: translate3d(0, -100%, 0);
1330 transform: translate3d(0, -100%, 0);
1331 }
1332
1333 to {
1334 opacity: 1;
1335 -webkit-transform: translate3d(0, 0, 0);
1336 transform: translate3d(0, 0, 0);
1337 }
1338 }
1339
1340 @keyframes fadeInDown {
1341 from {
1342 opacity: 0;
1343 -webkit-transform: translate3d(0, -100%, 0);
1344 transform: translate3d(0, -100%, 0);
1345 }
1346
1347 to {
1348 opacity: 1;
1349 -webkit-transform: translate3d(0, 0, 0);
1350 transform: translate3d(0, 0, 0);
1351 }
1352 }
1353
1354 .fadeInDown {
1355 -webkit-animation-name: fadeInDown;
1356 animation-name: fadeInDown;
1357 }
1358
1359 @-webkit-keyframes fadeInDownBig {
1360 from {
1361 opacity: 0;
1362 -webkit-transform: translate3d(0, -2000px, 0);
1363 transform: translate3d(0, -2000px, 0);
1364 }
1365
1366 to {
1367 opacity: 1;
1368 -webkit-transform: translate3d(0, 0, 0);
1369 transform: translate3d(0, 0, 0);
1370 }
1371 }
1372
1373 @keyframes fadeInDownBig {
1374 from {
1375 opacity: 0;
1376 -webkit-transform: translate3d(0, -2000px, 0);
1377 transform: translate3d(0, -2000px, 0);
1378 }
1379
1380 to {
1381 opacity: 1;
1382 -webkit-transform: translate3d(0, 0, 0);
1383 transform: translate3d(0, 0, 0);
1384 }
1385 }
1386
1387 .fadeInDownBig {
1388 -webkit-animation-name: fadeInDownBig;
1389 animation-name: fadeInDownBig;
1390 }
1391
1392 @-webkit-keyframes fadeInLeft {
1393 from {
1394 opacity: 0;
1395 -webkit-transform: translate3d(-100%, 0, 0);
1396 transform: translate3d(-100%, 0, 0);
1397 }
1398
1399 to {
1400 opacity: 1;
1401 -webkit-transform: translate3d(0, 0, 0);
1402 transform: translate3d(0, 0, 0);
1403 }
1404 }
1405
1406 @keyframes fadeInLeft {
1407 from {
1408 opacity: 0;
1409 -webkit-transform: translate3d(-100%, 0, 0);
1410 transform: translate3d(-100%, 0, 0);
1411 }
1412
1413 to {
1414 opacity: 1;
1415 -webkit-transform: translate3d(0, 0, 0);
1416 transform: translate3d(0, 0, 0);
1417 }
1418 }
1419
1420 .fadeInLeft {
1421 -webkit-animation-name: fadeInLeft;
1422 animation-name: fadeInLeft;
1423 }
1424
1425 @-webkit-keyframes fadeInLeftBig {
1426 from {
1427 opacity: 0;
1428 -webkit-transform: translate3d(-2000px, 0, 0);
1429 transform: translate3d(-2000px, 0, 0);
1430 }
1431
1432 to {
1433 opacity: 1;
1434 -webkit-transform: translate3d(0, 0, 0);
1435 transform: translate3d(0, 0, 0);
1436 }
1437 }
1438
1439 @keyframes fadeInLeftBig {
1440 from {
1441 opacity: 0;
1442 -webkit-transform: translate3d(-2000px, 0, 0);
1443 transform: translate3d(-2000px, 0, 0);
1444 }
1445
1446 to {
1447 opacity: 1;
1448 -webkit-transform: translate3d(0, 0, 0);
1449 transform: translate3d(0, 0, 0);
1450 }
1451 }
1452
1453 .fadeInLeftBig {
1454 -webkit-animation-name: fadeInLeftBig;
1455 animation-name: fadeInLeftBig;
1456 }
1457
1458 @-webkit-keyframes fadeInRight {
1459 from {
1460 opacity: 0;
1461 -webkit-transform: translate3d(100%, 0, 0);
1462 transform: translate3d(100%, 0, 0);
1463 }
1464
1465 to {
1466 opacity: 1;
1467 -webkit-transform: translate3d(0, 0, 0);
1468 transform: translate3d(0, 0, 0);
1469 }
1470 }
1471
1472 @keyframes fadeInRight {
1473 from {
1474 opacity: 0;
1475 -webkit-transform: translate3d(100%, 0, 0);
1476 transform: translate3d(100%, 0, 0);
1477 }
1478
1479 to {
1480 opacity: 1;
1481 -webkit-transform: translate3d(0, 0, 0);
1482 transform: translate3d(0, 0, 0);
1483 }
1484 }
1485
1486 .fadeInRight {
1487 -webkit-animation-name: fadeInRight;
1488 animation-name: fadeInRight;
1489 }
1490
1491 @-webkit-keyframes fadeInRightBig {
1492 from {
1493 opacity: 0;
1494 -webkit-transform: translate3d(2000px, 0, 0);
1495 transform: translate3d(2000px, 0, 0);
1496 }
1497
1498 to {
1499 opacity: 1;
1500 -webkit-transform: translate3d(0, 0, 0);
1501 transform: translate3d(0, 0, 0);
1502 }
1503 }
1504
1505 @keyframes fadeInRightBig {
1506 from {
1507 opacity: 0;
1508 -webkit-transform: translate3d(2000px, 0, 0);
1509 transform: translate3d(2000px, 0, 0);
1510 }
1511
1512 to {
1513 opacity: 1;
1514 -webkit-transform: translate3d(0, 0, 0);
1515 transform: translate3d(0, 0, 0);
1516 }
1517 }
1518
1519 .fadeInRightBig {
1520 -webkit-animation-name: fadeInRightBig;
1521 animation-name: fadeInRightBig;
1522 }
1523
1524 @-webkit-keyframes fadeInUp {
1525 from {
1526 opacity: 0;
1527 -webkit-transform: translate3d(0, 100%, 0);
1528 transform: translate3d(0, 100%, 0);
1529 }
1530
1531 to {
1532 opacity: 1;
1533 -webkit-transform: translate3d(0, 0, 0);
1534 transform: translate3d(0, 0, 0);
1535 }
1536 }
1537
1538 @keyframes fadeInUp {
1539 from {
1540 opacity: 0;
1541 -webkit-transform: translate3d(0, 100%, 0);
1542 transform: translate3d(0, 100%, 0);
1543 }
1544
1545 to {
1546 opacity: 1;
1547 -webkit-transform: translate3d(0, 0, 0);
1548 transform: translate3d(0, 0, 0);
1549 }
1550 }
1551
1552 .fadeInUp {
1553 -webkit-animation-name: fadeInUp;
1554 animation-name: fadeInUp;
1555 }
1556
1557 @-webkit-keyframes fadeInUpBig {
1558 from {
1559 opacity: 0;
1560 -webkit-transform: translate3d(0, 2000px, 0);
1561 transform: translate3d(0, 2000px, 0);
1562 }
1563
1564 to {
1565 opacity: 1;
1566 -webkit-transform: translate3d(0, 0, 0);
1567 transform: translate3d(0, 0, 0);
1568 }
1569 }
1570
1571 @keyframes fadeInUpBig {
1572 from {
1573 opacity: 0;
1574 -webkit-transform: translate3d(0, 2000px, 0);
1575 transform: translate3d(0, 2000px, 0);
1576 }
1577
1578 to {
1579 opacity: 1;
1580 -webkit-transform: translate3d(0, 0, 0);
1581 transform: translate3d(0, 0, 0);
1582 }
1583 }
1584
1585 .fadeInUpBig {
1586 -webkit-animation-name: fadeInUpBig;
1587 animation-name: fadeInUpBig;
1588 }
1589
1590 @-webkit-keyframes fadeOut {
1591 from {
1592 opacity: 1;
1593 }
1594
1595 to {
1596 opacity: 0;
1597 }
1598 }
1599
1600 @keyframes fadeOut {
1601 from {
1602 opacity: 1;
1603 }
1604
1605 to {
1606 opacity: 0;
1607 }
1608 }
1609
1610 .fadeOut {
1611 -webkit-animation-name: fadeOut;
1612 animation-name: fadeOut;
1613 }
1614
1615 @-webkit-keyframes fadeOutDown {
1616 from {
1617 opacity: 1;
1618 }
1619
1620 to {
1621 opacity: 0;
1622 -webkit-transform: translate3d(0, 100%, 0);
1623 transform: translate3d(0, 100%, 0);
1624 }
1625 }
1626
1627 @keyframes fadeOutDown {
1628 from {
1629 opacity: 1;
1630 }
1631
1632 to {
1633 opacity: 0;
1634 -webkit-transform: translate3d(0, 100%, 0);
1635 transform: translate3d(0, 100%, 0);
1636 }
1637 }
1638
1639 .fadeOutDown {
1640 -webkit-animation-name: fadeOutDown;
1641 animation-name: fadeOutDown;
1642 }
1643
1644 @-webkit-keyframes fadeOutDownBig {
1645 from {
1646 opacity: 1;
1647 }
1648
1649 to {
1650 opacity: 0;
1651 -webkit-transform: translate3d(0, 2000px, 0);
1652 transform: translate3d(0, 2000px, 0);
1653 }
1654 }
1655
1656 @keyframes fadeOutDownBig {
1657 from {
1658 opacity: 1;
1659 }
1660
1661 to {
1662 opacity: 0;
1663 -webkit-transform: translate3d(0, 2000px, 0);
1664 transform: translate3d(0, 2000px, 0);
1665 }
1666 }
1667
1668 .fadeOutDownBig {
1669 -webkit-animation-name: fadeOutDownBig;
1670 animation-name: fadeOutDownBig;
1671 }
1672
1673 @-webkit-keyframes fadeOutLeft {
1674 from {
1675 opacity: 1;
1676 }
1677
1678 to {
1679 opacity: 0;
1680 -webkit-transform: translate3d(-100%, 0, 0);
1681 transform: translate3d(-100%, 0, 0);
1682 }
1683 }
1684
1685 @keyframes fadeOutLeft {
1686 from {
1687 opacity: 1;
1688 }
1689
1690 to {
1691 opacity: 0;
1692 -webkit-transform: translate3d(-100%, 0, 0);
1693 transform: translate3d(-100%, 0, 0);
1694 }
1695 }
1696
1697 .fadeOutLeft {
1698 -webkit-animation-name: fadeOutLeft;
1699 animation-name: fadeOutLeft;
1700 }
1701
1702 @-webkit-keyframes fadeOutLeftBig {
1703 from {
1704 opacity: 1;
1705 }
1706
1707 to {
1708 opacity: 0;
1709 -webkit-transform: translate3d(-2000px, 0, 0);
1710 transform: translate3d(-2000px, 0, 0);
1711 }
1712 }
1713
1714 @keyframes fadeOutLeftBig {
1715 from {
1716 opacity: 1;
1717 }
1718
1719 to {
1720 opacity: 0;
1721 -webkit-transform: translate3d(-2000px, 0, 0);
1722 transform: translate3d(-2000px, 0, 0);
1723 }
1724 }
1725
1726 .fadeOutLeftBig {
1727 -webkit-animation-name: fadeOutLeftBig;
1728 animation-name: fadeOutLeftBig;
1729 }
1730
1731 @-webkit-keyframes fadeOutRight {
1732 from {
1733 opacity: 1;
1734 }
1735
1736 to {
1737 opacity: 0;
1738 -webkit-transform: translate3d(100%, 0, 0);
1739 transform: translate3d(100%, 0, 0);
1740 }
1741 }
1742
1743 @keyframes fadeOutRight {
1744 from {
1745 opacity: 1;
1746 }
1747
1748 to {
1749 opacity: 0;
1750 -webkit-transform: translate3d(100%, 0, 0);
1751 transform: translate3d(100%, 0, 0);
1752 }
1753 }
1754
1755 .fadeOutRight {
1756 -webkit-animation-name: fadeOutRight;
1757 animation-name: fadeOutRight;
1758 }
1759
1760 @-webkit-keyframes fadeOutRightBig {
1761 from {
1762 opacity: 1;
1763 }
1764
1765 to {
1766 opacity: 0;
1767 -webkit-transform: translate3d(2000px, 0, 0);
1768 transform: translate3d(2000px, 0, 0);
1769 }
1770 }
1771
1772 @keyframes fadeOutRightBig {
1773 from {
1774 opacity: 1;
1775 }
1776
1777 to {
1778 opacity: 0;
1779 -webkit-transform: translate3d(2000px, 0, 0);
1780 transform: translate3d(2000px, 0, 0);
1781 }
1782 }
1783
1784 .fadeOutRightBig {
1785 -webkit-animation-name: fadeOutRightBig;
1786 animation-name: fadeOutRightBig;
1787 }
1788
1789 @-webkit-keyframes fadeOutUp {
1790 from {
1791 opacity: 1;
1792 }
1793
1794 to {
1795 opacity: 0;
1796 -webkit-transform: translate3d(0, -100%, 0);
1797 transform: translate3d(0, -100%, 0);
1798 }
1799 }
1800
1801 @keyframes fadeOutUp {
1802 from {
1803 opacity: 1;
1804 }
1805
1806 to {
1807 opacity: 0;
1808 -webkit-transform: translate3d(0, -100%, 0);
1809 transform: translate3d(0, -100%, 0);
1810 }
1811 }
1812
1813 .fadeOutUp {
1814 -webkit-animation-name: fadeOutUp;
1815 animation-name: fadeOutUp;
1816 }
1817
1818 @-webkit-keyframes fadeOutUpBig {
1819 from {
1820 opacity: 1;
1821 }
1822
1823 to {
1824 opacity: 0;
1825 -webkit-transform: translate3d(0, -2000px, 0);
1826 transform: translate3d(0, -2000px, 0);
1827 }
1828 }
1829
1830 @keyframes fadeOutUpBig {
1831 from {
1832 opacity: 1;
1833 }
1834
1835 to {
1836 opacity: 0;
1837 -webkit-transform: translate3d(0, -2000px, 0);
1838 transform: translate3d(0, -2000px, 0);
1839 }
1840 }
1841
1842 .fadeOutUpBig {
1843 -webkit-animation-name: fadeOutUpBig;
1844 animation-name: fadeOutUpBig;
1845 }
1846
1847 @-webkit-keyframes flip {
1848 from {
1849 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1850 transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1851 -webkit-animation-timing-function: ease-out;
1852 animation-timing-function: ease-out;
1853 }
1854
1855 40% {
1856 -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1857 transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1858 -webkit-animation-timing-function: ease-out;
1859 animation-timing-function: ease-out;
1860 }
1861
1862 50% {
1863 -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1864 transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1865 -webkit-animation-timing-function: ease-in;
1866 animation-timing-function: ease-in;
1867 }
1868
1869 80% {
1870 -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
1871 transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
1872 -webkit-animation-timing-function: ease-in;
1873 animation-timing-function: ease-in;
1874 }
1875
1876 to {
1877 -webkit-transform: perspective(400px);
1878 transform: perspective(400px);
1879 -webkit-animation-timing-function: ease-in;
1880 animation-timing-function: ease-in;
1881 }
1882 }
1883
1884 @keyframes flip {
1885 from {
1886 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1887 transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1888 -webkit-animation-timing-function: ease-out;
1889 animation-timing-function: ease-out;
1890 }
1891
1892 40% {
1893 -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1894 transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1895 -webkit-animation-timing-function: ease-out;
1896 animation-timing-function: ease-out;
1897 }
1898
1899 50% {
1900 -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1901 transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1902 -webkit-animation-timing-function: ease-in;
1903 animation-timing-function: ease-in;
1904 }
1905
1906 80% {
1907 -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
1908 transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
1909 -webkit-animation-timing-function: ease-in;
1910 animation-timing-function: ease-in;
1911 }
1912
1913 to {
1914 -webkit-transform: perspective(400px);
1915 transform: perspective(400px);
1916 -webkit-animation-timing-function: ease-in;
1917 animation-timing-function: ease-in;
1918 }
1919 }
1920
1921 .animated.flip {
1922 -webkit-backface-visibility: visible;
1923 backface-visibility: visible;
1924 -webkit-animation-name: flip;
1925 animation-name: flip;
1926 }
1927
1928 @-webkit-keyframes flipInX {
1929 from {
1930 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1931 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1932 -webkit-animation-timing-function: ease-in;
1933 animation-timing-function: ease-in;
1934 opacity: 0;
1935 }
1936
1937 40% {
1938 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1939 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1940 -webkit-animation-timing-function: ease-in;
1941 animation-timing-function: ease-in;
1942 }
1943
1944 60% {
1945 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1946 transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1947 opacity: 1;
1948 }
1949
1950 80% {
1951 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1952 transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1953 }
1954
1955 to {
1956 -webkit-transform: perspective(400px);
1957 transform: perspective(400px);
1958 }
1959 }
1960
1961 @keyframes flipInX {
1962 from {
1963 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1964 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1965 -webkit-animation-timing-function: ease-in;
1966 animation-timing-function: ease-in;
1967 opacity: 0;
1968 }
1969
1970 40% {
1971 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1972 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1973 -webkit-animation-timing-function: ease-in;
1974 animation-timing-function: ease-in;
1975 }
1976
1977 60% {
1978 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1979 transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1980 opacity: 1;
1981 }
1982
1983 80% {
1984 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1985 transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1986 }
1987
1988 to {
1989 -webkit-transform: perspective(400px);
1990 transform: perspective(400px);
1991 }
1992 }
1993
1994 .flipInX {
1995 -webkit-backface-visibility: visible !important;
1996 backface-visibility: visible !important;
1997 -webkit-animation-name: flipInX;
1998 animation-name: flipInX;
1999 }
2000
2001 @-webkit-keyframes flipInY {
2002 from {
2003 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2004 transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2005 -webkit-animation-timing-function: ease-in;
2006 animation-timing-function: ease-in;
2007 opacity: 0;
2008 }
2009
2010 40% {
2011 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
2012 transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
2013 -webkit-animation-timing-function: ease-in;
2014 animation-timing-function: ease-in;
2015 }
2016
2017 60% {
2018 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
2019 transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
2020 opacity: 1;
2021 }
2022
2023 80% {
2024 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
2025 transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
2026 }
2027
2028 to {
2029 -webkit-transform: perspective(400px);
2030 transform: perspective(400px);
2031 }
2032 }
2033
2034 @keyframes flipInY {
2035 from {
2036 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2037 transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2038 -webkit-animation-timing-function: ease-in;
2039 animation-timing-function: ease-in;
2040 opacity: 0;
2041 }
2042
2043 40% {
2044 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
2045 transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
2046 -webkit-animation-timing-function: ease-in;
2047 animation-timing-function: ease-in;
2048 }
2049
2050 60% {
2051 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
2052 transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
2053 opacity: 1;
2054 }
2055
2056 80% {
2057 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
2058 transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
2059 }
2060
2061 to {
2062 -webkit-transform: perspective(400px);
2063 transform: perspective(400px);
2064 }
2065 }
2066
2067 .flipInY {
2068 -webkit-backface-visibility: visible !important;
2069 backface-visibility: visible !important;
2070 -webkit-animation-name: flipInY;
2071 animation-name: flipInY;
2072 }
2073
2074 @-webkit-keyframes flipOutX {
2075 from {
2076 -webkit-transform: perspective(400px);
2077 transform: perspective(400px);
2078 }
2079
2080 30% {
2081 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2082 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2083 opacity: 1;
2084 }
2085
2086 to {
2087 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2088 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2089 opacity: 0;
2090 }
2091 }
2092
2093 @keyframes flipOutX {
2094 from {
2095 -webkit-transform: perspective(400px);
2096 transform: perspective(400px);
2097 }
2098
2099 30% {
2100 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2101 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2102 opacity: 1;
2103 }
2104
2105 to {
2106 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2107 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2108 opacity: 0;
2109 }
2110 }
2111
2112 .flipOutX {
2113 -webkit-animation-duration: 0.75s;
2114 animation-duration: 0.75s;
2115 -webkit-animation-name: flipOutX;
2116 animation-name: flipOutX;
2117 -webkit-backface-visibility: visible !important;
2118 backface-visibility: visible !important;
2119 }
2120
2121 @-webkit-keyframes flipOutY {
2122 from {
2123 -webkit-transform: perspective(400px);
2124 transform: perspective(400px);
2125 }
2126
2127 30% {
2128 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2129 transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2130 opacity: 1;
2131 }
2132
2133 to {
2134 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2135 transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2136 opacity: 0;
2137 }
2138 }
2139
2140 @keyframes flipOutY {
2141 from {
2142 -webkit-transform: perspective(400px);
2143 transform: perspective(400px);
2144 }
2145
2146 30% {
2147 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2148 transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2149 opacity: 1;
2150 }
2151
2152 to {
2153 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2154 transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2155 opacity: 0;
2156 }
2157 }
2158
2159 .flipOutY {
2160 -webkit-animation-duration: 0.75s;
2161 animation-duration: 0.75s;
2162 -webkit-backface-visibility: visible !important;
2163 backface-visibility: visible !important;
2164 -webkit-animation-name: flipOutY;
2165 animation-name: flipOutY;
2166 }
2167
2168 @-webkit-keyframes lightSpeedIn {
2169 from {
2170 -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
2171 transform: translate3d(100%, 0, 0) skewX(-30deg);
2172 opacity: 0;
2173 }
2174
2175 60% {
2176 -webkit-transform: skewX(20deg);
2177 transform: skewX(20deg);
2178 opacity: 1;
2179 }
2180
2181 80% {
2182 -webkit-transform: skewX(-5deg);
2183 transform: skewX(-5deg);
2184 opacity: 1;
2185 }
2186
2187 to {
2188 -webkit-transform: translate3d(0, 0, 0);
2189 transform: translate3d(0, 0, 0);
2190 opacity: 1;
2191 }
2192 }
2193
2194 @keyframes lightSpeedIn {
2195 from {
2196 -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
2197 transform: translate3d(100%, 0, 0) skewX(-30deg);
2198 opacity: 0;
2199 }
2200
2201 60% {
2202 -webkit-transform: skewX(20deg);
2203 transform: skewX(20deg);
2204 opacity: 1;
2205 }
2206
2207 80% {
2208 -webkit-transform: skewX(-5deg);
2209 transform: skewX(-5deg);
2210 opacity: 1;
2211 }
2212
2213 to {
2214 -webkit-transform: translate3d(0, 0, 0);
2215 transform: translate3d(0, 0, 0);
2216 opacity: 1;
2217 }
2218 }
2219
2220 .lightSpeedIn {
2221 -webkit-animation-name: lightSpeedIn;
2222 animation-name: lightSpeedIn;
2223 -webkit-animation-timing-function: ease-out;
2224 animation-timing-function: ease-out;
2225 }
2226
2227 @-webkit-keyframes lightSpeedOut {
2228 from {
2229 opacity: 1;
2230 }
2231
2232 to {
2233 -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
2234 transform: translate3d(100%, 0, 0) skewX(30deg);
2235 opacity: 0;
2236 }
2237 }
2238
2239 @keyframes lightSpeedOut {
2240 from {
2241 opacity: 1;
2242 }
2243
2244 to {
2245 -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
2246 transform: translate3d(100%, 0, 0) skewX(30deg);
2247 opacity: 0;
2248 }
2249 }
2250
2251 .lightSpeedOut {
2252 -webkit-animation-name: lightSpeedOut;
2253 animation-name: lightSpeedOut;
2254 -webkit-animation-timing-function: ease-in;
2255 animation-timing-function: ease-in;
2256 }
2257
2258 @-webkit-keyframes rotateIn {
2259 from {
2260 -webkit-transform-origin: center;
2261 transform-origin: center;
2262 -webkit-transform: rotate3d(0, 0, 1, -200deg);
2263 transform: rotate3d(0, 0, 1, -200deg);
2264 opacity: 0;
2265 }
2266
2267 to {
2268 -webkit-transform-origin: center;
2269 transform-origin: center;
2270 -webkit-transform: translate3d(0, 0, 0);
2271 transform: translate3d(0, 0, 0);
2272 opacity: 1;
2273 }
2274 }
2275
2276 @keyframes rotateIn {
2277 from {
2278 -webkit-transform-origin: center;
2279 transform-origin: center;
2280 -webkit-transform: rotate3d(0, 0, 1, -200deg);
2281 transform: rotate3d(0, 0, 1, -200deg);
2282 opacity: 0;
2283 }
2284
2285 to {
2286 -webkit-transform-origin: center;
2287 transform-origin: center;
2288 -webkit-transform: translate3d(0, 0, 0);
2289 transform: translate3d(0, 0, 0);
2290 opacity: 1;
2291 }
2292 }
2293
2294 .rotateIn {
2295 -webkit-animation-name: rotateIn;
2296 animation-name: rotateIn;
2297 }
2298
2299 @-webkit-keyframes rotateInDownLeft {
2300 from {
2301 -webkit-transform-origin: left bottom;
2302 transform-origin: left bottom;
2303 -webkit-transform: rotate3d(0, 0, 1, -45deg);
2304 transform: rotate3d(0, 0, 1, -45deg);
2305 opacity: 0;
2306 }
2307
2308 to {
2309 -webkit-transform-origin: left bottom;
2310 transform-origin: left bottom;
2311 -webkit-transform: translate3d(0, 0, 0);
2312 transform: translate3d(0, 0, 0);
2313 opacity: 1;
2314 }
2315 }
2316
2317 @keyframes rotateInDownLeft {
2318 from {
2319 -webkit-transform-origin: left bottom;
2320 transform-origin: left bottom;
2321 -webkit-transform: rotate3d(0, 0, 1, -45deg);
2322 transform: rotate3d(0, 0, 1, -45deg);
2323 opacity: 0;
2324 }
2325
2326 to {
2327 -webkit-transform-origin: left bottom;
2328 transform-origin: left bottom;
2329 -webkit-transform: translate3d(0, 0, 0);
2330 transform: translate3d(0, 0, 0);
2331 opacity: 1;
2332 }
2333 }
2334
2335 .rotateInDownLeft {
2336 -webkit-animation-name: rotateInDownLeft;
2337 animation-name: rotateInDownLeft;
2338 }
2339
2340 @-webkit-keyframes rotateInDownRight {
2341 from {
2342 -webkit-transform-origin: right bottom;
2343 transform-origin: right bottom;
2344 -webkit-transform: rotate3d(0, 0, 1, 45deg);
2345 transform: rotate3d(0, 0, 1, 45deg);
2346 opacity: 0;
2347 }
2348
2349 to {
2350 -webkit-transform-origin: right bottom;
2351 transform-origin: right bottom;
2352 -webkit-transform: translate3d(0, 0, 0);
2353 transform: translate3d(0, 0, 0);
2354 opacity: 1;
2355 }
2356 }
2357
2358 @keyframes rotateInDownRight {
2359 from {
2360 -webkit-transform-origin: right bottom;
2361 transform-origin: right bottom;
2362 -webkit-transform: rotate3d(0, 0, 1, 45deg);
2363 transform: rotate3d(0, 0, 1, 45deg);
2364 opacity: 0;
2365 }
2366
2367 to {
2368 -webkit-transform-origin: right bottom;
2369 transform-origin: right bottom;
2370 -webkit-transform: translate3d(0, 0, 0);
2371 transform: translate3d(0, 0, 0);
2372 opacity: 1;
2373 }
2374 }
2375
2376 .rotateInDownRight {
2377 -webkit-animation-name: rotateInDownRight;
2378 animation-name: rotateInDownRight;
2379 }
2380
2381 @-webkit-keyframes rotateInUpLeft {
2382 from {
2383 -webkit-transform-origin: left bottom;
2384 transform-origin: left bottom;
2385 -webkit-transform: rotate3d(0, 0, 1, 45deg);
2386 transform: rotate3d(0, 0, 1, 45deg);
2387 opacity: 0;
2388 }
2389
2390 to {
2391 -webkit-transform-origin: left bottom;
2392 transform-origin: left bottom;
2393 -webkit-transform: translate3d(0, 0, 0);
2394 transform: translate3d(0, 0, 0);
2395 opacity: 1;
2396 }
2397 }
2398
2399 @keyframes rotateInUpLeft {
2400 from {
2401 -webkit-transform-origin: left bottom;
2402 transform-origin: left bottom;
2403 -webkit-transform: rotate3d(0, 0, 1, 45deg);
2404 transform: rotate3d(0, 0, 1, 45deg);
2405 opacity: 0;
2406 }
2407
2408 to {
2409 -webkit-transform-origin: left bottom;
2410 transform-origin: left bottom;
2411 -webkit-transform: translate3d(0, 0, 0);
2412 transform: translate3d(0, 0, 0);
2413 opacity: 1;
2414 }
2415 }
2416
2417 .rotateInUpLeft {
2418 -webkit-animation-name: rotateInUpLeft;
2419 animation-name: rotateInUpLeft;
2420 }
2421
2422 @-webkit-keyframes rotateInUpRight {
2423 from {
2424 -webkit-transform-origin: right bottom;
2425 transform-origin: right bottom;
2426 -webkit-transform: rotate3d(0, 0, 1, -90deg);
2427 transform: rotate3d(0, 0, 1, -90deg);
2428 opacity: 0;
2429 }
2430
2431 to {
2432 -webkit-transform-origin: right bottom;
2433 transform-origin: right bottom;
2434 -webkit-transform: translate3d(0, 0, 0);
2435 transform: translate3d(0, 0, 0);
2436 opacity: 1;
2437 }
2438 }
2439
2440 @keyframes rotateInUpRight {
2441 from {
2442 -webkit-transform-origin: right bottom;
2443 transform-origin: right bottom;
2444 -webkit-transform: rotate3d(0, 0, 1, -90deg);
2445 transform: rotate3d(0, 0, 1, -90deg);
2446 opacity: 0;
2447 }
2448
2449 to {
2450 -webkit-transform-origin: right bottom;
2451 transform-origin: right bottom;
2452 -webkit-transform: translate3d(0, 0, 0);
2453 transform: translate3d(0, 0, 0);
2454 opacity: 1;
2455 }
2456 }
2457
2458 .rotateInUpRight {
2459 -webkit-animation-name: rotateInUpRight;
2460 animation-name: rotateInUpRight;
2461 }
2462
2463 @-webkit-keyframes rotateOut {
2464 from {
2465 -webkit-transform-origin: center;
2466 transform-origin: center;
2467 opacity: 1;
2468 }
2469
2470 to {
2471 -webkit-transform-origin: center;
2472 transform-origin: center;
2473 -webkit-transform: rotate3d(0, 0, 1, 200deg);
2474 transform: rotate3d(0, 0, 1, 200deg);
2475 opacity: 0;
2476 }
2477 }
2478
2479 @keyframes rotateOut {
2480 from {
2481 -webkit-transform-origin: center;
2482 transform-origin: center;
2483 opacity: 1;
2484 }
2485
2486 to {
2487 -webkit-transform-origin: center;
2488 transform-origin: center;
2489 -webkit-transform: rotate3d(0, 0, 1, 200deg);
2490 transform: rotate3d(0, 0, 1, 200deg);
2491 opacity: 0;
2492 }
2493 }
2494
2495 .rotateOut {
2496 -webkit-animation-name: rotateOut;
2497 animation-name: rotateOut;
2498 }
2499
2500 @-webkit-keyframes rotateOutDownLeft {
2501 from {
2502 -webkit-transform-origin: left bottom;
2503 transform-origin: left bottom;
2504 opacity: 1;
2505 }
2506
2507 to {
2508 -webkit-transform-origin: left bottom;
2509 transform-origin: left bottom;
2510 -webkit-transform: rotate3d(0, 0, 1, 45deg);
2511 transform: rotate3d(0, 0, 1, 45deg);
2512 opacity: 0;
2513 }
2514 }
2515
2516 @keyframes rotateOutDownLeft {
2517 from {
2518 -webkit-transform-origin: left bottom;
2519 transform-origin: left bottom;
2520 opacity: 1;
2521 }
2522
2523 to {
2524 -webkit-transform-origin: left bottom;
2525 transform-origin: left bottom;
2526 -webkit-transform: rotate3d(0, 0, 1, 45deg);
2527 transform: rotate3d(0, 0, 1, 45deg);
2528 opacity: 0;
2529 }
2530 }
2531
2532 .rotateOutDownLeft {
2533 -webkit-animation-name: rotateOutDownLeft;
2534 animation-name: rotateOutDownLeft;
2535 }
2536
2537 @-webkit-keyframes rotateOutDownRight {
2538 from {
2539 -webkit-transform-origin: right bottom;
2540 transform-origin: right bottom;
2541 opacity: 1;
2542 }
2543
2544 to {
2545 -webkit-transform-origin: right bottom;
2546 transform-origin: right bottom;
2547 -webkit-transform: rotate3d(0, 0, 1, -45deg);
2548 transform: rotate3d(0, 0, 1, -45deg);
2549 opacity: 0;
2550 }
2551 }
2552
2553 @keyframes rotateOutDownRight {
2554 from {
2555 -webkit-transform-origin: right bottom;
2556 transform-origin: right bottom;
2557 opacity: 1;
2558 }
2559
2560 to {
2561 -webkit-transform-origin: right bottom;
2562 transform-origin: right bottom;
2563 -webkit-transform: rotate3d(0, 0, 1, -45deg);
2564 transform: rotate3d(0, 0, 1, -45deg);
2565 opacity: 0;
2566 }
2567 }
2568
2569 .rotateOutDownRight {
2570 -webkit-animation-name: rotateOutDownRight;
2571 animation-name: rotateOutDownRight;
2572 }
2573
2574 @-webkit-keyframes rotateOutUpLeft {
2575 from {
2576 -webkit-transform-origin: left bottom;
2577 transform-origin: left bottom;
2578 opacity: 1;
2579 }
2580
2581 to {
2582 -webkit-transform-origin: left bottom;
2583 transform-origin: left bottom;
2584 -webkit-transform: rotate3d(0, 0, 1, -45deg);
2585 transform: rotate3d(0, 0, 1, -45deg);
2586 opacity: 0;
2587 }
2588 }
2589
2590 @keyframes rotateOutUpLeft {
2591 from {
2592 -webkit-transform-origin: left bottom;
2593 transform-origin: left bottom;
2594 opacity: 1;
2595 }
2596
2597 to {
2598 -webkit-transform-origin: left bottom;
2599 transform-origin: left bottom;
2600 -webkit-transform: rotate3d(0, 0, 1, -45deg);
2601 transform: rotate3d(0, 0, 1, -45deg);
2602 opacity: 0;
2603 }
2604 }
2605
2606 .rotateOutUpLeft {
2607 -webkit-animation-name: rotateOutUpLeft;
2608 animation-name: rotateOutUpLeft;
2609 }
2610
2611 @-webkit-keyframes rotateOutUpRight {
2612 from {
2613 -webkit-transform-origin: right bottom;
2614 transform-origin: right bottom;
2615 opacity: 1;
2616 }
2617
2618 to {
2619 -webkit-transform-origin: right bottom;
2620 transform-origin: right bottom;
2621 -webkit-transform: rotate3d(0, 0, 1, 90deg);
2622 transform: rotate3d(0, 0, 1, 90deg);
2623 opacity: 0;
2624 }
2625 }
2626
2627 @keyframes rotateOutUpRight {
2628 from {
2629 -webkit-transform-origin: right bottom;
2630 transform-origin: right bottom;
2631 opacity: 1;
2632 }
2633
2634 to {
2635 -webkit-transform-origin: right bottom;
2636 transform-origin: right bottom;
2637 -webkit-transform: rotate3d(0, 0, 1, 90deg);
2638 transform: rotate3d(0, 0, 1, 90deg);
2639 opacity: 0;
2640 }
2641 }
2642
2643 .rotateOutUpRight {
2644 -webkit-animation-name: rotateOutUpRight;
2645 animation-name: rotateOutUpRight;
2646 }
2647
2648 @-webkit-keyframes hinge {
2649 0% {
2650 -webkit-transform-origin: top left;
2651 transform-origin: top left;
2652 -webkit-animation-timing-function: ease-in-out;
2653 animation-timing-function: ease-in-out;
2654 }
2655
2656 20%,
2657 60% {
2658 -webkit-transform: rotate3d(0, 0, 1, 80deg);
2659 transform: rotate3d(0, 0, 1, 80deg);
2660 -webkit-transform-origin: top left;
2661 transform-origin: top left;
2662 -webkit-animation-timing-function: ease-in-out;
2663 animation-timing-function: ease-in-out;
2664 }
2665
2666 40%,
2667 80% {
2668 -webkit-transform: rotate3d(0, 0, 1, 60deg);
2669 transform: rotate3d(0, 0, 1, 60deg);
2670 -webkit-transform-origin: top left;
2671 transform-origin: top left;
2672 -webkit-animation-timing-function: ease-in-out;
2673 animation-timing-function: ease-in-out;
2674 opacity: 1;
2675 }
2676
2677 to {
2678 -webkit-transform: translate3d(0, 700px, 0);
2679 transform: translate3d(0, 700px, 0);
2680 opacity: 0;
2681 }
2682 }
2683
2684 @keyframes hinge {
2685 0% {
2686 -webkit-transform-origin: top left;
2687 transform-origin: top left;
2688 -webkit-animation-timing-function: ease-in-out;
2689 animation-timing-function: ease-in-out;
2690 }
2691
2692 20%,
2693 60% {
2694 -webkit-transform: rotate3d(0, 0, 1, 80deg);
2695 transform: rotate3d(0, 0, 1, 80deg);
2696 -webkit-transform-origin: top left;
2697 transform-origin: top left;
2698 -webkit-animation-timing-function: ease-in-out;
2699 animation-timing-function: ease-in-out;
2700 }
2701
2702 40%,
2703 80% {
2704 -webkit-transform: rotate3d(0, 0, 1, 60deg);
2705 transform: rotate3d(0, 0, 1, 60deg);
2706 -webkit-transform-origin: top left;
2707 transform-origin: top left;
2708 -webkit-animation-timing-function: ease-in-out;
2709 animation-timing-function: ease-in-out;
2710 opacity: 1;
2711 }
2712
2713 to {
2714 -webkit-transform: translate3d(0, 700px, 0);
2715 transform: translate3d(0, 700px, 0);
2716 opacity: 0;
2717 }
2718 }
2719
2720 .hinge {
2721 -webkit-animation-duration: 2s;
2722 animation-duration: 2s;
2723 -webkit-animation-name: hinge;
2724 animation-name: hinge;
2725 }
2726
2727 @-webkit-keyframes jackInTheBox {
2728 from {
2729 opacity: 0;
2730 -webkit-transform: scale(0.1) rotate(30deg);
2731 transform: scale(0.1) rotate(30deg);
2732 -webkit-transform-origin: center bottom;
2733 transform-origin: center bottom;
2734 }
2735
2736 50% {
2737 -webkit-transform: rotate(-10deg);
2738 transform: rotate(-10deg);
2739 }
2740
2741 70% {
2742 -webkit-transform: rotate(3deg);
2743 transform: rotate(3deg);
2744 }
2745
2746 to {
2747 opacity: 1;
2748 -webkit-transform: scale(1);
2749 transform: scale(1);
2750 }
2751 }
2752
2753 @keyframes jackInTheBox {
2754 from {
2755 opacity: 0;
2756 -webkit-transform: scale(0.1) rotate(30deg);
2757 transform: scale(0.1) rotate(30deg);
2758 -webkit-transform-origin: center bottom;
2759 transform-origin: center bottom;
2760 }
2761
2762 50% {
2763 -webkit-transform: rotate(-10deg);
2764 transform: rotate(-10deg);
2765 }
2766
2767 70% {
2768 -webkit-transform: rotate(3deg);
2769 transform: rotate(3deg);
2770 }
2771
2772 to {
2773 opacity: 1;
2774 -webkit-transform: scale(1);
2775 transform: scale(1);
2776 }
2777 }
2778
2779 .jackInTheBox {
2780 -webkit-animation-name: jackInTheBox;
2781 animation-name: jackInTheBox;
2782 }
2783
2784 @-webkit-keyframes rollIn {
2785 from {
2786 opacity: 0;
2787 -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2788 transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2789 }
2790
2791 to {
2792 opacity: 1;
2793 -webkit-transform: translate3d(0, 0, 0);
2794 transform: translate3d(0, 0, 0);
2795 }
2796 }
2797
2798 @keyframes rollIn {
2799 from {
2800 opacity: 0;
2801 -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2802 transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2803 }
2804
2805 to {
2806 opacity: 1;
2807 -webkit-transform: translate3d(0, 0, 0);
2808 transform: translate3d(0, 0, 0);
2809 }
2810 }
2811
2812 .rollIn {
2813 -webkit-animation-name: rollIn;
2814 animation-name: rollIn;
2815 }
2816
2817 @-webkit-keyframes rollOut {
2818 from {
2819 opacity: 1;
2820 }
2821
2822 to {
2823 opacity: 0;
2824 -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2825 transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2826 }
2827 }
2828
2829 @keyframes rollOut {
2830 from {
2831 opacity: 1;
2832 }
2833
2834 to {
2835 opacity: 0;
2836 -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2837 transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2838 }
2839 }
2840
2841 .rollOut {
2842 -webkit-animation-name: rollOut;
2843 animation-name: rollOut;
2844 }
2845
2846 @-webkit-keyframes zoomIn {
2847 from {
2848 opacity: 0;
2849 -webkit-transform: scale3d(0.3, 0.3, 0.3);
2850 transform: scale3d(0.3, 0.3, 0.3);
2851 }
2852
2853 50% {
2854 opacity: 1;
2855 }
2856 }
2857
2858 @keyframes zoomIn {
2859 from {
2860 opacity: 0;
2861 -webkit-transform: scale3d(0.3, 0.3, 0.3);
2862 transform: scale3d(0.3, 0.3, 0.3);
2863 }
2864
2865 50% {
2866 opacity: 1;
2867 }
2868 }
2869
2870 .zoomIn {
2871 -webkit-animation-name: zoomIn;
2872 animation-name: zoomIn;
2873 }
2874
2875 @-webkit-keyframes zoomInDown {
2876 from {
2877 opacity: 0;
2878 -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
2879 transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
2880 -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
2881 animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
2882 }
2883
2884 60% {
2885 opacity: 1;
2886 -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
2887 transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
2888 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
2889 animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
2890 }
2891 }
2892
2893 @keyframes zoomInDown {
2894 from {
2895 opacity: 0;
2896 -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
2897 transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
2898 -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
2899 animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
2900 }
2901
2902 60% {
2903 opacity: 1;
2904 -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
2905 transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
2906 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
2907 animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
2908 }
2909 }
2910
2911 .zoomInDown {
2912 -webkit-animation-name: zoomInDown;
2913 animation-name: zoomInDown;
2914 }
2915
2916 @-webkit-keyframes zoomInLeft {
2917 from {
2918 opacity: 0;
2919 -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
2920 transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
2921 -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
2922 animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
2923 }
2924
2925 60% {
2926 opacity: 1;
2927 -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
2928 transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
2929 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
2930 animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
2931 }
2932 }
2933
2934 @keyframes zoomInLeft {
2935 from {
2936 opacity: 0;
2937 -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
2938 transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
2939 -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
2940 animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
2941 }
2942
2943 60% {
2944 opacity: 1;
2945 -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
2946 transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
2947 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
2948 animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
2949 }
2950 }
2951
2952 .zoomInLeft {
2953 -webkit-animation-name: zoomInLeft;
2954 animation-name: zoomInLeft;
2955 }
2956
2957 @-webkit-keyframes zoomInRight {
2958 from {
2959 opacity: 0;
2960 -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
2961 transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
2962 -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
2963 animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
2964 }
2965
2966 60% {
2967 opacity: 1;
2968 -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
2969 transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
2970 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
2971 animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
2972 }
2973 }
2974
2975 @keyframes zoomInRight {
2976 from {
2977 opacity: 0;
2978 -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
2979 transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
2980 -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
2981 animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
2982 }
2983
2984 60% {
2985 opacity: 1;
2986 -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
2987 transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
2988 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
2989 animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
2990 }
2991 }
2992
2993 .zoomInRight {
2994 -webkit-animation-name: zoomInRight;
2995 animation-name: zoomInRight;
2996 }
2997
2998 @-webkit-keyframes zoomInUp {
2999 from {
3000 opacity: 0;
3001 -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
3002 transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
3003 -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3004 animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3005 }
3006
3007 60% {
3008 opacity: 1;
3009 -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
3010 transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
3011 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3012 animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3013 }
3014 }
3015
3016 @keyframes zoomInUp {
3017 from {
3018 opacity: 0;
3019 -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
3020 transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
3021 -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3022 animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3023 }
3024
3025 60% {
3026 opacity: 1;
3027 -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
3028 transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
3029 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3030 animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3031 }
3032 }
3033
3034 .zoomInUp {
3035 -webkit-animation-name: zoomInUp;
3036 animation-name: zoomInUp;
3037 }
3038
3039 @-webkit-keyframes zoomOut {
3040 from {
3041 opacity: 1;
3042 }
3043
3044 50% {
3045 opacity: 0;
3046 -webkit-transform: scale3d(0.3, 0.3, 0.3);
3047 transform: scale3d(0.3, 0.3, 0.3);
3048 }
3049
3050 to {
3051 opacity: 0;
3052 }
3053 }
3054
3055 @keyframes zoomOut {
3056 from {
3057 opacity: 1;
3058 }
3059
3060 50% {
3061 opacity: 0;
3062 -webkit-transform: scale3d(0.3, 0.3, 0.3);
3063 transform: scale3d(0.3, 0.3, 0.3);
3064 }
3065
3066 to {
3067 opacity: 0;
3068 }
3069 }
3070
3071 .zoomOut {
3072 -webkit-animation-name: zoomOut;
3073 animation-name: zoomOut;
3074 }
3075
3076 @-webkit-keyframes zoomOutDown {
3077 40% {
3078 opacity: 1;
3079 -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
3080 transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
3081 -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3082 animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3083 }
3084
3085 to {
3086 opacity: 0;
3087 -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
3088 transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
3089 -webkit-transform-origin: center bottom;
3090 transform-origin: center bottom;
3091 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3092 animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3093 }
3094 }
3095
3096 @keyframes zoomOutDown {
3097 40% {
3098 opacity: 1;
3099 -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
3100 transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
3101 -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3102 animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3103 }
3104
3105 to {
3106 opacity: 0;
3107 -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
3108 transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
3109 -webkit-transform-origin: center bottom;
3110 transform-origin: center bottom;
3111 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3112 animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3113 }
3114 }
3115
3116 .zoomOutDown {
3117 -webkit-animation-name: zoomOutDown;
3118 animation-name: zoomOutDown;
3119 }
3120
3121 @-webkit-keyframes zoomOutLeft {
3122 40% {
3123 opacity: 1;
3124 -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
3125 transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
3126 }
3127
3128 to {
3129 opacity: 0;
3130 -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
3131 transform: scale(0.1) translate3d(-2000px, 0, 0);
3132 -webkit-transform-origin: left center;
3133 transform-origin: left center;
3134 }
3135 }
3136
3137 @keyframes zoomOutLeft {
3138 40% {
3139 opacity: 1;
3140 -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
3141 transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
3142 }
3143
3144 to {
3145 opacity: 0;
3146 -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
3147 transform: scale(0.1) translate3d(-2000px, 0, 0);
3148 -webkit-transform-origin: left center;
3149 transform-origin: left center;
3150 }
3151 }
3152
3153 .zoomOutLeft {
3154 -webkit-animation-name: zoomOutLeft;
3155 animation-name: zoomOutLeft;
3156 }
3157
3158 @-webkit-keyframes zoomOutRight {
3159 40% {
3160 opacity: 1;
3161 -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
3162 transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
3163 }
3164
3165 to {
3166 opacity: 0;
3167 -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
3168 transform: scale(0.1) translate3d(2000px, 0, 0);
3169 -webkit-transform-origin: right center;
3170 transform-origin: right center;
3171 }
3172 }
3173
3174 @keyframes zoomOutRight {
3175 40% {
3176 opacity: 1;
3177 -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
3178 transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
3179 }
3180
3181 to {
3182 opacity: 0;
3183 -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
3184 transform: scale(0.1) translate3d(2000px, 0, 0);
3185 -webkit-transform-origin: right center;
3186 transform-origin: right center;
3187 }
3188 }
3189
3190 .zoomOutRight {
3191 -webkit-animation-name: zoomOutRight;
3192 animation-name: zoomOutRight;
3193 }
3194
3195 @-webkit-keyframes zoomOutUp {
3196 40% {
3197 opacity: 1;
3198 -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
3199 transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
3200 -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3201 animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3202 }
3203
3204 to {
3205 opacity: 0;
3206 -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
3207 transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
3208 -webkit-transform-origin: center bottom;
3209 transform-origin: center bottom;
3210 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3211 animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3212 }
3213 }
3214
3215 @keyframes zoomOutUp {
3216 40% {
3217 opacity: 1;
3218 -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
3219 transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
3220 -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3221 animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3222 }
3223
3224 to {
3225 opacity: 0;
3226 -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
3227 transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
3228 -webkit-transform-origin: center bottom;
3229 transform-origin: center bottom;
3230 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3231 animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3232 }
3233 }
3234
3235 .zoomOutUp {
3236 -webkit-animation-name: zoomOutUp;
3237 animation-name: zoomOutUp;
3238 }
3239
3240 @-webkit-keyframes slideInDown {
3241 from {
3242 -webkit-transform: translate3d(0, -100%, 0);
3243 transform: translate3d(0, -100%, 0);
3244 visibility: visible;
3245 }
3246
3247 to {
3248 -webkit-transform: translate3d(0, 0, 0);
3249 transform: translate3d(0, 0, 0);
3250 }
3251 }
3252
3253 @keyframes slideInDown {
3254 from {
3255 -webkit-transform: translate3d(0, -100%, 0);
3256 transform: translate3d(0, -100%, 0);
3257 visibility: visible;
3258 }
3259
3260 to {
3261 -webkit-transform: translate3d(0, 0, 0);
3262 transform: translate3d(0, 0, 0);
3263 }
3264 }
3265
3266 .slideInDown {
3267 -webkit-animation-name: slideInDown;
3268 animation-name: slideInDown;
3269 }
3270
3271 @-webkit-keyframes slideInLeft {
3272 from {
3273 -webkit-transform: translate3d(-100%, 0, 0);
3274 transform: translate3d(-100%, 0, 0);
3275 visibility: visible;
3276 }
3277
3278 to {
3279 -webkit-transform: translate3d(0, 0, 0);
3280 transform: translate3d(0, 0, 0);
3281 }
3282 }
3283
3284 @keyframes slideInLeft {
3285 from {
3286 -webkit-transform: translate3d(-100%, 0, 0);
3287 transform: translate3d(-100%, 0, 0);
3288 visibility: visible;
3289 }
3290
3291 to {
3292 -webkit-transform: translate3d(0, 0, 0);
3293 transform: translate3d(0, 0, 0);
3294 }
3295 }
3296
3297 .slideInLeft {
3298 -webkit-animation-name: slideInLeft;
3299 animation-name: slideInLeft;
3300 }
3301
3302 @-webkit-keyframes slideInRight {
3303 from {
3304 -webkit-transform: translate3d(100%, 0, 0);
3305 transform: translate3d(100%, 0, 0);
3306 visibility: visible;
3307 }
3308
3309 to {
3310 -webkit-transform: translate3d(0, 0, 0);
3311 transform: translate3d(0, 0, 0);
3312 }
3313 }
3314
3315 @keyframes slideInRight {
3316 from {
3317 -webkit-transform: translate3d(100%, 0, 0);
3318 transform: translate3d(100%, 0, 0);
3319 visibility: visible;
3320 }
3321
3322 to {
3323 -webkit-transform: translate3d(0, 0, 0);
3324 transform: translate3d(0, 0, 0);
3325 }
3326 }
3327
3328 .slideInRight {
3329 -webkit-animation-name: slideInRight;
3330 animation-name: slideInRight;
3331 }
3332
3333 @-webkit-keyframes slideInUp {
3334 from {
3335 -webkit-transform: translate3d(0, 100%, 0);
3336 transform: translate3d(0, 100%, 0);
3337 visibility: visible;
3338 }
3339
3340 to {
3341 -webkit-transform: translate3d(0, 0, 0);
3342 transform: translate3d(0, 0, 0);
3343 }
3344 }
3345
3346 @keyframes slideInUp {
3347 from {
3348 -webkit-transform: translate3d(0, 100%, 0);
3349 transform: translate3d(0, 100%, 0);
3350 visibility: visible;
3351 }
3352
3353 to {
3354 -webkit-transform: translate3d(0, 0, 0);
3355 transform: translate3d(0, 0, 0);
3356 }
3357 }
3358
3359 .slideInUp {
3360 -webkit-animation-name: slideInUp;
3361 animation-name: slideInUp;
3362 }
3363
3364 @-webkit-keyframes slideOutDown {
3365 from {
3366 -webkit-transform: translate3d(0, 0, 0);
3367 transform: translate3d(0, 0, 0);
3368 }
3369
3370 to {
3371 visibility: hidden;
3372 -webkit-transform: translate3d(0, 100%, 0);
3373 transform: translate3d(0, 100%, 0);
3374 }
3375 }
3376
3377 @keyframes slideOutDown {
3378 from {
3379 -webkit-transform: translate3d(0, 0, 0);
3380 transform: translate3d(0, 0, 0);
3381 }
3382
3383 to {
3384 visibility: hidden;
3385 -webkit-transform: translate3d(0, 100%, 0);
3386 transform: translate3d(0, 100%, 0);
3387 }
3388 }
3389
3390 .slideOutDown {
3391 -webkit-animation-name: slideOutDown;
3392 animation-name: slideOutDown;
3393 }
3394
3395 @-webkit-keyframes slideOutLeft {
3396 from {
3397 -webkit-transform: translate3d(0, 0, 0);
3398 transform: translate3d(0, 0, 0);
3399 }
3400
3401 to {
3402 visibility: hidden;
3403 -webkit-transform: translate3d(-100%, 0, 0);
3404 transform: translate3d(-100%, 0, 0);
3405 }
3406 }
3407
3408 @keyframes slideOutLeft {
3409 from {
3410 -webkit-transform: translate3d(0, 0, 0);
3411 transform: translate3d(0, 0, 0);
3412 }
3413
3414 to {
3415 visibility: hidden;
3416 -webkit-transform: translate3d(-100%, 0, 0);
3417 transform: translate3d(-100%, 0, 0);
3418 }
3419 }
3420
3421 .slideOutLeft {
3422 -webkit-animation-name: slideOutLeft;
3423 animation-name: slideOutLeft;
3424 }
3425
3426 @-webkit-keyframes slideOutRight {
3427 from {
3428 -webkit-transform: translate3d(0, 0, 0);
3429 transform: translate3d(0, 0, 0);
3430 }
3431
3432 to {
3433 visibility: hidden;
3434 -webkit-transform: translate3d(100%, 0, 0);
3435 transform: translate3d(100%, 0, 0);
3436 }
3437 }
3438
3439 @keyframes slideOutRight {
3440 from {
3441 -webkit-transform: translate3d(0, 0, 0);
3442 transform: translate3d(0, 0, 0);
3443 }
3444
3445 to {
3446 visibility: hidden;
3447 -webkit-transform: translate3d(100%, 0, 0);
3448 transform: translate3d(100%, 0, 0);
3449 }
3450 }
3451
3452 .slideOutRight {
3453 -webkit-animation-name: slideOutRight;
3454 animation-name: slideOutRight;
3455 }
3456
3457 @-webkit-keyframes slideOutUp {
3458 from {
3459 -webkit-transform: translate3d(0, 0, 0);
3460 transform: translate3d(0, 0, 0);
3461 }
3462
3463 to {
3464 visibility: hidden;
3465 -webkit-transform: translate3d(0, -100%, 0);
3466 transform: translate3d(0, -100%, 0);
3467 }
3468 }
3469
3470 @keyframes slideOutUp {
3471 from {
3472 -webkit-transform: translate3d(0, 0, 0);
3473 transform: translate3d(0, 0, 0);
3474 }
3475
3476 to {
3477 visibility: hidden;
3478 -webkit-transform: translate3d(0, -100%, 0);
3479 transform: translate3d(0, -100%, 0);
3480 }
3481 }
3482
3483 .slideOutUp {
3484 -webkit-animation-name: slideOutUp;
3485 animation-name: slideOutUp;
3486 }
...@@ -11,4 +11,4 @@ ...@@ -11,4 +11,4 @@
11 11
12 @import "var"; 12 @import "var";
13 13
14 @import "animate"; 14
......

89.5 KB | W: | H:

90.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -68,7 +68,8 @@ ...@@ -68,7 +68,8 @@
68 margin: 0 auto; 68 margin: 0 auto;
69 width: 480px; 69 width: 480px;
70 color: #333333; 70 color: #333333;
71 font-size: 28px; 71 // font-size: 28px;
72 font-size: 24px;
72 line-height: 1.6; 73 line-height: 1.6;
73 height: 140px; 74 height: 140px;
74 @include ellipsis(3); 75 @include ellipsis(3);
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 <view class="content"> 9 <view class="content">
10 <!-- 摇一摇 --> 10 <!-- 摇一摇 -->
11 <!-- bindtap="queryWishbillAssist" --> 11 <!-- bindtap="queryWishbillAssist" -->
12 <view bindtap="queryWishbillAssist" wx:if="{{status != 1}}" class="shake"> 12 <view bindtap="queryWishbillAssist" wx:if="{{status != 1 && wishInfo.isAssist != 1}}" class="shake">
13 <image class="ebg" mode="widthFix" src="../../image/oss/coop/coop-c2.png" /> 13 <image class="ebg" mode="widthFix" src="../../image/oss/coop/coop-c2.png" />
14 <image class="coop-shake animated tada infinite" mode="widthFix " src="../../image/oss/coop/coop-shake.png" /> 14 <image class="coop-shake animated tada infinite" mode="widthFix " src="../../image/oss/coop/coop-shake.png" />
15 <view class="space1"></view> 15 <view class="space1"></view>
......
...@@ -15,7 +15,7 @@ Page({ ...@@ -15,7 +15,7 @@ Page({
15 tipsGroupMemberVisible: false, 15 tipsGroupMemberVisible: false,
16 tipsNewMemberVisible: false, 16 tipsNewMemberVisible: false,
17 tipsWishVisible: false, 17 tipsWishVisible: false,
18 tipsShakeVisible: true, 18 tipsShakeVisible: false,
19 tipsCommonVisible: false, 19 tipsCommonVisible: false,
20 tipsCreateCompleteVisible: false, 20 tipsCreateCompleteVisible: false,
21 tipsInnerText: "", 21 tipsInnerText: "",
...@@ -31,6 +31,7 @@ Page({ ...@@ -31,6 +31,7 @@ Page({
31 userInfo: {}, 31 userInfo: {},
32 isPageVisible: false, 32 isPageVisible: false,
33 // canShake:false, 33 // canShake:false,
34 guideIndex: 0,
34 }, 35 },
35 onShareAppMessage() {}, 36 onShareAppMessage() {},
36 onShow() { 37 onShow() {
...@@ -59,17 +60,20 @@ Page({ ...@@ -59,17 +60,20 @@ Page({
59 this.initBorder(); 60 this.initBorder();
60 }) 61 })
61 this.checkNeedQuestion(); 62 this.checkNeedQuestion();
63 this.checkFirst();
62 }); 64 });
63 this.initShake(); 65 this.initShake();
64 }, 66 },
65 initBorder() { 67 initBorder() {
66 // 第一幕 68 // 第一幕
67 let productList1 = [ 69 // let productList1 = [
68 "P000000000000000000000000000001", "P000000000000000000000000000002", "P000000000000000000000000000003" 70 // "P000000000000000000000000000001", "P000000000000000000000000000002", "P000000000000000000000000000003"
69 ] 71 // ]
70 let targetProductList = productList1; 72 // let targetProductList = productList1;
71 let randomIndex = targetProductList[Math.floor(Math.random() * targetProductList.length)]; 73 // let randomIndex = targetProductList[Math.floor(Math.random() * targetProductList.length)];
72 this.doShowTipsBorder(randomIndex); 74 // this.doShowTipsBorder(randomIndex);
75 this.doShowTipsBorder("P000000000000000000000000000002");
76
73 }, 77 },
74 // 添加摇一摇 78 // 添加摇一摇
75 initShake() { 79 initShake() {
...@@ -83,20 +87,23 @@ Page({ ...@@ -83,20 +87,23 @@ Page({
83 tipsShakeVisible: false, 87 tipsShakeVisible: false,
84 tipsCreateCompleteVisible: true 88 tipsCreateCompleteVisible: true
85 }) 89 })
86 // wx.showModal({
87 // title: '提示',
88 // content: '触发摇一摇',
89 // success: res => {
90 // _this.setData({
91 // tipsShakeVisible: false,
92 // tipsCreateCompleteVisible: true
93 // })
94 // }
95 // })
96 } 90 }
97 }); 91 });
98 }, 92 },
99 93
94
95 /**
96 * 是否第一次进入当前页面
97 */
98 checkFirst() {
99 let isFirst = app.store.getItem("create-wish-first");
100 if (!isFirst) {
101 this.setData({
102 guideIndex: 1
103 })
104 }
105 },
106
100 /** 107 /**
101 * 检验是否需要先答题 是的话弹答题 108 * 检验是否需要先答题 是的话弹答题
102 * 1.已经登陆 109 * 1.已经登陆
...@@ -372,6 +379,11 @@ Page({ ...@@ -372,6 +379,11 @@ Page({
372 * @param {*} evt 379 * @param {*} evt
373 */ 380 */
374 onChangeStatusHandler(evt) { 381 onChangeStatusHandler(evt) {
382 wx.showToast({
383 title: "场景修缉中，敬请期待",
384 icon: "none"
385 });
386 return;
375 let curStatus = this.data.curStatus; 387 let curStatus = this.data.curStatus;
376 curStatus++; 388 curStatus++;
377 if (curStatus > 3) { 389 if (curStatus > 3) {
...@@ -382,6 +394,20 @@ Page({ ...@@ -382,6 +394,20 @@ Page({
382 tipsBorderVisible: false 394 tipsBorderVisible: false
383 }) 395 })
384 }, 396 },
397
398 // 点击蒙层指引
399 onGuideHandler() {
400 let guideIndex = this.data.guideIndex;
401 guideIndex++;
402 if (guideIndex > 2) {
403 guideIndex = 0;
404 app.store.setItem("create-wish-first", "true");
405 }
406 this.setData({
407 guideIndex
408 })
409 },
410
385 /** 411 /**
386 * 根据唯一码/code 索引 412 * 根据唯一码/code 索引
387 */ 413 */
......
...@@ -29,6 +29,13 @@ ...@@ -29,6 +29,13 @@
29 height: 40px; 29 height: 40px;
30 animation: scalelinear 2s linear infinite; 30 animation: scalelinear 2s linear infinite;
31 } 31 }
32
33 .rect {
34 position: absolute;
35 z-index: 41;
36 // background-color: wheat;
37 opacity: .5;
38 }
32 } 39 }
33 40
34 .view1 { 41 .view1 {
...@@ -50,6 +57,27 @@ ...@@ -50,6 +57,27 @@
50 left: 558px; 57 left: 558px;
51 top: 437px; 58 top: 437px;
52 } 59 }
60
61 .rect1 {
62 width: 150px;
63 height: 360px;
64 left: 40px;
65 top: 160px;
66 }
67
68 .rect2 {
69 width: 150px;
70 height: 150px;
71 left: 234px;
72 top: 350px;
73 }
74
75 .rect3 {
76 width: 150px;
77 height: 380px;
78 left: 534px;
79 top: 220px;
80 }
53 } 81 }
54 82
55 .tips-border { 83 .tips-border {
...@@ -232,7 +260,7 @@ ...@@ -232,7 +260,7 @@
232 font-size: 120px; 260 font-size: 120px;
233 } 261 }
234 262
235 .icon{} 263 .icon {}
236 264
237 .tips { 265 .tips {
238 266
...@@ -278,3 +306,36 @@ ...@@ -278,3 +306,36 @@
278 transform: scale(1); 306 transform: scale(1);
279 } 307 }
280 } 308 }
309
310
311 .guide {
312 position: relative;
313
314 .mask {
315 background-color: rgba($color: #000000, $alpha: .7);
316 width: 100%;
317 height: 100%;
318 z-index: 101;
319 position: fixed;
320 bottom: 0;
321 }
322
323 &-item {
324 position: absolute;
325 z-index: 9999;
326 }
327
328 &-item-1 {
329 width: 644px;
330 height: 246px;
331 top: 158px;
332 left: 20px;
333 }
334
335 &-item-2 {
336 width: 639px;
337 height: 169px;
338 top: 496px;
339 left: 40px;
340 }
341 }
......
1 <view class="page"> 1 <view class="page">
2 <view wx:if="{{guideIndex >= 1 && guideIndex <= 2 }}" bindtap="onGuideHandler" class="guide">
3 <view class="mask"></view>
4 <image wx:if="{{guideIndex == 1}}" class="guide-item guide-item-1" mode="widthFix" src="../../image/guide/guide-c-wish-1.png" />
5 <image wx:if="{{guideIndex == 2}}" class="guide-item guide-item-2" mode="widthFix" src="../../image/guide/guide-c-wish-2.png" />
6 </view>
2 <view class="app__bgc bgc {{curStatus==1?'bgc1':''}}"></view> 7 <view class="app__bgc bgc {{curStatus==1?'bgc1':''}}"></view>
3 <view class="app__bg bg"></view> 8 <view class="app__bg bg"></view>
4 <!-- 场景 --> 9 <!-- 场景 -->
...@@ -9,6 +14,9 @@ ...@@ -9,6 +14,9 @@
9 <image bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000002" class="point point1" mode="widthFix" src="../../image/oss/create-wish/cw-point.png" /> 14 <image bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000002" class="point point1" mode="widthFix" src="../../image/oss/create-wish/cw-point.png" />
10 <image bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000003" class="point point2" mode="widthFix" src="../../image/oss/create-wish/cw-point.png" /> 15 <image bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000003" class="point point2" mode="widthFix" src="../../image/oss/create-wish/cw-point.png" />
11 <image bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000001" class="point point3" mode="widthFix" src="../../image/oss/create-wish/cw-point.png" /> 16 <image bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000001" class="point point3" mode="widthFix" src="../../image/oss/create-wish/cw-point.png" />
17 <view class="rect rect1" bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000002"></view>
18 <view class="rect rect2" bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000003"></view>
19 <view class="rect rect3" bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000001"></view>
12 </view> 20 </view>
13 <view wx:if="{{curStatus==2}}" class="view view2">场景待确认2</view> 21 <view wx:if="{{curStatus==2}}" class="view view2">场景待确认2</view>
14 <view wx:if="{{curStatus==3}}" class="view view3">场景待确认3</view> 22 <view wx:if="{{curStatus==3}}" class="view view3">场景待确认3</view>
......
...@@ -13,21 +13,26 @@ Page({ ...@@ -13,21 +13,26 @@ Page({
13 }) 13 })
14 }, 14 },
15 onLoad(options) { 15 onLoad(options) {
16 app.queryIndex({ 16
17 auth: false 17 let sessionId = app.store.getItem('sessionId');
18 }).then((result) => { 18 if (sessionId) {
19 this.setData({ 19 app.queryIndex({
20 indexInfo: app.globalData.indexInfo 20 auth: false
21 }) 21 }).then((result) => {
22 let { 22 this.setData({
23 wishBillCode 23 indexInfo: app.globalData.indexInfo
24 } = app.globalData.indexInfo;
25 if (wishBillCode) {
26 app.router.push({
27 path: "wish"
28 }) 24 })
29 } 25 let {
30 }) 26 wishBillCode
27 } = app.globalData.indexInfo;
28 if (wishBillCode) {
29 app.router.push({
30 openType: "redirectTo",
31 path: "wish"
32 })
33 }
34 })
35 }
31 }, 36 },
32 initData() {}, 37 initData() {},
33 // 开始互动游戏 判断是否会员 38 // 开始互动游戏 判断是否会员
......
...@@ -21,6 +21,7 @@ Page({ ...@@ -21,6 +21,7 @@ Page({
21 status: 1, // 1正常(有库存) 2无库存 21 status: 1, // 1正常(有库存) 2无库存
22 animationThumbData: [], // 进度条动画 22 animationThumbData: [], // 进度条动画
23 animationFlagData: [], // 旗帜画库 23 animationFlagData: [], // 旗帜画库
24 guideIndex: 0, // 指引索引
24 }, 25 },
25 onShareAppMessage(res) { 26 onShareAppMessage(res) {
26 if (res.from === 'button') { 27 if (res.from === 'button') {
...@@ -55,9 +56,36 @@ Page({ ...@@ -55,9 +56,36 @@ Page({
55 this.playAnimation(); 56 this.playAnimation();
56 }); 57 });
57 this.queryWishbillHelpers(); 58 this.queryWishbillHelpers();
59 // this.pageScrollToBottom();
60 this.checkFirst();
58 }) 61 })
59 }, 62 },
60 63
64 /**
65 * 是否第一次进入当前页面
66 */
67 checkFirst() {
68 let isFirst = app.store.getItem("wish-first");
69 if (!isFirst) {
70 this.setData({
71 guideIndex: 1
72 })
73 }
74 },
75
76 /**
77 * 滚动到页面底部
78 */
79 pageScrollToBottom() {
80 wx.createSelectorQuery().select('#page').boundingClientRect(function (rect) {
81 // 使页面滚动到底部
82 wx.pageScrollTo({
83 scrollTop: rect.bottom + 5000,
84 duration: 300
85 })
86 }).exec()
87 },
88
61 // 播放动画 89 // 播放动画
62 playAnimation() { 90 playAnimation() {
63 let wishList = this.data.wishList; 91 let wishList = this.data.wishList;
...@@ -185,6 +213,25 @@ Page({ ...@@ -185,6 +213,25 @@ Page({
185 onShareHandler() { 213 onShareHandler() {
186 214
187 }, 215 },
216 // 点击蒙层指引
217 onGuideHandler() {
218 let guideIndex = this.data.guideIndex;
219 guideIndex++;
220 if (guideIndex > 4) {
221 guideIndex = 0;
222 wx.pageScrollTo({
223 scrollTop: 0,
224 duration: 300
225 })
226 app.store.setItem("wish-first", "true");
227 }
228 if (guideIndex == 4) {
229 this.pageScrollToBottom();
230 }
231 this.setData({
232 guideIndex
233 })
234 },
188 // 获取心愿单详情 235 // 获取心愿单详情
189 queryWishbillDetail() { 236 queryWishbillDetail() {
190 return new Promise((resolve, reject) => { 237 return new Promise((resolve, reject) => {
......
...@@ -88,14 +88,19 @@ ...@@ -88,14 +88,19 @@
88 .mycard { 88 .mycard {
89 @include cb(160px, 48px); 89 @include cb(160px, 48px);
90 margin: 16px auto; 90 margin: 16px auto;
91 // border-radius: 24px;
92 // box-shadow: 0px 2px 9px 0 rgba(0, 0, 0, 0.1);
93 // background-color: #ffffff;
94 // color: #bb3039;
95 // @include btc(160px, 48px);
96 font-size: 24px; 91 font-size: 24px;
97 92
93
94 // @include cb(160px, 48px);
95 // margin: 16px auto;
96 // font-size: 24px;
97 // @include btc(160px, 48px);
98 // color: #bf0221;
99 // background-image: linear-gradient(to right, #fbddd5, #f9efed 51%, #ffded9 99%), linear-gradient(to bottom, #000000, #000000);
100 // border-radius: 24px;
98 } 101 }
102
103
99 } 104 }
100 105
101 // 奖品 106 // 奖品
...@@ -225,7 +230,7 @@ ...@@ -225,7 +230,7 @@
225 background-image: linear-gradient(to right, #b83138, #f2234a 51%, #b83138); 230 background-image: linear-gradient(to right, #b83138, #f2234a 51%, #b83138);
226 color: #ffffff; 231 color: #ffffff;
227 font-size: 28px; 232 font-size: 28px;
228 @include btc(200px, 56px); 233 @include btc(192px, 54px);
229 @include border-top-radius(28px); 234 @include border-top-radius(28px);
230 } 235 }
231 } 236 }
...@@ -320,3 +325,49 @@ ...@@ -320,3 +325,49 @@
320 } 325 }
321 } 326 }
322 } 327 }
328
329 .guide {
330 position: relative;
331
332 .mask {
333 background-color: rgba($color: #000000, $alpha: .7);
334 width: 100%;
335 height: 100%;
336 z-index: 101;
337 position: fixed;
338 bottom: 0;
339 }
340
341 &-item {
342 position: absolute;
343 z-index: 9999;
344 }
345
346 &-item-1 {
347 width: 459px;
348 height: 281px;
349 top: 30px;
350 right: 2px;
351 }
352
353 &-item-2 {
354 width: 565px;
355 height: 281px;
356 top: 296px;
357 left: 127px;
358 }
359
360 &-item-3 {
361 width: 565px;
362 height: 281px;
363 top: 899.8px;
364 left: 159px;
365 }
366
367 &-item-4 {
368 width: 410px;
369 height: 199px;
370 top: 1588px;
371 left: 292px;
372 }
373 }
......
1 <view class="page"> 1 <view class="page" id="page">
2 <view wx:if="{{guideIndex >= 1 && guideIndex <= 4 }}" bindtap="onGuideHandler" class="guide">
3 <view class="mask"></view>
4 <image wx:if="{{guideIndex == 1}}" class="guide-item guide-item-1" mode="widthFix" src="../../image/guide/guide-wish-1.png" />
5 <image wx:if="{{guideIndex == 2}}" class="guide-item guide-item-2" mode="widthFix" src="../../image/guide/guide-wish-2.png" />
6 <image wx:if="{{guideIndex == 3}}" class="guide-item guide-item-3" mode="widthFix" src="../../image/guide/guide-wish-3.png" />
7 <image wx:if="{{guideIndex == 4}}" class="guide-item guide-item-4" mode="widthFix" src="../../image/guide/guide-wish-4.png" />
8 </view>
2 <view class="app__bgc bgc"></view> 9 <view class="app__bgc bgc"></view>
3 <view class="app__bg bg"> 10 <view class="app__bg bg">
4 <image class="b1" mode="widthFix" src="../../image/oss/my-wish/my-wish-c1.png" /> 11 <image class="b1" mode="widthFix" src="../../image/oss/my-wish/my-wish-c1.png" />
......