直接调用样式类即可：
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 }