css3动画-animation

   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 }
View Code