CSS3 反弹效果

 

每日一更，今天是反弹效果集

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

posted @ 2017-01-21 09:48  Linda_Je  Views(517)  Comments(0)  Edit  收藏  举报