1 /* Transitions originally inspired by those from jQtouch, nice work, folks */
2 .ui-mobile-viewport-transitioning,
3 .ui-mobile-viewport-transitioning .ui-page {
10 -ms-animation-timing-function: ease-out;
11 -ms-animation-duration: 350ms;
12 -o-animation-timing-function: ease-out;
13 -o-animation-duration: 350ms;
14 -webkit-animation-timing-function: ease-out;
15 -webkit-animation-duration: 350ms;
16 -moz-animation-timing-function: ease-out;
17 -moz-animation-duration: 350ms;
21 -ms-animation-timing-function: ease-in;
22 -ms-animation-duration: 225ms;
23 -o-animation-timing-function: ease-in;
24 -o-animation-duration: 225;
25 -webkit-animation-timing-function: ease-in;
26 -webkit-animation-duration: 225ms;
27 -moz-animation-timing-function: ease-in;
28 -moz-animation-duration: 225;
34 @-webkit-keyframes fadein {
39 @-moz-keyframes fadein {
44 @-webkit-keyframes fadeout {
49 @-moz-keyframes fadeout {
56 -ms-animation-duration: 125ms;
57 -ms-animation-name: fadeout;
58 -o-animation-duration: 125ms;
59 -o-animation-name: fadeout;
60 -webkit-animation-duration: 125ms;
61 -webkit-animation-name: fadeout;
62 -moz-animation-duration: 125ms;
63 -moz-animation-name: fadeout;
68 -ms-animation-duration: 225ms;
69 -ms-animation-name: fadein;
70 -o-animation-duration: 225ms;
71 -o-animation-name: fadein;
72 -webkit-animation-duration: 225ms;
73 -webkit-animation-name: fadein;
74 -moz-animation-duration: 225ms;
75 -moz-animation-name: fadein;
81 /* The properties in this rule are only necessary for the 'flip' transition.
82 * We need specify the perspective to create a projection matrix. This will add
83 * some depth as the element flips. The depth number represents the distance of
84 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
89 -ms-perspective: 1000;
91 -webkit-perspective: 1000;
92 -moz-perspective: 1000;
96 -webkit-backface-visibility:hidden;
97 -webkit-transform:translate3d(0, 0, 0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
98 -moz-backface-visibility:hidden;
99 -moz-transform:translate3d(0, 0, 0);
103 -webkit-transform: rotateY(-90deg) scale(.9);
104 -webkit-animation-name: flipouttoleft;
105 -webkit-animation-duration: 175ms;
106 -moz-transform: rotateY(-90deg) scale(.9);
107 -moz-animation-name: flipouttoleft;
108 -moz-animation-duration: 175ms;
112 -webkit-animation-name: flipintoright;
113 -webkit-animation-duration: 225ms;
114 -moz-animation-name: flipintoright;
115 -moz-animation-duration: 225ms;
119 -webkit-transform: rotateY(90deg) scale(.9);
120 -webkit-animation-name: flipouttoright;
121 -moz-transform: rotateY(90deg) scale(.9);
122 -moz-animation-name: flipouttoright;
126 -webkit-animation-name: flipintoleft;
127 -moz-animation-name: flipintoleft;
130 @-webkit-keyframes flipouttoleft {
131 from { -webkit-transform: rotateY(0); }
132 to { -webkit-transform: rotateY(-90deg) scale(.9); }
134 @-moz-keyframes flipouttoleft {
135 from { -moz-transform: rotateY(0); }
136 to { -moz-transform: rotateY(-90deg) scale(.9); }
138 @-webkit-keyframes flipouttoright {
139 from { -webkit-transform: rotateY(0) ; }
140 to { -webkit-transform: rotateY(90deg) scale(.9); }
142 @-moz-keyframes flipouttoright {
143 from { -moz-transform: rotateY(0); }
144 to { -moz-transform: rotateY(90deg) scale(.9); }
146 @-webkit-keyframes flipintoleft {
147 from { -webkit-transform: rotateY(-90deg) scale(.9); }
148 to { -webkit-transform: rotateY(0); }
150 @-moz-keyframes flipintoleft {
151 from { -moz-transform: rotateY(-90deg) scale(.9); }
152 to { -moz-transform: rotateY(0); }
154 @-webkit-keyframes flipintoright {
155 from { -webkit-transform: rotateY(90deg) scale(.9); }
156 to { -webkit-transform: rotateY(0); }
158 @-moz-keyframes flipintoright {
159 from { -moz-transform: rotateY(90deg) scale(.9); }
160 to { -moz-transform: rotateY(0); }
164 /* flow transition */
167 -webkit-transform-origin: 50% 30%;
168 -moz-transform-origin: 50% 30%;
169 -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
170 -moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
173 -webkit-transform-origin: none;
174 -moz-transform-origin: none;
175 -webkit-box-shadow: none;
176 -moz-box-shadow: none;
179 -webkit-transform: translate3d(-100%, 0, 0) scale(.7);
180 -webkit-animation-name: flowouttoleft;
181 -webkit-animation-timing-function: ease;
182 -webkit-animation-duration: 350ms;
183 -moz-transform: translate3d(-100%, 0, 0) scale(.7);
184 -moz-animation-name: flowouttoleft;
185 -moz-animation-timing-function: ease;
186 -moz-animation-duration: 350ms;
190 -webkit-transform: translate3d(0, 0, 0) scale(1);
191 -webkit-animation-name: flowinfromright;
192 -webkit-animation-timing-function: ease;
193 -webkit-animation-duration: 350ms;
194 -moz-transform: translate3d(0, 0, 0) scale(1);
195 -moz-animation-name: flowinfromright;
196 -moz-animation-timing-function: ease;
197 -moz-animation-duration: 350ms;
201 -webkit-transform: translate3d(100%, 0, 0);
202 -webkit-animation-name: flowouttoright;
203 -moz-transform: translate3d(100%, 0, 0);
204 -moz-animation-name: flowouttoright;
208 -webkit-animation-name: flowinfromleft;
209 -moz-animation-name: flowinfromleft;
212 @-webkit-keyframes flowouttoleft {
213 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
214 60%, 70% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
215 100% { -webkit-transform: translate3d(-100%, 0, 0) scale(.7); }
217 @-moz-keyframes flowouttoleft {
218 0% { -moz-transform: translate3d(0, 0, 0) scale(1); }
219 60%, 70% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
220 100% { -moz-transform: translateX(-100%) scale(.7); }
223 @-webkit-keyframes flowouttoright {
224 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
225 60%, 70% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
226 100% { -webkit-transform: translate3d(100%, 0, 0) scale(.7); }
228 @-moz-keyframes flowouttoright {
229 0% { -moz-transform: translate3d(0, 0, 0) scale(1); }
230 60%, 70% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
231 100% { -moz-transform: translate3d(100%, 0, 0) scale(.7); }
234 @-webkit-keyframes flowinfromleft {
235 0% { -webkit-transform: translate3d(-100%, 0, 0) scale(.7); }
236 30%, 40% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
237 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
239 @-moz-keyframes flowinfromleft {
240 0% { -moz-transform: translate3d(-100%, 0, 0) scale(.7); }
241 30%, 40% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
242 100% { -moz-transform: translate3d(0, 0, 0) scale(1); }
244 @-webkit-keyframes flowinfromright {
245 0% { -webkit-transform: translate3d(100%, 0, 0) scale(.7); }
246 30%, 40% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
247 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
249 @-moz-keyframes flowinfromright {
250 0% { -moz-transform: translate3d(100%, 0, 0) scale(.7); }
251 30%, 40% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
252 100% { -moz-transform: translate3d(0, 0, 0) scale(1); }
259 -webkit-transform-origin: 50% 50%;
260 -moz-transform-origin: 50% 50%;
264 -webkit-transform: scale(1);
265 -moz-transform: scale(1);
267 -webkit-animation-name: popin;
268 -moz-animation-name: popin;
269 -webkit-animation-duration: 350ms;
270 -moz-animation-duration: 350ms;
274 -webkit-animation-name: fadeout;
275 -moz-animation-name: fadeout;
277 -webkit-animation-duration: 100ms;
278 -moz-animation-duration: 100ms;
282 -webkit-animation-name: fadein;
283 -moz-animation-name: fadein;
287 -webkit-transform: scale(.8);
288 -moz-transform: scale(.8);
289 -webkit-animation-name: popout;
290 -moz-animation-name: popout;
293 @-webkit-keyframes popin {
295 -webkit-transform: scale(.8);
299 -webkit-transform: scale(1);
304 @-moz-keyframes popin {
306 -moz-transform: scale(.8);
310 -moz-transform: scale(1);
315 @-webkit-keyframes popout {
317 -webkit-transform: scale(1);
321 -webkit-transform: scale(.8);
326 @-moz-keyframes popout {
328 -moz-transform: scale(1);
332 -moz-transform: scale(.8);
340 /* keyframes for slidein from sides */
341 @-webkit-keyframes slideinfromright {
342 from { -webkit-transform: translate3d(100%, 0, 0); }
343 to { -webkit-transform: translate3d(0, 0, 0); }
345 @-moz-keyframes slideinfromright {
346 from { -moz-transform: translate3d(100%, 0, 0); }
347 to { -moz-transform: translate3d(0, 0, 0); }
350 @-webkit-keyframes slideinfromleft {
351 from { -webkit-transform: translate3d(-100%, 0, 0); }
352 to { -webkit-transform: translate3d(0, 0, 0); }
354 @-moz-keyframes slideinfromleft {
355 from { -moz-transform: translate3d(-100%, 0, 0); }
356 to { -moz-transform: translate3d(0, 0, 0); }
359 /* keyframes for slideout to sides */
360 @-webkit-keyframes slideouttoleft {
361 from { -webkit-transform: translate3d(0, 0, 0); }
362 to { -webkit-transform: translate3d(-100%, 0, 0); }
364 @-moz-keyframes slideouttoleft {
365 from { -moz-transform: translate3d(0, 0, 0); }
366 to { -moz-transform: translate3d(-100%, 0, 0); }
369 @-webkit-keyframes slideouttoright {
370 from { -webkit-transform: translate3d(0, 0, 0); }
371 to { -webkit-transform: translate3d(100%, 0, 0); }
373 @-moz-keyframes slideouttoright {
374 from { -moz-transform: translate3d(0, 0, 0); }
375 to { -moz-transform: translate3d(100%, 0, 0); }
378 .slide.out, .slide.in {
379 -webkit-animation-timing-function: ease-out;
380 -webkit-animation-duration: 350ms;
381 -moz-animation-timing-function: ease-out;
382 -moz-animation-duration: 350ms;
385 -webkit-transform: translate3d(-100%, 0, 0);
386 -webkit-animation-name: slideouttoleft;
387 -moz-transform: translate3d(-100%, 0, 0);
388 -moz-animation-name: slideouttoleft;
392 -webkit-transform: translate3d(0, 0, 0);
393 -webkit-animation-name: slideinfromright;
394 -moz-transform: translate3d(0, 0, 0);
395 -moz-animation-name: slideinfromright;
399 -webkit-transform: translate3d(100%, 0, 0);
400 -webkit-animation-name: slideouttoright;
401 -moz-transform: translate3d(100%, 0, 0);
402 -moz-animation-name: slideouttoright;
406 -webkit-transform: translate3d(0, 0, 0);
407 -webkit-animation-name: slideinfromleft;
408 -moz-transform: translate3d(0, 0, 0);
409 -moz-animation-name: slideinfromleft;
415 -webkit-animation-name: fadeout;
416 -moz-animation-name: fadeout;
417 -webkit-animation-duration: 100ms;
418 -moz-animation-duration: 100ms;
422 -webkit-transform: translate3d(0, 0, 0);
423 -webkit-animation-name: slideinfromtop;
424 -moz-transform: translate3d(0, 0, 0);
425 -moz-animation-name: slideinfromtop;
426 -webkit-animation-duration: 250ms;
427 -moz-animation-duration: 250ms;
430 .slidedown.in.reverse {
431 -webkit-animation-name: fadein;
432 -moz-animation-name: fadein;
433 -webkit-animation-duration: 150ms;
434 -moz-animation-duration: 150ms;
437 .slidedown.out.reverse {
438 -webkit-transform: translate3d(0, -100%, 0);
439 -moz-transform: translate3d(0, -100%, 0);
440 -webkit-animation-name: slideouttotop;
441 -moz-animation-name: slideouttotop;
442 -webkit-animation-duration: 200ms;
443 -moz-animation-duration: 200ms;
446 @-webkit-keyframes slideinfromtop {
447 from { -webkit-transform: translate3d(0, -100%, 0); }
448 to { -webkit-transform: translate3d(0, 0, 0); }
450 @-moz-keyframes slideinfromtop {
451 from { -moz-transform: translate3d(0, -100%, 0); }
452 to { -moz-transform: translate3d(0, 0, 0); }
455 @-webkit-keyframes slideouttotop {
456 from { -webkit-transform: translate3d(0, 0, 0); }
457 to { -webkit-transform: translate3d(0, -100%, 0); }
459 @-moz-keyframes slideouttotop {
460 from { -moz-transform: translate3d(0, 0, 0); }
461 to { -moz-transform: translate3d(0, -100%, 0); }
467 -webkit-animation-name: fadeout;
468 -moz-animation-name: fadeout;
469 -webkit-animation-duration: 100ms;
470 -moz-animation-duration: 100ms;
474 -webkit-transform: translate3d(0, 0, 0);
475 -webkit-animation-name: slideinfrombottom;
476 -moz-transform: translate3d(0, 0, 0);
477 -moz-animation-name: slideinfrombottom;
478 -webkit-animation-duration: 250ms;
479 -moz-animation-duration: 250ms;
482 .slideup.in.reverse {
483 -webkit-animation-name: fadein;
484 -moz-animation-name: fadein;
485 -webkit-animation-duration: 150ms;
486 -moz-animation-duration: 150ms;
489 .slideup.out.reverse {
490 -webkit-transform: translate3d(0, 100%, 0);
491 -moz-transform: translate3d(0, 100%, 0);
492 -webkit-animation-name: slideouttobottom;
493 -moz-animation-name: slideouttobottom;
494 -webkit-animation-duration: 200ms;
495 -moz-animation-duration: 200ms;
498 @-webkit-keyframes slideinfrombottom {
499 from { -webkit-transform: translate3d(0, 100%, 0); }
500 to { -webkit-transform: translate3d(0, 0, 0); }
502 @-moz-keyframes slideinfrombottom {
503 from { -moz-transform: translate3d(0, 100%, 0); }
504 to { -moz-transform: translate3d(0, 0, 0); }
507 @-webkit-keyframes slideouttobottom {
508 from { -webkit-transform: translate3d(0, 0, 0); }
509 to { -webkit-transform: translate3d(0, 100%, 0); }
511 @-moz-keyframes slideouttobottom {
512 from { -moz-transform: translate3d(0, 0, 0); }
513 to { -moz-transform: translate3d(0, 100%, 0); }
519 -webkit-transform: translate3d(-100%, 0, 0);
520 -webkit-animation-name: slideouttoleft;
521 -moz-transform: translate3d(-100%, 0, 0);
522 -moz-animation-name: slideouttoleft;
523 -webkit-animation-duration: 225ms;
524 -moz-animation-duration: 225ms;
528 -webkit-transform: translate3d(0, 0, 0);
529 -webkit-animation-name: fadein;
530 -moz-transform: translate3d(0, 0, 0);
531 -moz-animation-name: fadein;
532 -webkit-animation-duration: 200ms;
533 -moz-animation-duration: 200ms;
536 .slidefade.out.reverse {
537 -webkit-transform: translate3d(100%, 0, 0);
538 -webkit-animation-name: slideouttoright;
539 -moz-transform: translate3d(100%, 0, 0);
540 -moz-animation-name: slideouttoright;
541 -webkit-animation-duration: 200ms;
542 -moz-animation-duration: 200ms;
545 .slidefade.in.reverse {
546 -webkit-transform: translate3d(0, 0, 0);
547 -webkit-animation-name: fadein;
548 -moz-transform: translate3d(0, 0, 0);
549 -moz-animation-name: fadein;
550 -webkit-animation-duration: 200ms;
551 -moz-animation-duration: 200ms;
554 /* The properties in this rule are only necessary for the 'flip' transition.
555 * We need specify the perspective to create a projection matrix. This will add
556 * some depth as the element flips. The depth number represents the distance of
557 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
562 -webkit-perspective: 1000;
563 -moz-perspective: 1000;
567 -webkit-backface-visibility:hidden;
568 -webkit-transform:translate3d(0, 0, 0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
569 -webkit-transform-origin: 0;
570 -moz-backface-visibility:hidden;
571 -moz-transform:translate3d(0, 0, 0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
572 -moz-transform-origin: 0;
576 -webkit-transform: rotateY(-90deg) scale(.9);
577 -webkit-animation-name: flipouttoleft;
578 -moz-transform: rotateY(-90deg) scale(.9);
579 -moz-animation-name: flipouttoleft;
580 -webkit-animation-duration: 125ms;
581 -moz-animation-duration: 125ms;
585 -webkit-animation-name: flipintoright;
586 -moz-animation-name: flipintoright;
587 -webkit-animation-duration: 250ms;
588 -moz-animation-duration: 250ms;
592 -webkit-transform: rotateY(90deg) scale(.9);
593 -webkit-animation-name: flipouttoright;
594 -moz-transform: rotateY(90deg) scale(.9);
595 -moz-animation-name: flipouttoright;
599 -webkit-animation-name: flipintoleft;
600 -moz-animation-name: flipintoleft;
603 @-webkit-keyframes flipouttoleft {
604 from { -webkit-transform: rotateY(0); }
605 to { -webkit-transform: rotateY(-90deg) scale(.9); }
607 @-moz-keyframes flipouttoleft {
608 from { -moz-transform: rotateY(0); }
609 to { -moz-transform: rotateY(-90deg) scale(.9); }
611 @-webkit-keyframes flipouttoright {
612 from { -webkit-transform: rotateY(0) ; }
613 to { -webkit-transform: rotateY(90deg) scale(.9); }
615 @-moz-keyframes flipouttoright {
616 from { -moz-transform: rotateY(0); }
617 to { -moz-transform: rotateY(90deg) scale(.9); }
619 @-webkit-keyframes flipintoleft {
620 from { -webkit-transform: rotateY(-90deg) scale(.9); }
621 to { -webkit-transform: rotateY(0); }
623 @-moz-keyframes flipintoleft {
624 from { -moz-transform: rotateY(-90deg) scale(.9); }
625 to { -moz-transform: rotateY(0); }
627 @-webkit-keyframes flipintoright {
628 from { -webkit-transform: rotateY(90deg) scale(.9); }
629 to { -webkit-transform: rotateY(0); }
631 @-moz-keyframes flipintoright {
632 from { -moz-transform: rotateY(90deg) scale(.9); }
633 to { -moz-transform: rotateY(0); }
640 -webkit-transform-origin: 50% 50%;
641 -moz-transform-origin: 50% 50%;
645 -webkit-animation-name: depthout;
646 -moz-animation-name: depthout;
648 -webkit-animation-duration: 250ms;
649 -moz-animation-duration: 250ms;
650 -webkit-animation-timing-function: ease;
651 -moz-animation-timing-function: ease;
655 -webkit-transform: scale(1);
656 -moz-transform: scale(1);
658 -webkit-animation-name: depthin;
659 -moz-animation-name: depthin;
660 -webkit-animation-duration: 350ms;
661 -moz-animation-duration: 350ms;
662 -webkit-animation-timing-function: ease;
663 -moz-animation-timing-function: ease;
667 -webkit-animation-name: depthinreverse;
668 -moz-animation-name: depthinreverse;
672 -webkit-transform: scale(.9);
673 -moz-transform: scale(.9);
674 -webkit-animation-name: depthoutreverse;
675 -moz-animation-name: depthoutreverse;
678 @-webkit-keyframes depthout {
680 -webkit-transform: scale(1);
684 -webkit-transform: scale(1.1);
689 @-moz-keyframes depthout {
691 -moz-transform: scale(1);
695 -moz-transform: scale(1.1);
700 @-webkit-keyframes depthin {
702 -webkit-transform: scale(.9);
706 -webkit-transform: scale(.9);
710 -webkit-transform: scale(1);
715 @-moz-keyframes depthin {
717 -moz-transform: scale(.9);
721 -moz-transform: scale(.9);
725 -moz-transform: scale(1);
730 @-webkit-keyframes depthinreverse {
732 -webkit-transform: scale(1.1);
736 -webkit-transform: scale(1.1);
740 -webkit-transform: scale(1);
745 @-moz-keyframes depthinreverse {
747 -moz-transform: scale(1.1);
751 -moz-transform: scale(1.1);
755 -moz-transform: scale(1);
760 @-webkit-keyframes depthoutreverse {
762 -webkit-transform: scale(1);
766 -webkit-transform: scale(.9);
771 @-moz-keyframes depthoutreverse {
773 -moz-transform: scale(1);
777 -moz-transform: scale(.9);