2 -webkit-transform: rotate(360deg);
3 -webkit-animation-name: spin;
4 -webkit-animation-duration: 1s;
5 -webkit-animation-iteration-count: infinite;
6 -webkit-animation-timing-function: linear;
8 @-webkit-keyframes spin {
9 from {-webkit-transform: rotate(0deg);}
10 to {-webkit-transform: rotate(360deg);}
13 /* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/
14 Built by David Kaneda and maintained by Jonathan Stark.
17 -webkit-animation-timing-function: ease-in-out;
18 -webkit-animation-duration: 350ms;
23 -webkit-transform: translateX(-100%);
24 -webkit-animation-name: slideouttoleft;
28 -webkit-transform: translateX(0);
29 -webkit-animation-name: slideinfromright;
33 -webkit-transform: translateX(100%);
34 -webkit-animation-name: slideouttoright;
38 -webkit-transform: translateX(0);
39 -webkit-animation-name: slideinfromleft;
43 -webkit-animation-name: dontmove;
48 -webkit-transform: translateY(0);
49 -webkit-animation-name: slideinfrombottom;
55 -webkit-animation-name: dontmove;
58 .slideup.out.reverse {
59 -webkit-transform: translateY(100%);
61 -webkit-animation-name: slideouttobottom;
65 -webkit-animation-name: dontmove;
70 -webkit-transform: translateY(0);
71 -webkit-animation-name: slideinfromtop;
75 .slidedown.in.reverse {
77 -webkit-animation-name: dontmove;
80 .slidedown.out.reverse {
81 -webkit-transform: translateY(-100%);
83 -webkit-animation-name: slideouttotop;
86 @-webkit-keyframes slideinfromright {
87 from { -webkit-transform: translateX(100%); }
88 to { -webkit-transform: translateX(0); }
91 @-webkit-keyframes slideinfromleft {
92 from { -webkit-transform: translateX(-100%); }
93 to { -webkit-transform: translateX(0); }
96 @-webkit-keyframes slideouttoleft {
97 from { -webkit-transform: translateX(0); }
98 to { -webkit-transform: translateX(-100%); }
101 @-webkit-keyframes slideouttoright {
102 from { -webkit-transform: translateX(0); }
103 to { -webkit-transform: translateX(100%); }
106 @-webkit-keyframes slideinfromtop {
107 from { -webkit-transform: translateY(-100%); }
108 to { -webkit-transform: translateY(0); }
111 @-webkit-keyframes slideinfrombottom {
112 from { -webkit-transform: translateY(100%); }
113 to { -webkit-transform: translateY(0); }
116 @-webkit-keyframes slideouttobottom {
117 from { -webkit-transform: translateY(0); }
118 to { -webkit-transform: translateY(100%); }
121 @-webkit-keyframes slideouttotop {
122 from { -webkit-transform: translateY(0); }
123 to { -webkit-transform: translateY(-100%); }
125 @-webkit-keyframes fadein {
130 @-webkit-keyframes fadeout {
137 -webkit-animation-name: fadeout;
143 -webkit-animation-name: fadein;
146 /* The properties in this rule are only necessary for the 'flip' transition.
147 * We need specify the perspective to create a projection matrix. This will add
148 * some depth as the element flips. The depth number represents the distance of
149 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
153 -webkit-perspective: 1000;
157 .ui-mobile-viewport-transitioning,
158 .ui-mobile-viewport-transitioning .ui-page {
165 -webkit-animation-duration: .65s;
166 -webkit-backface-visibility:hidden;
167 -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. */
171 -webkit-transform: rotateY(-180deg) scale(.8);
172 -webkit-animation-name: flipouttoleft;
176 -webkit-transform: rotateY(0) scale(1);
177 -webkit-animation-name: flipinfromleft;
180 /* Shake it all about */
183 -webkit-transform: rotateY(180deg) scale(.8);
184 -webkit-animation-name: flipouttoright;
188 -webkit-transform: rotateY(0) scale(1);
189 -webkit-animation-name: flipinfromright;
192 @-webkit-keyframes flipinfromright {
193 from { -webkit-transform: rotateY(-180deg) scale(.8); }
194 to { -webkit-transform: rotateY(0) scale(1); }
197 @-webkit-keyframes flipinfromleft {
198 from { -webkit-transform: rotateY(180deg) scale(.8); }
199 to { -webkit-transform: rotateY(0) scale(1); }
202 @-webkit-keyframes flipouttoleft {
203 from { -webkit-transform: rotateY(0) scale(1); }
204 to { -webkit-transform: rotateY(-180deg) scale(.8); }
207 @-webkit-keyframes flipouttoright {
208 from { -webkit-transform: rotateY(0) scale(1); }
209 to { -webkit-transform: rotateY(180deg) scale(.8); }
213 /* Hackish, but reliable. */
215 @-webkit-keyframes dontmove {
221 -webkit-transform-origin: 50% 50%;
225 -webkit-transform: scale(1);
227 -webkit-animation-name: popin;
233 -webkit-animation-name: dontmove;
237 -webkit-transform: scale(.2);
239 -webkit-animation-name: popout;
243 @-webkit-keyframes popin {
245 -webkit-transform: scale(.2);
249 -webkit-transform: scale(1);
254 @-webkit-keyframes popout {
256 -webkit-transform: scale(1);
260 -webkit-transform: scale(.2);