css3 动画 示例

  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 }