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