1 /* animation */
2 .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}
3 .a-fadein,.a-fadeinT,.a-fadeinR,.a-fadeinB,.a-fadeinL,.a-bouncein,.a-bounceinT,.a-bounceinR,.a-bounceinB,.a-bounceinL,.a-rotatein,.a-rotateinLT,.a-rotateinLB,.a-rotateinRT,.a-rotateinRB,.a-flipin,.a-flipinX,.a-flipinY{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards;}
4 .a-fadeout,.a-fadeoutT,.a-fadeoutR,.a-fadeoutB,.a-fadeoutL,.a-bounceout,.a-bounceoutT,.a-bounceoutR,.a-bounceoutB,.a-bounceoutL,.a-rotateout,.a-rotateoutLT,.a-rotateoutLB,.a-rotateoutRT,.a-rotateoutRB,.a-flipout,.a-flipoutX,.a-flipoutY{-webkit-animation:1s ease-in forwards;-moz-animation:1s ease-in forwards;-ms-animation:1s ease-in forwards;animation:1s ease-in forwards;}
5 /* 淡入 */
6 .a-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein;}
7 /* 淡入-从上 */
8 .a-fadeinT{-webkit-animation-name:fadeinT;-moz-animation-name:fadeinT;-ms-animation-name:fadeinT;animation-name:fadeinT;}
9 /* 淡入-从右 */
10 .a-fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR;}
11 /* 淡入-从下 */
12 .a-fadeinB{-webkit-animation-name:fadeinB;-moz-animation-name:fadeinB;-ms-animation-name:fadeinB;animation-name:fadeinB;}
13 /* 淡入-从左 */
14 .a-fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL;}
15 /* 淡出 */
16 .a-fadeout{-webkit-animation-name:fadeout;-moz-animation-name:fadeout;-ms-animation-name:fadeout;animation-name:fadeout;}
17 /* 淡出-向上 */
18 .a-fadeoutT{-webkit-animation-name:fadeoutT;-moz-animation-name:fadeoutT;-ms-animation-name:fadeoutT;animation-name:fadeoutT;}
19 /* 淡出-向右 */
20 .a-fadeoutR{-webkit-animation-name:fadeoutR;-moz-animation-name:fadeoutR;-ms-animation-name:fadeoutR;animation-name:fadeoutR;}
21 /* 淡出-向下 */
22 .a-fadeoutB{-webkit-animation-name:fadeoutB;-moz-animation-name:fadeoutB;-ms-animation-name:fadeoutB;animation-name:fadeoutB;}
23 /* 淡出-向左 */
24 .a-fadeoutL{-webkit-animation-name:fadeoutL;-moz-animation-name:fadeoutL;-ms-animation-name:fadeoutL;animation-name:fadeoutL;}
25 /* 弹跳 */
26 .a-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce;}
27 /* 弹入 */
28 .a-bouncein{-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein;}
29 /* 弹入-从上 */
30 .a-bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT;}
31 /* 弹入-从右 */
32 .a-bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR;}
33 /* 弹入-从下 */
34 .a-bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB;}
35 /* 弹入-从左 */
36 .a-bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL;}
37 /* 弹出 */
38 .a-bounceout{-webkit-animation-name:bounceout;-moz-animation-name:bounceout;-ms-animation-name:bounceout;animation-name:bounceout;}
39 /* 弹出-向上 */
40 .a-bounceoutT{-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT;}
41 /* 弹出-向右 */
42 .a-bounceoutR{-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR;}
43 /* 弹出-向下 */
44 .a-bounceoutB{-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB;}
45 /* 弹出-向左 */
46 .a-bounceoutL{-webkit-animation-name:bounceoutL;-moz-animation-name:bounceoutL;-ms-animation-name:bounceoutL;animation-name:bounceoutL;}
47 /* 转入 */
48 .a-rotatein{-webkit-animation-name:rotatein;-moz-animation-name:rotatein;-ms-animation-name:rotatein;animation-name:rotatein;}
49 /* 转入-从左上 */
50 .a-rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT;}
51 /* 转入-从左下 */
52 .a-rotateinLB{-webkit-animation-name:rotateinLB;-moz-animation-name:rotateinLB;-ms-animation-name:rotateinLB;animation-name:rotateinLB;}
53 /* 转入-从右上 */
54 .a-rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT;}
55 /* 转入-从右下*/
56 .a-rotateinRB{-webkit-animation-name:rotateinRB;-moz-animation-name:rotateinRB;-ms-animation-name:rotateinRB;animation-name:rotateinRB;}
57 /* 转出 */
58 .a-rotateout{-webkit-animation-name:rotateout;-moz-animation-name:rotateout;-ms-animation-name:rotateout;animation-name:rotateout;}
59 /* 转出-向左上 */
60 .a-rotateoutLT{-webkit-animation-name:rotateoutLT;-moz-animation-name:rotateoutLT;-ms-animation-name:rotateoutLT;animation-name:rotateoutLT;}
61 /* 转出-向左下 */
62 .a-rotateoutLB{-webkit-animation-name:rotateoutLB;-moz-animation-name:rotateoutLB;-ms-animation-name:rotateoutLB;animation-name:rotateoutLB;}
63 /* 转出-向右上 */
64 .a-rotateoutRT{-webkit-animation-name:rotateoutRT;-moz-animation-name:rotateoutRT;-ms-animation-name:rotateoutRT;animation-name:rotateoutRT;}
65 /* 转出-向右下 */
66 .a-rotateoutRB{-webkit-animation-name:rotateoutRB;-moz-animation-name:rotateoutRB;-ms-animation-name:rotateoutRB;animation-name:rotateoutRB;}
67 /* 翻转 */
68 .a-flip{-webkit-animation-name:flip;-moz-animation-name:flip;-ms-animation-name:flip;animation-name:flip;}
69 /* 翻入-X轴 */
70 .a-flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX;}
71 /* 翻入-Y轴 */
72 .a-flipin,.a-flipinY{-webkit-animation-name:flipinY;-moz-animation-name:flipinY;-ms-animation-name:flipinY;animation-name:flipinY;}
73 /* 翻出-X轴 */
74 .a-flipoutX{-webkit-animation-name:flipoutX;-moz-animation-name:flipoutX;-ms-animation-name:flipoutX;animation-name:flipoutX;}
75 /* 翻出-Y轴 */
76 .a-flipout,.a-flipoutY{-webkit-animation-name:flipoutY;-moz-animation-name:flipoutY;-ms-animation-name:flipoutY;animation-name:flipoutY;}
77 /* 闪烁 */
78 .a-flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;animation-name:flash;}
79 /* 震颤 */
80 .a-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;animation-name:shake;}
81 /* 摇摆 */
82 .a-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing;}
83 /* 摇晃 */
84 .a-wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;animation-name:wobble;}
85 /* 震铃 */
86 .a-ring{-webkit-animation-name:ring;-moz-animation-name:ring;-ms-animation-name:ring;animation-name:ring;}
87 /* define */
88 /* 淡入 */
89 @-webkit-keyframes fadein{
90 0%{opacity:0;}
91 100%{opacity:1;}
92 }
93 @-moz-keyframes fadein{
94 0%{opacity:0;}
95 100%{opacity:1;}
96 }
97 @-ms-keyframes fadein{
98 0%{opacity:0;}
99 100%{opacity:1;}
100 }
101 @keyframes fadein{
102 0%{opacity:0;}
103 100%{opacity:1;}
104 }
105 /* 淡入-从上 */
106 @-webkit-keyframes fadeinT{
107 0%{opacity:0;-webkit-transform:translateY(-100px);}
108 100%{opacity:1;-webkit-transform:translateY(0);}
109 }
110 @-moz-keyframes fadeinT{
111 0%{opacity:0;-moz-transform:translateY(-100px);}
112 100%{opacity:1;-moz-transform:translateY(0);}
113 }
114 @-ms-keyframes fadeinT{
115 0%{opacity:0;-ms-transform:translateY(-100px);}
116 100%{opacity:1;-ms-transform:translateY(0);}
117 }
118 @keyframes fadeinT{
119 0%{opacity:0;transform:translateY(-100px);}
120 100%{opacity:1;transform:translateY(0);}
121 }
122 /* 淡入-从右 */
123 @-webkit-keyframes fadeinR{
124 0%{opacity:0;-webkit-transform:translateX(100px);}
125 100%{opacity:1;-webkit-transform:translateX(0);}
126 }
127 @-moz-keyframes fadeinR{
128 0%{opacity:0;-moz-transform:translateX(100px);}
129 100%{opacity:1;-moz-transform:translateX(0);}
130 }
131 @-ms-keyframes fadeinR{
132 0%{opacity:0;-ms-transform:translateX(100px);}
133 100%{opacity:1;-ms-transform:translateX(0);}
134 }
135 @keyframes fadeinR{
136 0%{opacity:0;transform:translateX(100px);}
137 100%{opacity:1;transform:translateX(0);}
138 }
139 /* 淡入-从下 */
140 @-webkit-keyframes fadeinB{
141 0%{opacity:0;-webkit-transform:translateY(100px);}
142 100%{opacity:1;-webkit-transform:translateY(0);}
143 }
144 @-moz-keyframes fadeinB{
145 0%{opacity:0;-moz-transform:translateY(100px);}
146 100%{opacity:1;-moz-transform:translateY(0);}
147 }
148 @-ms-keyframes fadeinB{
149 0%{opacity:0;-ms-transform:translateY(100px);}
150 100%{opacity:1;-ms-transform:translateY(0);}
151 }
152 @keyframes fadeinB{
153 0%{opacity:0;transform:translateY(100px);}
154 100%{opacity:1;transform:translateY(0);}
155 }
156 /* 淡入-从左 */
157 @-webkit-keyframes fadeinL{
158 0%{opacity:0;-webkit-transform:translateX(-100px);}
159 100%{opacity:1;-webkit-transform:translateX(0);}
160 }
161 @-moz-keyframes fadeinL{
162 0%{opacity:0;-moz-transform:translateX(-100px);}
163 100%{opacity:1;-moz-transform:translateX(0);}
164 }
165 @-ms-keyframes fadeinL{
166 0%{opacity:0;-ms-transform:translateX(-100px);}
167 100%{opacity:1;-ms-transform:translateX(0);}
168 }
169 @keyframes fadeinL{
170 0%{opacity:0;transform:translateX(-100px);}
171 100%{opacity:1;transform:translateX(0);}
172 }
173 /* 淡出 */
174 @-webkit-keyframes fadeout{
175 0%{opacity:1;}
176 100%{opacity:0;}
177 }
178 @-moz-keyframes fadeout{
179 0%{opacity:1;}
180 100%{opacity:0;}
181 }
182 @-ms-keyframes fadeout{
183 0%{opacity:1;}
184 100%{opacity:0;}
185 }
186 @keyframes fadeout{
187 0%{opacity:1;}
188 100%{opacity:0;}
189 }
190 /* 淡出-向上 */
191 @-webkit-keyframes fadeoutT{
192 0%{opacity:1;-webkit-transform:translateY(0);}
193 100%{opacity:0;-webkit-transform:translateY(-100px);}
194 }
195 @-moz-keyframes fadeoutT{
196 0%{opacity:1;-moz-transform:translateY(0);}
197 100%{opacity:0;-moz-transform:translateY(-100px);}
198 }
199 @-ms-keyframes fadeoutT{
200 0%{opacity:1;-ms-transform:translateY(0);}
201 100%{opacity:0;-ms-transform:translateY(-100px);}
202 }
203 @keyframes fadeoutT{
204 0%{opacity:1;transform:translateY(0);}
205 100%{opacity:0;transform:translateY(-100px);}
206 }
207 /* 淡出-向右 */
208 @-webkit-keyframes fadeoutR{
209 0%{opacity:1;-webkit-transform:translateX(0);}
210 100%{opacity:0;-webkit-transform:translateX(100px);}
211 }
212 @-moz-keyframes fadeoutR{
213 0%{opacity:1;-moz-transform:translateX(0);}
214 100%{opacity:0;-moz-transform:translateX(100px);}
215 }
216 @-ms-keyframes fadeoutR{
217 0%{opacity:1;-ms-transform:translateX(0);}
218 100%{opacity:0;-ms-transform:translateX(100px);}
219 }
220 @keyframes fadeoutR{
221 0%{opacity:1;transform:translateX(0);}
222 100%{opacity:0;transform:translateX(100px);}
223 }
224 /* 淡出-向下 */
225 @-webkit-keyframes fadeoutB{
226 0%{opacity:1;-webkit-transform:translateY(0);}
227 100%{opacity:0;-webkit-transform:translateY(100px);}
228 }
229 @-moz-keyframes fadeoutB{
230 0%{opacity:1;-moz-transform:translateY(0);}
231 100%{opacity:0;-moz-transform:translateY(100px);}
232 }
233 @-ms-keyframes fadeoutB{
234 0%{opacity:1;-ms-transform:translateY(0);}
235 100%{opacity:0;-ms-transform:translateY(100px);}
236 }
237 @keyframes fadeoutB{
238 0%{opacity:1;transform:translateY(0);}
239 100%{opacity:0;transform:translateY(100px);}
240 }
241 /* 淡出-向左 */
242 @-webkit-keyframes fadeoutL{
243 0%{opacity:1;-webkit-transform:translateX(0);}
244 100%{opacity:0;-webkit-transform:translateX(-100px);}
245 }
246 @-moz-keyframes fadeoutL{
247 0%{opacity:1;-moz-transform:translateX(0);}
248 100%{opacity:0;-moz-transform:translateX(-100px);}
249 }
250 @-ms-keyframes fadeoutL{
251 0%{opacity:1;-ms-transform:translateX(0);}
252 100%{opacity:0;-ms-transform:translateX(-100px);}
253 }
254 @keyframes fadeoutL{
255 0%{opacity:1;transform:translateX(0);}
256 100%{opacity:0;transform:translateX(-100px);}
257 }
258 /* 弹跳 */
259 @-webkit-keyframes bounce{
260 0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
261 40%{-webkit-transform:translateY(-30px);}
262 60%{-webkit-transform:translateY(-15px);}
263 }
264 @-moz-keyframes bounce{
265 0%,20%,50%,80%,100%{-moz-transform:translateY(0);}
266 40%{-moz-transform:translateY(-30px);}
267 60%{-moz-transform:translateY(-15px);}
268 }
269 @-ms-keyframes bounce{
270 0%,20%,50%,80%,100%{-ms-transform:translateY(0);}
271 40%{-ms-transform:translateY(-30px);}
272 60%{-ms-transform:translateY(-15px);}
273 }
274 @keyframes bounce{
275 0%,20%,50%,80%,100%{transform:translateY(0);}
276 40%{transform:translateY(-30px);}
277 60%{transform:translateY(-15px);}
278 }
279 /* 弹入 */
280 @-webkit-keyframes bouncein{
281 0%{opacity:0;-webkit-transform:scale(0.3);}
282 50%{opacity:1;-webkit-transform:scale(1.05);}
283 70%{-webkit-transform:scale(0.9);}
284 100%{-webkit-transform:scale(1);}
285 }
286 @-moz-keyframes bouncein{
287 0%{opacity:0;-moz-transform:scale(0.3);}
288 50%{opacity:1;-moz-transform:scale(1.05);}
289 70%{-moz-transform:scale(0.9);}
290 100%{-moz-transform:scale(1);}
291 }
292 @-ms-keyframes bouncein{
293 0%{opacity:0;-ms-transform:scale(0.3);}
294 50%{opacity:1;-ms-transform:scale(1.05);}
295 70%{-ms-transform:scale(0.9);}
296 100%{-ms-transform:scale(1);}
297 }
298 @keyframes bouncein{
299 0%{opacity:0;transform:scale(0.3);}
300 50%{opacity:1;transform:scale(1.05);}
301 70%{transform:scale(0.9);}
302 100%{transform:scale(1);}
303 }
304 /* 弹入-从上 */
305 @-webkit-keyframes bounceinT{
306 0%{opacity:0;-webkit-transform:translateY(-100px);}
307 60%{opacity:1;-webkit-transform:translateY(30px);}
308 80%{-webkit-transform:translateY(-10px);}
309 100%{-webkit-transform:translateY(0);}
310 }
311 @-moz-keyframes bounceinT{
312 0%{opacity:0;-moz-transform:translateY(-100px);}
313 60%{opacity:1;-moz-transform:translateY(30px);}
314 80%{-moz-transform:translateY(-10px);}
315 100%{-moz-transform:translateY(0);}
316 }
317 @-ms-keyframes bounceinT{
318 0%{opacity:0;-ms-transform:translateY(-100px);}
319 60%{opacity:1;-ms-transform:translateY(30px);}
320 80%{-ms-transform:translateY(-10px);}
321 100%{-ms-transform:translateY(0);}
322 }
323 @keyframes bounceinT{
324 0%{opacity:0;transform:translateY(-100px);}
325 60%{opacity:1;transform:translateY(30px);}
326 80%{transform:translateY(-10px);}
327 100%{transform:translateY(0);}
328 }
329 /* 弹入-从右 */
330 @-webkit-keyframes bounceinR{
331 0%{opacity:0;-webkit-transform:translateX(100px);}
332 60%{opacity:1;-webkit-transform:translateX(-30px);}
333 80%{-webkit-transform:translateX(10px);}
334 100%{-webkit-transform:translateX(0);}
335 }
336 @-moz-keyframes bounceinR{
337 0%{opacity:0;-moz-transform:translateX(100px);}
338 60%{opacity:1;-moz-transform:translateX(-30px);}
339 80%{-moz-transform:translateX(10px);}
340 100%{-moz-transform:translateX(0);}
341 }
342 @-ms-keyframes bounceinR{
343 0%{opacity:0;-ms-transform:translateX(100px);}
344 60%{opacity:1;-ms-transform:translateX(-30px);}
345 80%{-ms-transform:translateX(10px);}
346 100%{-ms-transform:translateX(0);}
347 }
348 @keyframes bounceinR{
349 0%{opacity:0;transform:translateX(100px);}
350 60%{opacity:1;transform:translateX(-30px);}
351 80%{transform:translateX(10px);}
352 100%{transform:translateX(0);}
353 }
354 /* 弹入-从下 */
355 @-webkit-keyframes bounceinB{
356 0%{opacity:0;-webkit-transform:translateY(100px);}
357 60%{opacity:1;-webkit-transform:translateY(-30px);}
358 80%{-webkit-transform:translateY(10px);}
359 100%{-webkit-transform:translateY(0);}
360 }
361 @-moz-keyframes bounceinB{
362 0%{opacity:0;-moz-transform:translateY(100px);}
363 60%{opacity:1;-moz-transform:translateY(-30px);}
364 80%{-moz-transform:translateY(10px);}
365 100%{-moz-transform:translateY(0);}
366 }
367 @-ms-keyframes bounceinB{
368 0%{opacity:0;-ms-transform:translateY(100px);}
369 60%{opacity:1;-ms-transform:translateY(-30px);}
370 80%{-ms-transform:translateY(10px);}
371 100%{-ms-transform:translateY(0);}
372 }
373 @keyframes bounceinB{
374 0%{opacity:0;transform:translateY(100px);}
375 60%{opacity:1;transform:translateY(-30px);}
376 80%{transform:translateY(10px);}
377 100%{transform:translateY(0);}
378 }
379 /* 弹入-从左 */
380 @-webkit-keyframes bounceinL{
381 0%{opacity:0;-webkit-transform:translateX(-100px);}
382 60%{opacity:1;-webkit-transform:translateX(30px);}
383 80%{-webkit-transform:translateX(-10px);}
384 100%{-webkit-transform:translateX(0);}
385 }
386 @-moz-keyframes bounceinL{
387 0%{opacity:0;-moz-transform:translateX(-100px);}
388 60%{opacity:1;-moz-transform:translateX(30px);}
389 80%{-moz-transform:translateX(-10px);}
390 100%{-moz-transform:translateX(0);}
391 }
392 @-ms-keyframes bounceinL{
393 0%{opacity:0;-ms-transform:translateX(-100px);}
394 60%{opacity:1;-ms-transform:translateX(30px);}
395 80%{-ms-transform:translateX(-10px);}
396 100%{-ms-transform:translateX(0);}
397 }
398 @keyframes bounceinL{
399 0%{opacity:0;transform:translateX(-100px);}
400 60%{opacity:1;transform:translateX(30px);}
401 80%{transform:translateX(-10px);}
402 100%{transform:translateX(0);}
403 }
404 /* 弹出 */
405 @-webkit-keyframes bounceout{
406 0%{-webkit-transform:scale(1);}
407 25%{-webkit-transform:scale(0.95);}
408 50%{opacity:1;-webkit-transform:scale(1.1);}
409 100%{opacity:0;-webkit-transform:scale(0.3);}
410 }
411 @-moz-keyframes bounceout{
412 0%{-moz-transform:scale(1);}
413 25%{-moz-transform:scale(0.95);}
414 50%{opacity:1;-moz-transform:scale(1.1);}
415 100%{opacity:0;-moz-transform:scale(0.3);}
416 }
417 @-ms-keyframes bounceout{
418 0%{-ms-transform:scale(1);}
419 25%{-ms-transform:scale(0.95);}
420 50%{opacity:1;-ms-transform:scale(1.1);}
421 100%{opacity:0;-ms-transform:scale(0.3);}
422 }
423 @keyframes bounceout{
424 0%{transform:scale(1);}
425 25%{transform:scale(0.95);}
426 50%{opacity:1;transform:scale(1.1);}
427 100%{opacity:0;transform:scale(0.3);}
428 }
429 /* 弹出-向上*/
430 @-webkit-keyframes bounceoutT{
431 0%{-webkit-transform:translateY(0);}
432 20%{opacity:1;-webkit-transform:translateY(20px);}
433 100%{opacity:0;-webkit-transform:translateY(-100px);}
434 }
435 @-moz-keyframes bounceoutT{
436 0%{-moz-transform:translateY(0);}
437 20%{opacity:1;-moz-transform:translateY(20px);}
438 100%{opacity:0;-moz-transform:translateY(-100px);}
439 }
440 @-ms-keyframes bounceoutT{
441 0%{-ms-transform:translateY(0);}
442 20%{opacity:1;-ms-transform:translateY(20px);}
443 100%{opacity:0;-ms-transform:translateY(-100px);}
444 }
445 @keyframes bounceoutT{
446 0%{transform:translateY(0);}
447 20%{opacity:1;transform:translateY(20px);}
448 100%{opacity:0;transform:translateY(-100px);}
449 }
450 /* 弹出-向右*/
451 @-webkit-keyframes bounceoutR{
452 0%{-webkit-transform:translateX(0);}
453 20%{opacity:1;-webkit-transform:translateX(-20px);}
454 100%{opacity:0;-webkit-transform:translateX(100px);}
455 }
456 @-moz-keyframes bounceoutR{
457 0%{-moz-transform:translateX(0);}
458 20%{opacity:1;-moz-transform:translateX(-20px);}
459 100%{opacity:0;-moz-transform:translateX(100px);}
460 }
461 @-ms-keyframes bounceoutR{
462 0%{-ms-transform:translateX(0);}
463 20%{opacity:1;-ms-transform:translateX(-20px);}
464 100%{opacity:0;-ms-transform:translateX(100px);}
465 }
466 @keyframes bounceoutR{
467 0%{transform:translateX(0);}
468 20%{opacity:1;transform:translateX(-20px);}
469 100%{opacity:0;transform:translateX(100px);}
470 }
471 /* 弹出-向下 */
472 @-webkit-keyframes bounceoutB{
473 0%{-webkit-transform:translateY(0);}
474 20%{opacity:1;-webkit-transform:translateY(-20px);}
475 100%{opacity:0;-webkit-transform:translateY(100px);}
476 }
477 @-moz-keyframes bounceoutB{
478 0%{-moz-transform:translateY(0);}
479 20%{opacity:1;-moz-transform:translateY(-20px);}
480 100%{opacity:0;-moz-transform:translateY(100px);}
481 }
482 @-ms-keyframes bounceoutB{
483 0%{-ms-transform:translateY(0);}
484 20%{opacity:1;-ms-transform:translateY(-20px);}
485 100%{opacity:0;-ms-transform:translateY(100px);}
486 }
487 @keyframes bounceoutB{
488 0%{transform:translateY(0);}
489 20%{opacity:1;transform:translateY(-20px);}
490 100%{opacity:0;transform:translateY(100px);}
491 }
492 /* 弹出-向左 */
493 @-webkit-keyframes bounceoutL{
494 0%{-webkit-transform:translateX(0);}
495 20%{opacity:1;-webkit-transform:translateX(20px);}
496 100%{opacity:0;-webkit-transform:translateX(-100px);}
497 }
498 @-moz-keyframes bounceoutL{
499 0%{-moz-transform:translateX(0);}
500 20%{opacity:1;-moz-transform:translateX(20px);}
501 100%{opacity:0;-moz-transform:translateX(-100px);}
502 }
503 @-ms-keyframes bounceoutL{
504 0%{-ms-transform:translateX(0);}
505 20%{opacity:1;-ms-transform:translateX(20px);}
506 100%{opacity:0;-ms-transform:translateX(-100px);}
507 }
508 @keyframes bounceoutL{
509 0%{transform:translateX(0);}
510 20%{opacity:1;transform:translateX(20px);}
511 100%{opacity:0;transform:translateX(-200px);}
512 }
513 /* 转入 */
514 @-webkit-keyframes rotatein{
515 0%{opacity:0;-webkit-transform:rotate(-200deg);}
516 100%{opacity:1;-webkit-transform:rotate(0);}
517 }
518 @-moz-keyframes rotatein{
519 0%{opacity:0;-moz-transform:rotate(-200deg);}
520 100%{opacity:1;-moz-transform:rotate(0);}
521 }
522 @-ms-keyframes rotatein{
523 0%{opacity:0;-ms-transform:rotate(-200deg);}
524 100%{opacity:1;-ms-transform:rotate(0);}
525 }
526 @keyframes rotatein{
527 0%{opacity:0;transform:rotate(-200deg);}
528 100%{opacity:1;transform:rotate(0);}
529 }
530 /* 转入-从左上 */
531 @-webkit-keyframes rotateinLT{
532 0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}
533 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
534 }
535 @-moz-keyframes rotateinLT{
536 0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}
537 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
538 }
539 @-ms-keyframes rotateinLT{
540 0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;}
541 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
542 }
543 @keyframes rotateinLT{
544 0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
545 100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
546 }
547 /* 转入-从左下 */
548 @-webkit-keyframes rotateineftB{
549 0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
550 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
551 }
552 @-moz-keyframes rotateineftB{
553 0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}
554 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
555 }
556 @-ms-keyframes rotateineftB{
557 0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;}
558 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
559 }
560 @keyframes rotateineftB{
561 0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
562 100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
563 }
564 /* 转入-从右上 */
565 @-webkit-keyframes rotateinRT{
566 0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}
567 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
568 }
569 @-moz-keyframes rotateinRT{
570 0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}
571 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
572 }
573 @-ms-keyframes rotateinRT{
574 0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;}
575 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
576 }
577 @keyframes rotateinRT{
578 0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
579 100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
580 }
581 /* 转入-从右下*/
582 @-webkit-keyframes rotateinRB{
583 0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}
584 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
585 }
586 @-moz-keyframes rotateinRB{
587 0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}
588 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
589 }
590 @-ms-keyframes rotateinRB{
591 0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;}
592 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
593 }
594 @keyframes rotateinRB{
595 0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
596 100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
597 }
598 /* 转出 */
599 @-webkit-keyframes rotateout{
600 0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;}
601 100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0;}
602 }
603 @-moz-keyframes rotateout{
604 0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;}
605 100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0;}
606 }
607 @-ms-keyframes rotateout{
608 0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1;}
609 100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0;}
610 }
611 @keyframes rotateout{
612 0%{transform-origin:center center;transform:rotate(0);opacity:1;}
613 100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
614 }
615 /* 转出-向左上 */
616 @-webkit-keyframes rotateoutLT{
617 0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
618 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}
619 }
620 @-moz-keyframes rotateoutLT{
621 0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
622 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}
623 }
624 @-ms-keyframes rotateoutLT{
625 0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
626 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;}
627 }
628 @keyframes rotateoutLT{
629 0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
630 100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
631 }
632 /* 转出-向左下 */
633 @-webkit-keyframes rotateoutLB{
634 0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
635 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
636 }
637 @-moz-keyframes rotateoutLB{
638 0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
639 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}
640 }
641 @-ms-keyframes rotateoutLB{
642 0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
643 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;}
644 }
645 @keyframes rotateoutLB{
646 0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
647 100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
648 }
649 /* 转出-向右上 */
650 @-webkit-keyframes rotateoutRT{
651 0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
652 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}
653 }
654 @-moz-keyframes rotateoutRT{
655 0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
656 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}
657 }
658 @-ms-keyframes rotateoutRT{
659 0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
660 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;}
661 }
662 @keyframes rotateoutRT{
663 0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
664 100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
665 }
666 /* 转出-向右下 */
667 @-webkit-keyframes rotateoutBR{
668 0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
669 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}
670 }
671 @-moz-keyframes rotateoutBR{
672 0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
673 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}
674 }
675 @-ms-keyframes rotateoutBR{
676 0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
677 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;}
678 }
679 @keyframes rotateoutBR{
680 0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
681 100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
682 }
683 /* 翻转 */
684 @-webkit-keyframes flip{
685 0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;}
686 40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;}
687 50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;}
688 80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in;}
689 100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;}
690 }
691 @-moz-keyframes flip{
692 0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out;}
693 40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out;}
694 50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;}
695 80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in;}
696 100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;}
697 }
698 @-ms-keyframes flip{
699 0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out;}
700 40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out;}
701 50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in;}
702 80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in;}
703 100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in;}
704 }
705 @keyframes flip{
706 0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out;}
707 40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;}
708 50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;}
709 80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in;}
710 100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;}
711 }
712 /* 翻入-X轴 */
713 @-webkit-keyframes flipinX{
714 0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
715 40%{-webkit-transform:perspective(400px) rotateX(-10deg);}
716 70%{-webkit-transform:perspective(400px) rotateX(10deg);}
717 100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}
718 }
719 @-moz-keyframes flipinX{
720 0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
721 40%{-moz-transform:perspective(400px) rotateX(-10deg);}
722 70%{-moz-transform:perspective(400px) rotateX(10deg);}
723 100%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}
724 }
725 @-ms-keyframes flipinX{
726 0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
727 40%{-ms-transform:perspective(400px) rotateX(-10deg);}
728 70%{-ms-transform:perspective(400px) rotateX(10deg);}
729 100%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}
730 }
731 @keyframes flipinX{
732 0%{transform:perspective(400px) rotateX(90deg);opacity:0;}
733 40%{transform:perspective(400px) rotateX(-10deg);}
734 70%{transform:perspective(400px) rotateX(10deg);}
735 100%{transform:perspective(400px) rotateX(0);opacity:1;}
736 }
737 /* 翻入-Y轴 */
738 @-webkit-keyframes flipinY{
739 0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
740 40%{-webkit-transform:perspective(400px) rotateY(-10deg);}
741 70%{-webkit-transform:perspective(400px) rotateY(10deg);}
742 100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
743 }
744 @-moz-keyframes flipinY{
745 0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
746 40%{-moz-transform:perspective(400px) rotateY(-10deg);}
747 70%{-moz-transform:perspective(400px) rotateY(10deg);}
748 100%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
749 }
750 @-ms-keyframes flipinY{
751 0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
752 40%{-ms-transform:perspective(400px) rotateY(-10deg);}
753 70%{-ms-transform:perspective(400px) rotateY(10deg);}
754 100%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
755 }
756 @keyframes flipinY{
757 0%{transform:perspective(400px) rotateY(90deg);opacity:0;}
758 40%{transform:perspective(400px) rotateY(-10deg);}
759 70%{transform:perspective(400px) rotateY(10deg);}
760 100%{transform:perspective(400px) rotateY(0);opacity:1;}
761 }
762 /* 翻出-X轴 */
763 @-webkit-keyframes flipoutX{
764 0%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}
765 100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
766 }
767 @-moz-keyframes flipoutX{
768 0%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}
769 100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
770 }
771 @-ms-keyframes flipoutX{
772 0%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}
773 100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
774 }
775 @keyframes flipoutX{
776 0%{transform:perspective(400px) rotateX(0);opacity:1;}
777 100%{transform:perspective(400px) rotateX(90deg);opacity:0;}
778 }
779 /* 翻出-Y轴 */
780 @-webkit-keyframes flipoutY{
781 0%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
782 100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
783 }
784 @-moz-keyframes flipoutY{
785 0%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
786 100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
787 }
788 @-ms-keyframes flipoutY{
789 0%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
790 100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
791 }
792 @keyframes flipoutY{
793 0%{transform:perspective(400px) rotateY(0);opacity:1;}
794 100%{transform:perspective(400px) rotateY(90deg);opacity:0;}
795 }
796 /* 闪烁 */
797 @-webkit-keyframes flash{
798 0%,50%,100%{opacity:1;}
799 25%,75%{opacity:0;}
800 }
801 @-moz-keyframes flash{
802 0%,50%,100%{opacity:1;}
803 25%,75%{opacity:0;}
804 }
805 @-ms-keyframes flash{
806 0%,50%,100%{opacity:1;}
807 25%,75%{opacity:0;}
808 }
809 @keyframes flash{
810 0%,50%,100%{opacity:1;}
811 25%,75%{opacity:0;}
812 }
813 /* 震颤 */
814 @-webkit-keyframes shake{
815 0%,100%{-webkit-transform:translateX(0);}
816 10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}
817 20%,40%,60%,80%{-webkit-transform:translateX(10px);}
818 }
819 @-moz-keyframes shake{
820 0%,100%{-moz-transform:translateX(0);}
821 10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}
822 20%,40%,60%,80%{-moz-transform:translateX(10px);}
823 }
824 @-ms-keyframes shake{
825 0%,100%{-ms-transform:translateX(0);}
826 10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);}
827 20%,40%,60%,80%{-ms-transform:translateX(10px);}
828 }
829 @keyframes shake{
830 0%,100%{transform:translateX(0);}
831 10%,30%,50%,70%,90%{transform:translateX(-10px);}
832 20%,40%,60%,80%{transform:translateX(10px);}
833 }
834 /* 摇摆 */
835 @-webkit-keyframes swing{
836 20%{-webkit-transform:rotate(15deg);}
837 40%{-webkit-transform:rotate(-10deg);}
838 60%{-webkit-transform:rotate(5deg);}
839 80%{-webkit-transform:rotate(-5deg);}
840 100%{-webkit-transform:rotate(0);}
841 }
842 @-moz-keyframes swing{
843 20%{-moz-transform:rotate(15deg);}
844 40%{-moz-transform:rotate(-10deg);}
845 60%{-moz-transform:rotate(5deg);}
846 80%{-moz-transform:rotate(-5deg);}
847 100%{-moz-transform:rotate(0);}
848 }
849 @-ms-keyframes swing{
850 20%{-ms-transform:rotate(15deg);}
851 40%{-ms-transform:rotate(-10deg);}
852 60%{-ms-transform:rotate(5deg);}
853 80%{-ms-transform:rotate(-5deg);}
854 100%{-ms-transform:rotate(0);}
855 }
856 @keyframes swing{
857 20%{transform:rotate(15deg);}
858 40%{transform:rotate(-10deg);}
859 60%{transform:rotate(5deg);}
860 80%{transform:rotate(-5deg);}
861 100%{transform:rotate(0);}
862 }
863 /* 摇晃 */
864 @-webkit-keyframes wobble{
865 0%{-webkit-transform:translateX(0);}
866 15%{-webkit-transform:translateX(-100px) rotate(-5deg);}
867 30%{-webkit-transform:translateX(80px) rotate(3deg);}
868 45%{-webkit-transform:translateX(-65px) rotate(-3deg);}
869 60%{-webkit-transform:translateX(40px) rotate(2deg);}
870 75%{-webkit-transform:translateX(-20px) rotate(-1deg);}
871 100%{-webkit-transform:translateX(0);}
872 }
873 @-moz-keyframes wobble{
874 0%{-moz-transform:translateX(0);}
875 15%{-moz-transform:translateX(-100px) rotate(-5deg);}
876 30%{-moz-transform:translateX(80px) rotate(3deg);}
877 45%{-moz-transform:translateX(-65px) rotate(-3deg);}
878 60%{-moz-transform:translateX(40px) rotate(2deg);}
879 75%{-moz-transform:translateX(-20px) rotate(-1deg);}
880 100%{-moz-transform:translateX(0);}
881 }
882 @-ms-keyframes wobble{
883 0%{-ms-transform:translateX(0);}
884 15%{-ms-transform:translateX(-100px) rotate(-5deg);}
885 30%{-ms-transform:translateX(80px) rotate(3deg);}
886 45%{-ms-transform:translateX(-65px) rotate(-3deg);}
887 60%{-ms-transform:translateX(40px) rotate(2deg);}
888 75%{-ms-transform:translateX(-20px) rotate(-1deg);}
889 100%{-ms-transform:translateX(0);}
890 }
891 @keyframes wobble{
892 0%{transform:translateX(0);}
893 15%{transform:translateX(-100px) rotate(-5deg);}
894 30%{transform:translateX(80px) rotate(3deg);}
895 45%{transform:translateX(-65px) rotate(-3deg);}
896 60%{transform:translateX(40px) rotate(2deg);}
897 75%{transform:translateX(-20px) rotate(-1deg);}
898 100%{transform:translateX(0);}
899 }
900 /* 震铃 */
901 @-webkit-keyframes ring{
902 0%{-webkit-transform:scale(1);}
903 10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
904 30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);}
905 40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);}
906 100%{-webkit-transform:scale(1) rotate(0);}
907 }
908 @-moz-keyframes ring{
909 0%{-moz-transform:scale(1);}
910 10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
911 30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);}
912 40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}
913 100%{-moz-transform:scale(1) rotate(0);}
914 }
915 @-ms-keyframes ring{
916 0%{-ms-transform:scale(1);}
917 10%,20%{-ms-transform:scale(0.9) rotate(-3deg);}
918 30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);}
919 40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);}
920 100%{-ms-transform:scale(1) rotate(0);}
921 }
922 @keyframes ring{
923 0%{transform:scale(1);}
924 10%,20%{transform:scale(0.9) rotate(-3deg);}
925 30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}
926 40%,60%,80%{transform:scale(1.1) rotate(-3deg);}
927 100%{transform:scale(1) rotate(0);}
928 }
