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 }