首页 > 代码库 > CSS3 反弹效果
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 ?
CSS3 反弹效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。