2 * jQuery Mobile Framework
3 * Copyright (c) jQuery Project
4 * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
7 -webkit-transform: rotate(360deg);
8 -webkit-animation-name: spin;
9 -webkit-animation-duration: 1s;
10 -webkit-animation-iteration-count: infinite;
11 -webkit-animation-timing-function: linear;
13 @-webkit-keyframes spin {
14 from {-webkit-transform: rotate(0deg);}
15 to {-webkit-transform: rotate(360deg);}
18 /* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/
19 Built by David Kaneda and maintained by Jonathan Stark.
22 -webkit-animation-timing-function: ease-in-out;
23 -webkit-animation-duration: 350ms;
28 -webkit-transform: translateX(-100%);
29 -webkit-animation-name: slideouttoleft;
33 -webkit-transform: translateX(0);
34 -webkit-animation-name: slideinfromright;
38 -webkit-transform: translateX(100%);
39 -webkit-animation-name: slideouttoright;
43 -webkit-transform: translateX(0);
44 -webkit-animation-name: slideinfromleft;
48 -webkit-animation-name: dontmove;
53 -webkit-transform: translateY(0);
54 -webkit-animation-name: slideinfrombottom;
60 -webkit-animation-name: dontmove;
63 .slideup.out.reverse {
64 -webkit-transform: translateY(100%);
66 -webkit-animation-name: slideouttobottom;
70 -webkit-animation-name: dontmove;
75 -webkit-transform: translateY(0);
76 -webkit-animation-name: slideinfromtop;
80 .slidedown.in.reverse {
82 -webkit-animation-name: dontmove;
85 .slidedown.out.reverse {
86 -webkit-transform: translateY(-100%);
88 -webkit-animation-name: slideouttotop;
91 @-webkit-keyframes slideinfromright {
92 from { -webkit-transform: translateX(100%); }
93 to { -webkit-transform: translateX(0); }
96 @-webkit-keyframes slideinfromleft {
97 from { -webkit-transform: translateX(-100%); }
98 to { -webkit-transform: translateX(0); }
101 @-webkit-keyframes slideouttoleft {
102 from { -webkit-transform: translateX(0); }
103 to { -webkit-transform: translateX(-100%); }
106 @-webkit-keyframes slideouttoright {
107 from { -webkit-transform: translateX(0); }
108 to { -webkit-transform: translateX(100%); }
111 @-webkit-keyframes slideinfromtop {
112 from { -webkit-transform: translateY(-100%); }
113 to { -webkit-transform: translateY(0); }
116 @-webkit-keyframes slideinfrombottom {
117 from { -webkit-transform: translateY(100%); }
118 to { -webkit-transform: translateY(0); }
121 @-webkit-keyframes slideouttobottom {
122 from { -webkit-transform: translateY(0); }
123 to { -webkit-transform: translateY(100%); }
126 @-webkit-keyframes slideouttotop {
127 from { -webkit-transform: translateY(0); }
128 to { -webkit-transform: translateY(-100%); }
130 @-webkit-keyframes fadein {
135 @-webkit-keyframes fadeout {
142 -webkit-animation-name: fadeout;
148 -webkit-animation-name: fadein;
151 /* The properties in this rule are only necessary for the 'flip' transition.
152 * We need specify the perspective to create a projection matrix. This will add
153 * some depth as the element flips. The depth number represents the distance of
154 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
158 -webkit-perspective: 1000;
162 .ui-mobile-viewport-transitioning,
163 .ui-mobile-viewport-transitioning .ui-page {
170 -webkit-animation-duration: .65s;
171 -webkit-backface-visibility:hidden;
172 -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
176 -webkit-transform: rotateY(-180deg) scale(.8);
177 -webkit-animation-name: flipouttoleft;
181 -webkit-transform: rotateY(0) scale(1);
182 -webkit-animation-name: flipinfromleft;
185 /* Shake it all about */
188 -webkit-transform: rotateY(180deg) scale(.8);
189 -webkit-animation-name: flipouttoright;
193 -webkit-transform: rotateY(0) scale(1);
194 -webkit-animation-name: flipinfromright;
197 @-webkit-keyframes flipinfromright {
198 from { -webkit-transform: rotateY(-180deg) scale(.8); }
199 to { -webkit-transform: rotateY(0) scale(1); }
202 @-webkit-keyframes flipinfromleft {
203 from { -webkit-transform: rotateY(180deg) scale(.8); }
204 to { -webkit-transform: rotateY(0) scale(1); }
207 @-webkit-keyframes flipouttoleft {
208 from { -webkit-transform: rotateY(0) scale(1); }
209 to { -webkit-transform: rotateY(-180deg) scale(.8); }
212 @-webkit-keyframes flipouttoright {
213 from { -webkit-transform: rotateY(0) scale(1); }
214 to { -webkit-transform: rotateY(180deg) scale(.8); }
218 /* Hackish, but reliable. */
220 @-webkit-keyframes dontmove {
226 -webkit-transform-origin: 50% 50%;
230 -webkit-transform: scale(1);
232 -webkit-animation-name: popin;
238 -webkit-animation-name: dontmove;
242 -webkit-transform: scale(.2);
244 -webkit-animation-name: popout;
248 @-webkit-keyframes popin {
250 -webkit-transform: scale(.2);
254 -webkit-transform: scale(1);
259 @-webkit-keyframes popout {
261 -webkit-transform: scale(1);
265 -webkit-transform: scale(.2);