1 | /* |
---|
2 | * jQuery Mobile Framework |
---|
3 | * Copyright (c) jQuery Project |
---|
4 | * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. |
---|
5 | */ |
---|
6 | .spin { |
---|
7 | -moz-transform: rotate(360deg); |
---|
8 | -moz-animation-name: spin; |
---|
9 | -moz-animation-duration: 1s; |
---|
10 | -moz-animation-iteration-count: infinite; |
---|
11 | } |
---|
12 | @-moz-keyframes spin { |
---|
13 | from {-moz-transform: rotate(0deg);} |
---|
14 | to {-moz-transform: rotate(360deg);} |
---|
15 | } |
---|
16 | |
---|
17 | /* |
---|
18 | Transitions from jQtouch (with small modifications): http://www.jqtouch.com/ |
---|
19 | Built by David Kaneda and maintained by Jonathan Stark. |
---|
20 | */ |
---|
21 | .in, .out.reverse { |
---|
22 | z-index: 10; |
---|
23 | } |
---|
24 | |
---|
25 | .out, .in.reverse { |
---|
26 | z-index: 0; |
---|
27 | } |
---|
28 | |
---|
29 | .slide.in { |
---|
30 | -moz-transform: translate(0,0); |
---|
31 | -moz-animation-name: slideinfromright; |
---|
32 | } |
---|
33 | |
---|
34 | .slide.out { |
---|
35 | -moz-transform: translate(-100%,0); |
---|
36 | -moz-animation-name: slideouttoleft; |
---|
37 | } |
---|
38 | |
---|
39 | .slide.in.reverse { |
---|
40 | -moz-transform: translate(0,0); |
---|
41 | -moz-animation-name: slideinfromleft; |
---|
42 | } |
---|
43 | |
---|
44 | .slide.out.reverse { |
---|
45 | -moz-transform: translate(100%,0); |
---|
46 | -moz-animation-name: slideouttoright; |
---|
47 | } |
---|
48 | |
---|
49 | .slideup.in { |
---|
50 | -moz-transform: translate(0,0); |
---|
51 | -moz-animation-name: slideinfrombottom; |
---|
52 | } |
---|
53 | |
---|
54 | .slideup.out { |
---|
55 | -moz-animation-name: dontmove; |
---|
56 | z-index: 0; |
---|
57 | } |
---|
58 | |
---|
59 | .slideup.out.reverse { |
---|
60 | -moz-transform: translate(0,100%); |
---|
61 | -moz-animation-name: slideouttobottom; |
---|
62 | } |
---|
63 | |
---|
64 | .slideup.in.reverse { |
---|
65 | -moz-animation-name: dontmove; |
---|
66 | } |
---|
67 | .slidedown.in { |
---|
68 | -moz-transform: translate(0,0); |
---|
69 | -moz-animation-name: slideinfromtop; |
---|
70 | } |
---|
71 | |
---|
72 | .slidedown.out { |
---|
73 | -moz-animation-name: dontmove; |
---|
74 | } |
---|
75 | |
---|
76 | .slidedown.out.reverse { |
---|
77 | -moz-transform: translate(0,-100%); |
---|
78 | -moz-animation-name: slideouttotop; |
---|
79 | } |
---|
80 | |
---|
81 | .slidedown.in.reverse { |
---|
82 | -moz-animation-name: dontmove; |
---|
83 | } |
---|
84 | |
---|
85 | @-moz-keyframes slideinfromright { |
---|
86 | from { -moz-transform: translate(100%,0); } |
---|
87 | to { -moz-transform: translate(0,0); } |
---|
88 | } |
---|
89 | |
---|
90 | @-moz-keyframes slideinfromleft { |
---|
91 | from { -moz-transform: translate(-100%,0); } |
---|
92 | to { -moz-transform: translate(0,0); } |
---|
93 | } |
---|
94 | |
---|
95 | @-moz-keyframes slideouttoleft { |
---|
96 | from { -moz-transform: translate(0,0); } |
---|
97 | to { -moz-transform: translate(-100%,0); } |
---|
98 | } |
---|
99 | |
---|
100 | @-moz-keyframes slideouttoright { |
---|
101 | from { -moz-transform: translate(0,0); } |
---|
102 | to { -moz-transform: translate(100%,0); } |
---|
103 | } |
---|
104 | |
---|
105 | |
---|
106 | @-moz-keyframes slideinfromtop { |
---|
107 | from { -moz-transform: translate(0,-100%); } |
---|
108 | to { -moz-transform: translate(0,0); } |
---|
109 | } |
---|
110 | |
---|
111 | @-moz-keyframes slideinfrombottom { |
---|
112 | from { -moz-transform: translate(0,100%); } |
---|
113 | to { -moz-transform: translate(0,0); } |
---|
114 | } |
---|
115 | |
---|
116 | @-moz-keyframes slideouttobottom { |
---|
117 | from { -moz-transform: translate(0,0); } |
---|
118 | to { -moz-transform: translate(0,100%); } |
---|
119 | } |
---|
120 | |
---|
121 | @-moz-keyframes slideouttotop { |
---|
122 | from { -moz-transform: translate(0,0); } |
---|
123 | to { -moz-transform: translate(0,-100%); } |
---|
124 | } |
---|
125 | |
---|
126 | @-moz-keyframes fadein { |
---|
127 | from { opacity: 0; } |
---|
128 | to { opacity: 1; } |
---|
129 | } |
---|
130 | |
---|
131 | @-moz-keyframes fadeout { |
---|
132 | from { opacity: 1; } |
---|
133 | to { opacity: 0; } |
---|
134 | } |
---|
135 | |
---|
136 | .fade.in { |
---|
137 | opacity: 1; |
---|
138 | -moz-animation-name: fadein; |
---|
139 | } |
---|
140 | .fade.out { |
---|
141 | -moz-animation-name: fadeout; |
---|
142 | } |
---|
143 | |
---|
144 | /* The properties in this body rule are only necessary for the 'flip' transition. |
---|
145 | * We need specify the perspective to create a projection matrix. This will add |
---|
146 | * some depth as the element flips. The depth number represents the distance of |
---|
147 | * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate |
---|
148 | * value. |
---|
149 | */ |
---|
150 | .ui-mobile-viewport-perspective { |
---|
151 | -moz-perspective: 1000; |
---|
152 | position: absolute; |
---|
153 | } |
---|
154 | |
---|
155 | .ui-mobile-viewport-transitioning, |
---|
156 | .ui-mobile-viewport-transitioning .ui-page { |
---|
157 | width: 100%; |
---|
158 | height: 100%; |
---|
159 | overflow: hidden; |
---|
160 | } |
---|
161 | |
---|
162 | .flip { |
---|
163 | -moz-animation-duration: .65s; |
---|
164 | -moz-backface-visibility:hidden; |
---|
165 | } |
---|
166 | |
---|
167 | .flip.in { |
---|
168 | -moz-transform: rotateY(0) scale(1); |
---|
169 | -moz-animation-name: flipinfromleft; |
---|
170 | } |
---|
171 | |
---|
172 | .flip.out { |
---|
173 | -moz-transform: rotateY(-180deg) scale(.8); |
---|
174 | -moz-animation-name: flipouttoleft; |
---|
175 | } |
---|
176 | |
---|
177 | /* Shake it all about */ |
---|
178 | |
---|
179 | .flip.in.reverse { |
---|
180 | -moz-transform: rotateY(0) scale(1); |
---|
181 | -moz-animation-name: flipinfromright; |
---|
182 | } |
---|
183 | |
---|
184 | .flip.out.reverse { |
---|
185 | -moz-transform: rotateY(180deg) scale(.8); |
---|
186 | -moz-animation-name: flipouttoright; |
---|
187 | } |
---|
188 | |
---|
189 | @-moz-keyframes flipinfromright { |
---|
190 | from { -moz-transform: rotateY(-180deg) scale(.8); } |
---|
191 | to { -moz-transform: rotateY(0) scale(1); } |
---|
192 | } |
---|
193 | |
---|
194 | @-moz-keyframes flipinfromleft { |
---|
195 | from { -moz-transform: rotateY(180deg) scale(.8); } |
---|
196 | to { -moz-transform: rotateY(0) scale(1); } |
---|
197 | } |
---|
198 | |
---|
199 | @-moz-keyframes flipouttoleft { |
---|
200 | from { -moz-transform: rotateY(0) scale(1); } |
---|
201 | to { -moz-transform: rotateY(-180deg) scale(.8); } |
---|
202 | } |
---|
203 | |
---|
204 | @-moz-keyframes flipouttoright { |
---|
205 | from { -moz-transform: rotateY(0) scale(1); } |
---|
206 | to { -moz-transform: rotateY(180deg) scale(.8); } |
---|
207 | } |
---|
208 | |
---|
209 | |
---|
210 | /* Hackish, but reliable. */ |
---|
211 | |
---|
212 | @-moz-keyframes dontmove { |
---|
213 | from { opacity: 1; } |
---|
214 | to { opacity: 1; } |
---|
215 | } |
---|
216 | |
---|
217 | .pop { |
---|
218 | -moz-transform-origin: 50% 50%; |
---|
219 | } |
---|
220 | |
---|
221 | .pop.in { |
---|
222 | -moz-transform: scale(1); |
---|
223 | -moz-animation-name: popin; |
---|
224 | z-index: 10; |
---|
225 | } |
---|
226 | |
---|
227 | .pop.out.reverse { |
---|
228 | -moz-transform: scale(.2); |
---|
229 | -moz-animation-name: popout; |
---|
230 | z-index: 10; |
---|
231 | } |
---|
232 | |
---|
233 | .pop.in.reverse { |
---|
234 | z-index: 0; |
---|
235 | -moz-animation-name: dontmove; |
---|
236 | } |
---|
237 | |
---|
238 | @-moz-keyframes popin { |
---|
239 | from { |
---|
240 | -moz-transform: scale(.2); |
---|
241 | } |
---|
242 | to { |
---|
243 | -moz-transform: scale(1); |
---|
244 | } |
---|
245 | } |
---|
246 | |
---|
247 | @-moz-keyframes popout { |
---|
248 | from { |
---|
249 | -moz-transform: scale(1); |
---|
250 | } |
---|
251 | to { |
---|
252 | -moz-transform: scale(.2); |
---|
253 | } |
---|
254 | } |
---|
255 | |
---|
256 | |
---|
257 | .slide.in.fade { |
---|
258 | -moz-animation-name: slideinfromright, fadein; |
---|
259 | } |
---|
260 | |
---|
261 | .slide.out.fade { |
---|
262 | -moz-animation-name: slideinfromright, fadeout; |
---|
263 | } |
---|
264 | |
---|
265 | .pop.fade.in { |
---|
266 | -moz-animation-name: popin, fadein; |
---|
267 | } |
---|
268 | |
---|
269 | .pop.fade.out { |
---|
270 | -moz-animation-name: popout, fadeout; |
---|
271 | } |
---|