![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 .rotate { 2 -webkit-animation: rotating 1.2s linear infinite; 3 -moz-animation: rotating 1.2s linear infinite; 4 -o-animation: rotating 1.2s linear infinite; 5 animation: rotating 1.2s linear infinite 6 } 7 //rotating 旋转 8 @-webkit-keyframes rotating { 9 from { 10 -webkit-transform: rotate(0) 11 } 12 to { 13 -webkit-transform: rotate(360deg) 14 } 15 } 16 17 @keyframes rotating { 18 from { 19 transform: rotate(0) 20 } 21 to { 22 transform: rotate(360deg) 23 } 24 } 25 26 @-moz-keyframes rotating { 27 from { 28 -moz-transform: rotate(0) 29 } 30 to { 31 -moz-transform: rotate(360deg) 32 } 33 } 34 //右旋转90度 35 .rotateLeft{ 36 -webkit-animation-name: rotateLeft; 37 animation-name: rotateLeft; 38 } 39 @keyframes rotateLeft { 40 0%{ 41 opacity: 0; 42 transform-origin: 0% 0%; 43 transform: rotate(45deg); 44 } 45 100%{ 46 transform: rotate(0); 47 opacity: 1; 48 } 49 50 } 51 //swing 52 .swing{ 53 -webkit-transform-origin:top center; 54 -ms-transform-origin:top center; 55 transform-origin:top center; 56 -webkit-animation-name:swing; 57 animation-name:swing 58 } 59 @-webkit-keyframes swing{ 60 20%{ 61 -webkit-transform:rotate3d(0,0,1,15deg); 62 transform:rotate3d(0,0,1,15deg) 63 } 64 40%{ 65 -webkit-transform:rotate3d(0,0,1,-10deg); 66 transform:rotate3d(0,0,1,-10deg) 67 } 68 60%{ 69 -webkit-transform:rotate3d(0,0,1,5deg); 70 transform:rotate3d(0,0,1,5deg) 71 } 72 80%{ 73 -webkit-transform:rotate3d(0,0,1,-5deg); 74 transform:rotate3d(0,0,1,-5deg) 75 } 76 100%{ 77 -webkit-transform:rotate3d(0,0,1,0deg); 78 transform:rotate3d(0,0,1,0deg) 79 } 80 } 81 @keyframes swing{ 82 20%{ 83 -webkit-transform:rotate3d(0,0,1,15deg); 84 transform:rotate3d(0,0,1,15deg) 85 } 86 40%{ 87 -webkit-transform:rotate3d(0,0,1,-10deg); 88 transform:rotate3d(0,0,1,-10deg) 89 } 90 60%{ 91 -webkit-transform:rotate3d(0,0,1,5deg); 92 transform:rotate3d(0,0,1,5deg) 93 } 94 80%{ 95 -webkit-transform:rotate3d(0,0,1,-5deg); 96 transform:rotate3d(0,0,1,-5deg) 97 } 98 100%{ 99 -webkit-transform:rotate3d(0,0,1,0deg); 100 transform:rotate3d(0,0,1,0deg) 101 } 102 } 103 //tada 先放大再左右摆动 104 .tada{ 105 -webkit-animation-name:tada; 106 animation-name:tada 107 } 108 @-webkit-keyframes tada{ 109 0%{ 110 -webkit-transform:scale3d(1,1,1); 111 transform:scale3d(1,1,1) 112 } 113 10%,20%{ 114 -webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg); 115 transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg) 116 } 117 30%,50%,70%,90%{ 118 -webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)} 119 40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg); 120 transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg) 121 } 122 100%{ 123 -webkit-transform:scale3d(1,1,1); 124 transform:scale3d(1,1,1) 125 } 126 } 127 @keyframes tada{ 128 0%{ 129 -webkit-transform:scale3d(1,1,1); 130 transform:scale3d(1,1,1) 131 } 132 10%,20%{ 133 -webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg); 134 transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg) 135 } 136 30%,50%,70%,90%{ 137 -webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg); 138 transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg) 139 } 140 40%,60%,80%{ 141 -webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg); 142 transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg) 143 } 144 100%{ 145 -webkit-transform:scale3d(1,1,1); 146 transform:scale3d(1,1,1) 147 } 148 } 149 //模糊进入 再摆动 150 .vanishIn{ 151 -webkit-animation-name:vanishIn; 152 animation-name:vanishIn 153 } 154 155 @-webkit-keyframes vanishIn{ 156 0%{ 157 opacity:0; 158 -webkit-transform-origin:50% 50%; 159 -webkit-transform:scale(2,2); 160 -webkit-filter:blur(90px) 161 } 162 100%{ 163 opacity:1; 164 -webkit-transform-origin:50% 50%; 165 -webkit-transform:scale(1,1); 166 -webkit-filter:blur(0px) 167 } 168 } 169 @keyframes vanishIn{ 170 0%{ 171 opacity:0; 172 transform-origin:50% 50%; 173 transform:scale(2,2); 174 -webkit-filter:blur(90px) 175 } 176 100%{ 177 opacity:1; 178 transform-origin:50% 50%; 179 transform:scale(1,1); 180 -webkit-filter:blur(0px) 181 } 182 } 183 184 185 //twisterInUp 右边旋转进入 186 .twisterInUp{ 187 -webkit-animation-name:twisterInUp;animation-name:twisterInUp} 188 @-webkit-keyframes twisterInUp{ 189 0%{ 190 opacity:0; 191 -webkit-transform-origin:100% 0; 192 -webkit-transform:scale(0,0) rotate(360deg) translateY(100%) 193 } 194 30%{ 195 -webkit-transform-origin:100% 0; 196 -webkit-transform:scale(0,0) rotate(360deg) translateY(100%) 197 } 198 100%{ 199 opacity:1; 200 -webkit-transform-origin:0 0; 201 -webkit-transform:scale(1,1) rotate(0deg) translateY(0) 202 } 203 } 204 @keyframes twisterInUp{ 205 0%{ 206 opacity:0; 207 transform-origin:100% 0; 208 transform:scale(0,0) rotate(360deg) translateY(100%) 209 } 210 30%{ 211 transform-origin:100% 0; 212 transform:scale(0,0) rotate(360deg) translateY(100%) 213 } 214 100%{ 215 opacity:1; 216 transform-origin:0 0; 217 transform:scale(1,1) rotate(0deg) translateY(0) 218 } 219 } 220 //twisterInDown 右下方旋转至上 221 .twisterInDown{ 222 -webkit-animation-name:twisterInDown; 223 animation-name:twisterInDown 224 } 225 @-webkit-keyframes twisterInDown{ 226 0%{ 227 opacity:0; 228 -webkit-transform-origin:0 100%; 229 -webkit-transform:scale(0,0) rotate(360deg) translateY(-100%) 230 } 231 30%{ 232 -webkit-transform-origin:0 100%; 233 -webkit-transform:scale(0,0) rotate(360deg) translateY(-100%) 234 } 235 100%{ 236 opacity:1; 237 -webkit-transform-origin:100% 100%; 238 -webkit-transform:scale(1,1) rotate(0deg) translateY(0%) 239 } 240 } 241 @keyframes twisterInDown{ 242 0%{ 243 opacity:0; 244 transform-origin:0 100%; 245 transform:scale(0,0) rotate(360deg) translateY(-100%) 246 } 247 30%{ 248 transform-origin:0 100%; 249 transform:scale(0,0) rotate(360deg) translateY(-100%) 250 } 251 100%{ 252 opacity:1; 253 transform-origin:100% 100%; 254 transform:scale(1,1) rotate(0deg) translateY(0%) 255 } 256 } 257 258 //从左边旋转淡入 259 .rollIn{ 260 -webkit-animation-name:rollIn; 261 animation-name:rollIn 262 } 263 @-webkit-keyframes rollIn{ 264 0%{ 265 opacity:0; 266 -webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg); 267 transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg) 268 } 269 100%{ 270 opacity:1; 271 -webkit-transform:none; 272 transform:none 273 } 274 } 275 @keyframes rollIn{ 276 0%{ 277 opacity:0; 278 -webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg); 279 transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg) 280 } 281 100%{ 282 opacity:1; 283 -webkit-transform:none; 284 transform:none 285 } 286 } 287 //rollOut从右边旋转淡出 288 289 .rollOut{ 290 -webkit-animation-name:rollOut; 291 animation-name:rollOut 292 } 293 @-webkit-keyframes rollOut{ 294 0%{ 295 opacity:1 296 } 297 100%{ 298 opacity:0; 299 -webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg); 300 transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg) 301 } 302 } 303 @keyframes rollOut{ 304 0%{ 305 opacity:1 306 } 307 100%{ 308 opacity:0; 309 -webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg); 310 transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg) 311 } 312 } 313 314 //rotateIn 旋转360度 315 .rotateIn{ 316 -webkit-animation-name:rotateIn; 317 animation-name:rotateIn 318 } 319 320 321 @-webkit-keyframes rotateIn{ 322 from{ 323 -webkit-transform:rotate(0deg) 324 } 325 to{ 326 -webkit-transform:rotate(360deg) 327 } 328 } 329 @-moz-keyframes rotateIn{ 330 from{ 331 -moz-transform:rotate(0deg) 332 } 333 to{ 334 -moz-transform:rotate(359deg) 335 } 336 } 337 @-o-keyframes rotateIn{ 338 from{ 339 -o-transform:rotate(0deg) 340 } 341 to{ 342 -o-transform:rotate(359deg) 343 } 344 } 345 @keyframes rotateIn{ 346 from{ 347 transform:rotate(0deg) 348 } 349 to{ 350 transform:rotate(359deg) 351 } 352 } 353 //rubberBand 横向放大再缩小 354 .rubberBand{ 355 -webkit-animation-name:rubberBand; 356 animation-name:rubberBand 357 } 358 359 @-webkit-keyframes rubberBand{ 360 0%{ 361 -webkit-transform:scale3d(1,1,1); 362 transform:scale3d(1,1,1) 363 } 364 30%{ 365 -webkit-transform:scale3d(1.25,.75,1); 366 transform:scale3d(1.25,.75,1) 367 } 368 40%{ 369 -webkit-transform:scale3d(0.75,1.25,1); 370 transform:scale3d(0.75,1.25,1) 371 } 372 50%{ 373 -webkit-transform:scale3d(1.15,.85,1); 374 transform:scale3d(1.15,.85,1) 375 } 376 65%{ 377 -webkit-transform:scale3d(.95,1.05,1); 378 transform:scale3d(.95,1.05,1) 379 } 380 75%{ 381 -webkit-transform:scale3d(1.05,.95,1); 382 transform:scale3d(1.05,.95,1) 383 } 384 100%{ 385 -webkit-transform:scale3d(1,1,1); 386 transform:scale3d(1,1,1) 387 } 388 } 389 @keyframes rubberBand{ 390 0%{ 391 -webkit-transform:scale3d(1,1,1); 392 transform:scale3d(1,1,1) 393 } 394 30%{ 395 -webkit-transform:scale3d(1.25,.75,1); 396 transform:scale3d(1.25,.75,1) 397 } 398 40%{ 399 -webkit-transform:scale3d(0.75,1.25,1); 400 transform:scale3d(0.75,1.25,1) 401 } 402 50%{ 403 -webkit-transform:scale3d(1.15,.85,1); 404 transform:scale3d(1.15,.85,1) 405 } 406 65%{ 407 -webkit-transform:scale3d(.95,1.05,1); 408 transform:scale3d(.95,1.05,1) 409 } 410 75%{ 411 -webkit-transform:scale3d(1.05,.95,1); 412 transform:scale3d(1.05,.95,1) 413 } 414 100%{ 415 -webkit-transform:scale3d(1,1,1); 416 transform:scale3d(1,1,1) 417 } 418 } 419 420 //puffIn 缩小 421 @keyframes puffIn { 422 0% { 423 opacity: 0; 424 transform-origin: 50% 50%; 425 transform: scale(2, 2); 426 filter: blur(2px) 427 } 428 100% { 429 opacity: 1; 430 transform-origin: 50% 50%; 431 transform: scale(1, 1); 432 filter: none 433 } 434 } 435 436 .puffIn { 437 -webkit-animation-name: puffIn; 438 animation-name: puffIn; 439 } 440 //flash 闪现 441 @-webkit-keyframes flash { 442 0%, 100%, 50% { 443 opacity: 1 444 } 445 25%, 75% { 446 opacity: 0 447 } 448 } 449 450 @keyframes flash { 451 0%, 100%, 50% { 452 opacity: 1 453 } 454 25%, 75% { 455 opacity: 0 456 } 457 } 458 459 .flash { 460 -webkit-animation-name: flash; 461 animation-name: flash 462 } 463 //wobble 左右摇摆 464 @-webkit-keyframes wobble { 465 0%, 100% { 466 -webkit-transform: none; 467 transform: none 468 } 469 15% { 470 -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 471 transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) 472 } 473 30% { 474 -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 475 transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) 476 } 477 45% { 478 -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 479 transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) 480 } 481 60% { 482 -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 483 transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) 484 } 485 75% { 486 -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 487 transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) 488 } 489 } 490 491 @keyframes wobble { 492 0%, 100% { 493 -webkit-transform: none; 494 transform: none 495 } 496 15% { 497 -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 498 transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) 499 } 500 30% { 501 -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 502 transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) 503 } 504 45% { 505 -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 506 transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) 507 } 508 60% { 509 -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 510 transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) 511 } 512 75% { 513 -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 514 transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) 515 } 516 } 517 518 .wobble { 519 -webkit-animation-name: wobble; 520 animation-name: wobble 521 } 522 //向上fadeInUp 523 @-webkit-keyframes fadeInUp { 524 0% { 525 opacity: 0; 526 -webkit-transform: translate3d(0, 100%, 0); 527 transform: translate3d(0, 100%, 0) 528 } 529 100% { 530 opacity: 1; 531 -webkit-transform: none; 532 transform: none 533 } 534 } 535 536 @keyframes fadeInUp { 537 0% { 538 opacity: 0; 539 -webkit-transform: translate3d(0, 100%, 0); 540 -ms-transform: translate3d(0, 100%, 0); 541 transform: translate3d(0, 100%, 0) 542 } 543 100% { 544 opacity: 1; 545 -webkit-transform: none; 546 -ms-transform: none; 547 transform: none 548 } 549 } 550 551 .fadeInUp { 552 -webkit-animation-name: fadeInUp; 553 animation-name: fadeInUp 554 } 555 //fadeInDown 向下 556 @-webkit-keyframes fadeInDown { 557 0% { 558 opacity: 0; 559 -webkit-transform: translate3d(0, -100%, 0); 560 transform: translate3d(0, -100%, 0) 561 } 562 100% { 563 opacity: 1; 564 -webkit-transform: none; 565 transform: none 566 } 567 } 568 569 @keyframes fadeInDown { 570 0% { 571 opacity: 0; 572 -webkit-transform: translate3d(0, -100%, 0); 573 -ms-transform: translate3d(0, -100%, 0); 574 transform: translate3d(0, -100%, 0) 575 } 576 100% { 577 opacity: 1; 578 -webkit-transform: none; 579 -ms-transform: none; 580 transform: none 581 } 582 } 583 584 .fadeInDown { 585 -webkit-animation-name: fadeInDown; 586 animation-name: fadeInDown 587 } 588 //落下带有弹跳 589 590 //zoomIn 放大 591 @-webkit-keyframes zoomIn { 592 0% { 593 opacity: 0; 594 -webkit-transform: scale3d(.3, .3, .3); 595 transform: scale3d(.3, .3, .3) 596 } 597 50% { 598 opacity: 1 599 } 600 } 601 602 @keyframes zoomIn { 603 0% { 604 opacity: 0; 605 -webkit-transform: scale3d(.3, .3, .3); 606 transform: scale3d(.3, .3, .3) 607 } 608 50% { 609 opacity: 1 610 } 611 } 612 613 .zoomIn { 614 -webkit-animation-name: zoomIn; 615 animation-name: zoomIn 616 } 617 //循环放大 618 .zoomIns{ 619 -webkit-animation-name: zoomIns; 620 animation-name: zoomIns; 621 iteration-count:infinite; 622 } 623 @-webkit-keyframes zoomIns { 624 0% { 625 opacity: 1; 626 -webkit-transform: scale3d(.6, .6, .6); 627 transform: scale3d(.6, .6, .6) 628 629 } 630 100% { 631 opacity: 0.1; 632 633 } 634 } 635 @keyframes zoomIns { 636 0% { 637 opacity: 1; 638 -webkit-transform: scale3d(.6, .6, .6); 639 transform: scale3d(.6, .6, .6) 640 } 641 100% { 642 opacity: 0.1; 643 } 644 } 645 646 647 .flipInX, .flipInY { 648 -webkit-backface-visibility: visible !important; 649 -moz-backface-visibility: visible !important; 650 -ms-backface-visibility: visible !important; 651 } 652 //flipInY 淡入出现然后左右摇摆 653 @-webkit-keyframes flipInY { 654 0% { 655 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 656 transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 657 -webkit-animation-timing-function: ease-in; 658 animation-timing-function: ease-in; 659 opacity: 0 660 } 661 40% { 662 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 663 transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 664 -webkit-animation-timing-function: ease-in; 665 animation-timing-function: ease-in 666 } 667 60% { 668 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 669 transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 670 opacity: 1 671 } 672 80% { 673 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 674 transform: perspective(400px) rotate3d(0, 1, 0, -5deg) 675 } 676 100% { 677 -webkit-transform: perspective(400px); 678 transform: perspective(400px) 679 } 680 } 681 682 @keyframes flipInY { 683 0% { 684 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 685 transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 686 -webkit-animation-timing-function: ease-in; 687 animation-timing-function: ease-in; 688 opacity: 0 689 } 690 40% { 691 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 692 transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 693 -webkit-animation-timing-function: ease-in; 694 animation-timing-function: ease-in 695 } 696 60% { 697 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 698 transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 699 opacity: 1 700 } 701 80% { 702 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 703 transform: perspective(400px) rotate3d(0, 1, 0, -5deg) 704 } 705 100% { 706 -webkit-transform: perspective(400px); 707 transform: perspective(400px) 708 } 709 } 710 711 .flipInY { 712 backface-visibility: visible !important; 713 -webkit-animation-name: flipInY; 714 animation-name: flipInY 715 } 716 //fadeInRight 右进入 717 @-webkit-keyframes fadeInRight { 718 0% { 719 opacity: 0; 720 -webkit-transform: translate3d(100%, 0, 0); 721 transform: translate3d(100%, 0, 0) 722 } 723 100% { 724 opacity: 1; 725 transform: none 726 } 727 } 728 729 @keyframes fadeInRight { 730 0% { 731 opacity: 0; 732 -webkit-transform: translate3d(100%, 0, 0); 733 transform: translate3d(100%, 0, 0) 734 } 735 100% { 736 opacity: 1; 737 -webkit-transform: none; 738 transform: none 739 } 740 } 741 742 .fadeInRight { 743 -webkit-animation-name: fadeInRight; 744 animation-name: fadeInRight 745 } 746 //fadeInLeft 左出现 747 @-webkit-keyframes fadeInLeft { 748 0% { 749 opacity: 0; 750 -webkit-transform: translate3d(-100%, 0, 0); 751 transform: translate3d(-100%, 0, 0) 752 } 753 100% { 754 opacity: 1; 755 -webkit-transform: none; 756 transform: none 757 } 758 } 759 760 @keyframes fadeInLeft { 761 0% { 762 opacity: 0; 763 -webkit-transform: translate3d(-100%, 0, 0); 764 transform: translate3d(-100%, 0, 0) 765 } 766 100% { 767 opacity: 1; 768 -webkit-transform: none; 769 transform: none 770 } 771 } 772 773 .fadeInLeft { 774 -webkit-animation-name: fadeInLeft; 775 animation-name: fadeInLeft 776 } 777 //flipInX 淡入出现 上下摇摆 778 @-webkit-keyframes flipInX { 779 0% { 780 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 781 transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 782 -webkit-animation-timing-function: ease-in; 783 animation-timing-function: ease-in; 784 opacity: 0 785 } 786 40% { 787 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 788 transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 789 -webkit-animation-timing-function: ease-in; 790 animation-timing-function: ease-in 791 } 792 60% { 793 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 794 transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 795 opacity: 1 796 } 797 80% { 798 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 799 transform: perspective(400px) rotate3d(1, 0, 0, -5deg) 800 } 801 100% { 802 -webkit-transform: perspective(400px); 803 transform: perspective(400px) 804 } 805 } 806 807 @keyframes flipInX { 808 0% { 809 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 810 transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 811 -webkit-animation-timing-function: ease-in; 812 animation-timing-function: ease-in; 813 opacity: 0 814 } 815 40% { 816 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 817 transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 818 -webkit-animation-timing-function: ease-in; 819 animation-timing-function: ease-in 820 } 821 60% { 822 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 823 transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 824 opacity: 1 825 } 826 80% { 827 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 828 transform: perspective(400px) rotate3d(1, 0, 0, -5deg) 829 } 830 100% { 831 -webkit-transform: perspective(400px); 832 transform: perspective(400px) 833 } 834 } 835 836 .flipInX { 837 backface-visibility: visible !important; 838 -webkit-backface-visibility: visible !important; 839 -moz-backface-visibility: visible !important; 840 -ms-backface-visibility: visible !important; 841 -webkit-animation-name: flipInX; 842 animation-name: flipInX 843 } 844 //start 淡入进入 然后向上隐藏 845 @-webkit-keyframes start { 846 0%, 30% { 847 opacity: 0; 848 -webkit-transform: translate(0, 10px) 849 } 850 60% { 851 opacity: 1; 852 -webkit-transform: translate(0, 0) 853 } 854 100% { 855 opacity: 0; 856 -webkit-transform: translate(0, -8px) 857 } 858 } 859 860 @-moz-keyframes start { 861 0%, 30% { 862 opacity: 0; 863 -moz-transform: translate(0, 10px) 864 } 865 60% { 866 opacity: 1; 867 -moz-transform: translate(0, 0) 868 } 869 100% { 870 opacity: 0; 871 -moz-transform: translate(0, -8px) 872 } 873 } 874 875 @keyframes start { 876 0%, 30% { 877 opacity: 0; 878 transform: translate(0, 10px) 879 } 880 60% { 881 opacity: 1; 882 transform: translate(0, 0) 883 } 884 100% { 885 opacity: 0; 886 transform: translate(0, -8px) 887 } 888 } 889 //fadeIn 淡入 890 @-webkit-keyframes fadeIn { 891 0% { 892 opacity: 0 893 } 894 100% { 895 opacity: 1 896 } 897 } 898 899 @-o-keyframes fadeIn { 900 0% { 901 opacity: 0 902 } 903 100% { 904 opacity: 1 905 } 906 } 907 908 @keyframes fadeIn { 909 0% { 910 opacity: 0 911 } 912 100% { 913 opacity: 1 914 } 915 } 916 917 .fadeIn { 918 -webkit-animation-name: fadeIn; 919 animation-name: fadeIn 920 } 921 //bounceIn 弹入 922 .bounceIn { 923 -webkit-animation-name: bounceIn; 924 animation-name: bounceIn 925 } 926 @keyframes bounceIn { 927 0%, 100%, 20%, 40%, 60%, 80% { 928 -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); 929 transition-timing-function: cubic-bezier(.215, .61, .355, 1) 930 } 931 0% { 932 opacity: 0; 933 -webkit-transform: scale3d(.3, .3, .3); 934 transform: scale3d(.3, .3, .3) 935 } 936 20% { 937 -webkit-transform: scale3d(1.1, 1.1, 1.1); 938 transform: scale3d(1.1, 1.1, 1.1) 939 } 940 40% { 941 -webkit-transform: scale3d(.9, .9, .9); 942 transform: scale3d(.9, .9, .9) 943 } 944 60% { 945 opacity: 1; 946 -webkit-transform: scale3d(1.03, 1.03, 1.03); 947 transform: scale3d(1.03, 1.03, 1.03) 948 } 949 80% { 950 -webkit-transform: scale3d(.97, .97, .97); 951 transform: scale3d(.97, .97, .97) 952 } 953 100% { 954 opacity: 1; 955 -webkit-transform: scale3d(1, 1, 1); 956 transform: scale3d(1, 1, 1) 957 } 958 } 959 960 @-webkit-keyframes bounceIn { 961 0%, 100%, 20%, 40%, 60%, 80% { 962 -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); 963 transition-timing-function: cubic-bezier(.215, .61, .355, 1) 964 } 965 0% { 966 opacity: 0; 967 -webkit-transform: scale3d(.3, .3, .3); 968 transform: scale3d(.3, .3, .3) 969 } 970 20% { 971 -webkit-transform: scale3d(1.1, 1.1, 1.1); 972 transform: scale3d(1.1, 1.1, 1.1) 973 } 974 40% { 975 -webkit-transform: scale3d(.9, .9, .9); 976 transform: scale3d(.9, .9, .9) 977 } 978 60% { 979 opacity: 1; 980 -webkit-transform: scale3d(1.03, 1.03, 1.03); 981 transform: scale3d(1.03, 1.03, 1.03) 982 } 983 80% { 984 -webkit-transform: scale3d(.97, .97, .97); 985 transform: scale3d(.97, .97, .97) 986 } 987 100% { 988 opacity: 1; 989 -webkit-transform: scale3d(1, 1, 1); 990 transform: scale3d(1, 1, 1) 991 } 992 } 993 994 995 996 //落下的同时带有弹动的效果 997 .bounceInDown{ 998 -webkit-animation-name: bounceInDown; 999 animation-name: bounceInDown 1000 } 1001 @keyframes bounceInDown { 1002 0%,60%,75%,90%,100%{ 1003 -webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000); 1004 transition-timing-function:cubic-bezier(0.215,.610,.355,1.000); 1005 } 1006 0%{ 1007 opacity:0; 1008 -webkit-transform:translate3d(0,-3000px,0); 1009 transform:translate3d(0,-3000px,0) 1010 } 1011 60%{ 1012 opacity:1; 1013 -webkit-transform:translate3d(0,25px,0); 1014 transform:translate3d(0,25px,0) 1015 } 1016 75%{ 1017 -webkit-transform:translate3d(0,-10px,0); 1018 transform:translate3d(0,-10px,0) 1019 } 1020 90%{ 1021 -webkit-transform:translate3d(0,5px,0); 1022 transform:translate3d(0,5px,0) 1023 } 1024 100%{ 1025 -webkit-transform:none; 1026 transform:none 1027 } 1028 } 1029 @-webkit-keyframes bounceInDown { 1030 0%,60%,75%,90%,100%{ 1031 -webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000); 1032 transition-timing-function:cubic-bezier(0.215,.610,.355,1.000); 1033 } 1034 0%{ 1035 opacity:0; 1036 -webkit-transform:translate3d(0,-3000px,0); 1037 transform:translate3d(0,-3000px,0) 1038 } 1039 60%{ 1040 opacity:1; 1041 -webkit-transform:translate3d(0,25px,0); 1042 transform:translate3d(0,25px,0) 1043 } 1044 75%{ 1045 -webkit-transform:translate3d(0,-10px,0); 1046 transform:translate3d(0,-10px,0) 1047 } 1048 90%{ 1049 -webkit-transform:translate3d(0,5px,0); 1050 transform:translate3d(0,5px,0) 1051 } 1052 100%{ 1053 -webkit-transform:none; 1054 transform:none 1055 } 1056 } 1057 上升的同时带有弹动的效果 1058 .bounceInUp{ 1059 -webkit-animation-name:bounceInUp; 1060 animation-name:bounceInUp 1061 } 1062 @-webkit-keyframes bounceInUp{ 1063 0%,60%,75%,90%,100%{ 1064 -webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000); 1065 transition-timing-function:cubic-bezier(0.215,.610,.355,1.000) 1066 } 1067 0%{ 1068 opacity:0; 1069 -webkit-transform:translate3d(0,3000px,0); 1070 transform:translate3d(0,3000px,0) 1071 } 1072 60%{ 1073 opacity:1; 1074 -webkit-transform:translate3d(0,-25px,0); 1075 transform:translate3d(0,-25px,0) 1076 } 1077 75%{ 1078 -webkit-transform:translate3d(0,10px,0); 1079 transform:translate3d(0,10px,0) 1080 } 1081 90%{ 1082 -webkit-transform:translate3d(0,-5px,0); 1083 transform:translate3d(0,-5px,0) 1084 } 1085 100%{ 1086 -webkit-transform:none; 1087 transform:none 1088 } 1089 } 1090 @keyframes bounceInUp{ 1091 0%,60%,75%,90%,100%{ 1092 -webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000); 1093 transition-timing-function:cubic-bezier(0.215,.610,.355,1.000) 1094 } 1095 0%{ 1096 opacity:0; 1097 -webkit-transform:translate3d(0,3000px,0); 1098 transform:translate3d(0,3000px,0) 1099 } 1100 60%{ 1101 opacity:1; 1102 -webkit-transform:translate3d(0,-25px,0); 1103 transform:translate3d(0,-25px,0) 1104 } 1105 75%{ 1106 -webkit-transform:translate3d(0,10px,0); 1107 transform:translate3d(0,10px,0) 1108 } 1109 90%{ 1110 -webkit-transform:translate3d(0,-5px,0); 1111 transform:translate3d(0,-5px,0) 1112 } 1113 100%{ 1114 -webkit-transform:none; 1115 transform:none 1116 } 1117 } 1118 //左边弹入 1119 .bounceInLeft{ 1120 -webkit-animation-name:bounceInLeft; 1121 animation-name:bounceInLeft 1122 } 1123 @-webkit-keyframes bounceInLeft{ 1124 0%,60%,75%,90%,100%{ 1125 -webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000); 1126 transition-timing-function:cubic-bezier(0.215,.610,.355,1.000) 1127 } 1128 0%{ 1129 opacity:0; 1130 -webkit-transform:translate3d(-3000px,0,0); 1131 transform:translate3d(-3000px,0,0) 1132 } 1133 60%{ 1134 opacity:1; 1135 -webkit-transform:translate3d(25px,0,0); 1136 transform:translate3d(25px,0,0) 1137 } 1138 75%{ 1139 -webkit-transform:translate3d(-10px,0,0); 1140 transform:translate3d(-10px,0,0) 1141 } 1142 90%{ 1143 -webkit-transform:translate3d(5px,0,0); 1144 transform:translate3d(5px,0,0) 1145 } 1146 100%{ 1147 -webkit-transform:none; 1148 transform:none 1149 } 1150 } 1151 @keyframes bounceInLeft{ 1152 0%,60%,75%,90%,100%{ 1153 -webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000); 1154 transition-timing-function:cubic-bezier(0.215,.610,.355,1.000) 1155 } 1156 0%{ 1157 opacity:0; 1158 -webkit-transform:translate3d(-3000px,0,0); 1159 transform:translate3d(-3000px,0,0) 1160 } 1161 60%{ 1162 opacity:1; 1163 -webkit-transform:translate3d(25px,0,0); 1164 transform:translate3d(25px,0,0) 1165 } 1166 75%{ 1167 -webkit-transform:translate3d(-10px,0,0); 1168 transform:translate3d(-10px,0,0) 1169 } 1170 90%{ 1171 -webkit-transform:translate3d(5px,0,0); 1172 transform:translate3d(5px,0,0) 1173 } 1174 100%{ 1175 -webkit-transform:none; 1176 transform:none 1177 } 1178 } 1179 //右边弹入 1180 .bounceInRight{ 1181 -webkit-animation-name:bounceInRight; 1182 animation-name:bounceInRight 1183 } 1184 1185 @-webkit-keyframes bounceInRight{ 1186 0%,60%,75%,90%,100%{ 1187 -webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000); 1188 transition-timing-function:cubic-bezier(0.215,.610,.355,1.000) 1189 } 1190 0%{ 1191 opacity:0; 1192 -webkit-transform:translate3d(3000px,0,0); 1193 transform:translate3d(3000px,0,0) 1194 } 1195 60%{ 1196 opacity:1; 1197 -webkit-transform:translate3d(-25px,0,0); 1198 transform:translate3d(-25px,0,0) 1199 } 1200 75%{ 1201 -webkit-transform:translate3d(10px,0,0); 1202 transform:translate3d(10px,0,0) 1203 } 1204 90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)} 1205 100%{-webkit-transform:none;transform:none 1206 } 1207 } 1208 @keyframes bounceInRight{ 1209 0%,60%,75%,90%,100%{ 1210 -webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000); 1211 transition-timing-function:cubic-bezier(0.215,.610,.355,1.000) 1212 } 1213 0%{ 1214 opacity:0; 1215 -webkit-transform:translate3d(3000px,0,0); 1216 transform:translate3d(3000px,0,0) 1217 } 1218 60%{ 1219 opacity:1; 1220 -webkit-transform:translate3d(-25px,0,0); 1221 transform:translate3d(-25px,0,0) 1222 } 1223 75%{ 1224 -webkit-transform:translate3d(10px,0,0); 1225 transform:translate3d(10px,0,0) 1226 } 1227 90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)} 1228 100%{-webkit-transform:none;transform:none 1229 } 1230 } 1231 1232 //左摇右摆 1233 .jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center} 1234 @-webkit-keyframes jello{11.1%{-webkit-transform:none;transform:none} 1235 22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)} 1236 33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)} 1237 44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)} 1238 55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)} 1239 66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)} 1240 77.7%{-webkit-transform:skewX(0.390625deg) skewY(0.390625deg);transform:skewX(0.390625deg) skewY(0.390625deg)} 1241 88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)} 1242 100%{-webkit-transform:none;transform:none} 1243 } 1244 @keyframes jello{11.1%{-webkit-transform:none;transform:none} 1245 22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)} 1246 33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)} 1247 44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)} 1248 55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)} 1249 66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)} 1250 77.7%{-webkit-transform:skewX(0.390625deg) skewY(0.390625deg);transform:skewX(0.390625deg) skewY(0.390625deg)} 1251 88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)} 1252 100%{-webkit-transform:none;transform:none} 1253 }