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 }