github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/transition.css (about) 1 /*! 2 * # Semantic UI x.x - Transition 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributorss 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 12 13 /******************************* 14 Transitions 15 *******************************/ 16 17 .transition { 18 -webkit-animation-iteration-count: 1; 19 animation-iteration-count: 1; 20 -webkit-animation-duration: 300ms; 21 animation-duration: 300ms; 22 -webkit-animation-timing-function: ease; 23 animation-timing-function: ease; 24 -webkit-animation-fill-mode: both; 25 animation-fill-mode: both; 26 } 27 28 29 /******************************* 30 States 31 *******************************/ 32 33 34 /* Animating */ 35 .animating.transition { 36 -webkit-backface-visibility: hidden; 37 backface-visibility: hidden; 38 -webkit-transform: translateZ(0); 39 transform: translateZ(0); 40 visibility: visible !important; 41 } 42 43 /* Loading */ 44 .loading.transition { 45 position: absolute; 46 top: -99999px; 47 left: -99999px; 48 } 49 50 /* Hidden */ 51 .hidden.transition { 52 display: none; 53 visibility: hidden; 54 } 55 56 /* Visible */ 57 .visible.transition { 58 display: block !important; 59 visibility: visible !important; 60 -webkit-backface-visibility: hidden; 61 backface-visibility: hidden; 62 -webkit-transform: translateZ(0); 63 transform: translateZ(0); 64 } 65 66 /* Disabled */ 67 .disabled.transition { 68 -webkit-animation-play-state: paused; 69 animation-play-state: paused; 70 } 71 72 73 /******************************* 74 Variations 75 *******************************/ 76 77 .looping.transition { 78 -webkit-animation-iteration-count: infinite; 79 animation-iteration-count: infinite; 80 } 81 82 83 /******************************* 84 Transitions 85 *******************************/ 86 87 /* 88 Some transitions adapted from Animate CSS 89 https://github.com/daneden/animate.css 90 91 Additional transitions adapted from Glide 92 by Nick Pettit - https://github.com/nickpettit/glide 93 */ 94 95 /*-------------- 96 Browse 97 ---------------*/ 98 99 .transition.browse { 100 -webkit-animation-duration: 500ms; 101 animation-duration: 500ms; 102 } 103 .transition.browse.in { 104 -webkit-animation-name: browseIn; 105 animation-name: browseIn; 106 } 107 .transition.browse.out, 108 .transition.browse.left.out { 109 -webkit-animation-name: browseOutLeft; 110 animation-name: browseOutLeft; 111 } 112 .transition.browse.right.out { 113 -webkit-animation-name: browseOutRight; 114 animation-name: browseOutRight; 115 } 116 117 /* In */ 118 @-webkit-keyframes browseIn { 119 0% { 120 -webkit-transform: scale(0.8) translateZ(0px); 121 transform: scale(0.8) translateZ(0px); 122 z-index: -1; 123 } 124 10% { 125 -webkit-transform: scale(0.8) translateZ(0px); 126 transform: scale(0.8) translateZ(0px); 127 z-index: -1; 128 opacity: 0.7; 129 } 130 80% { 131 -webkit-transform: scale(1.05) translateZ(0px); 132 transform: scale(1.05) translateZ(0px); 133 opacity: 1; 134 z-index: 999; 135 } 136 100% { 137 -webkit-transform: scale(1) translateZ(0px); 138 transform: scale(1) translateZ(0px); 139 z-index: 999; 140 } 141 } 142 @keyframes browseIn { 143 0% { 144 -webkit-transform: scale(0.8) translateZ(0px); 145 transform: scale(0.8) translateZ(0px); 146 z-index: -1; 147 } 148 10% { 149 -webkit-transform: scale(0.8) translateZ(0px); 150 transform: scale(0.8) translateZ(0px); 151 z-index: -1; 152 opacity: 0.7; 153 } 154 80% { 155 -webkit-transform: scale(1.05) translateZ(0px); 156 transform: scale(1.05) translateZ(0px); 157 opacity: 1; 158 z-index: 999; 159 } 160 100% { 161 -webkit-transform: scale(1) translateZ(0px); 162 transform: scale(1) translateZ(0px); 163 z-index: 999; 164 } 165 } 166 167 /* Out */ 168 @-webkit-keyframes browseOutLeft { 169 0% { 170 z-index: 999; 171 -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); 172 transform: translateX(0%) rotateY(0deg) rotateX(0deg); 173 } 174 50% { 175 z-index: -1; 176 -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); 177 transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); 178 } 179 80% { 180 opacity: 1; 181 } 182 100% { 183 z-index: -1; 184 -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); 185 transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); 186 opacity: 0; 187 } 188 } 189 @keyframes browseOutLeft { 190 0% { 191 z-index: 999; 192 -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); 193 transform: translateX(0%) rotateY(0deg) rotateX(0deg); 194 } 195 50% { 196 z-index: -1; 197 -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); 198 transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); 199 } 200 80% { 201 opacity: 1; 202 } 203 100% { 204 z-index: -1; 205 -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); 206 transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); 207 opacity: 0; 208 } 209 } 210 @-webkit-keyframes browseOutRight { 211 0% { 212 z-index: 999; 213 -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); 214 transform: translateX(0%) rotateY(0deg) rotateX(0deg); 215 } 216 50% { 217 z-index: 1; 218 -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); 219 transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); 220 } 221 80% { 222 opacity: 1; 223 } 224 100% { 225 z-index: 1; 226 -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); 227 transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); 228 opacity: 0; 229 } 230 } 231 @keyframes browseOutRight { 232 0% { 233 z-index: 999; 234 -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); 235 transform: translateX(0%) rotateY(0deg) rotateX(0deg); 236 } 237 50% { 238 z-index: 1; 239 -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); 240 transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); 241 } 242 80% { 243 opacity: 1; 244 } 245 100% { 246 z-index: 1; 247 -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); 248 transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); 249 opacity: 0; 250 } 251 } 252 253 /*-------------- 254 Drop 255 ---------------*/ 256 257 .drop.transition { 258 -webkit-transform-origin: top center; 259 -ms-transform-origin: top center; 260 transform-origin: top center; 261 -webkit-animation-duration: 500ms; 262 animation-duration: 500ms; 263 -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); 264 animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); 265 } 266 .drop.transition.in { 267 -webkit-animation-name: dropIn; 268 animation-name: dropIn; 269 } 270 .drop.transition.out { 271 -webkit-animation-name: dropOut; 272 animation-name: dropOut; 273 } 274 275 /* Drop */ 276 @-webkit-keyframes dropIn { 277 0% { 278 opacity: 0; 279 -webkit-transform: scale(0); 280 transform: scale(0); 281 } 282 100% { 283 opacity: 1; 284 -webkit-transform: scale(1); 285 transform: scale(1); 286 } 287 } 288 @keyframes dropIn { 289 0% { 290 opacity: 0; 291 -webkit-transform: scale(0); 292 transform: scale(0); 293 } 294 100% { 295 opacity: 1; 296 -webkit-transform: scale(1); 297 transform: scale(1); 298 } 299 } 300 @-webkit-keyframes dropOut { 301 0% { 302 opacity: 1; 303 -webkit-transform: scale(1); 304 transform: scale(1); 305 } 306 100% { 307 opacity: 0; 308 -webkit-transform: scale(0); 309 transform: scale(0); 310 } 311 } 312 @keyframes dropOut { 313 0% { 314 opacity: 1; 315 -webkit-transform: scale(1); 316 transform: scale(1); 317 } 318 100% { 319 opacity: 0; 320 -webkit-transform: scale(0); 321 transform: scale(0); 322 } 323 } 324 325 /*-------------- 326 Fade 327 ---------------*/ 328 329 .transition.fade.in { 330 -webkit-animation-name: fadeIn; 331 animation-name: fadeIn; 332 } 333 .transition[class*="fade up"].in { 334 -webkit-animation-name: fadeInUp; 335 animation-name: fadeInUp; 336 } 337 .transition[class*="fade down"].in { 338 -webkit-animation-name: fadeInDown; 339 animation-name: fadeInDown; 340 } 341 .transition[class*="fade left"].in { 342 -webkit-animation-name: fadeInLeft; 343 animation-name: fadeInLeft; 344 } 345 .transition[class*="fade right"].in { 346 -webkit-animation-name: fadeInRight; 347 animation-name: fadeInRight; 348 } 349 .transition.fade.out { 350 -webkit-animation-name: fadeOut; 351 animation-name: fadeOut; 352 } 353 .transition[class*="fade up"].out { 354 -webkit-animation-name: fadeOutUp; 355 animation-name: fadeOutUp; 356 } 357 .transition[class*="fade down"].out { 358 -webkit-animation-name: fadeOutDown; 359 animation-name: fadeOutDown; 360 } 361 .transition[class*="fade left"].out { 362 -webkit-animation-name: fadeOutLeft; 363 animation-name: fadeOutLeft; 364 } 365 .transition[class*="fade right"].out { 366 -webkit-animation-name: fadeOutRight; 367 animation-name: fadeOutRight; 368 } 369 370 /* In */ 371 @-webkit-keyframes fadeIn { 372 0% { 373 opacity: 0; 374 } 375 100% { 376 opacity: 1; 377 } 378 } 379 @keyframes fadeIn { 380 0% { 381 opacity: 0; 382 } 383 100% { 384 opacity: 1; 385 } 386 } 387 @-webkit-keyframes fadeInUp { 388 0% { 389 opacity: 0; 390 -webkit-transform: translateY(10%); 391 transform: translateY(10%); 392 } 393 100% { 394 opacity: 1; 395 -webkit-transform: translateY(0%); 396 transform: translateY(0%); 397 } 398 } 399 @keyframes fadeInUp { 400 0% { 401 opacity: 0; 402 -webkit-transform: translateY(10%); 403 transform: translateY(10%); 404 } 405 100% { 406 opacity: 1; 407 -webkit-transform: translateY(0%); 408 transform: translateY(0%); 409 } 410 } 411 @-webkit-keyframes fadeInDown { 412 0% { 413 opacity: 0; 414 -webkit-transform: translateY(-10%); 415 transform: translateY(-10%); 416 } 417 100% { 418 opacity: 1; 419 -webkit-transform: translateY(0%); 420 transform: translateY(0%); 421 } 422 } 423 @keyframes fadeInDown { 424 0% { 425 opacity: 0; 426 -webkit-transform: translateY(-10%); 427 transform: translateY(-10%); 428 } 429 100% { 430 opacity: 1; 431 -webkit-transform: translateY(0%); 432 transform: translateY(0%); 433 } 434 } 435 @-webkit-keyframes fadeInLeft { 436 0% { 437 opacity: 0; 438 -webkit-transform: translateX(10%); 439 transform: translateX(10%); 440 } 441 100% { 442 opacity: 1; 443 -webkit-transform: translateX(0%); 444 transform: translateX(0%); 445 } 446 } 447 @keyframes fadeInLeft { 448 0% { 449 opacity: 0; 450 -webkit-transform: translateX(10%); 451 transform: translateX(10%); 452 } 453 100% { 454 opacity: 1; 455 -webkit-transform: translateX(0%); 456 transform: translateX(0%); 457 } 458 } 459 @-webkit-keyframes fadeInRight { 460 0% { 461 opacity: 0; 462 -webkit-transform: translateX(-10%); 463 transform: translateX(-10%); 464 } 465 100% { 466 opacity: 1; 467 -webkit-transform: translateX(0%); 468 transform: translateX(0%); 469 } 470 } 471 @keyframes fadeInRight { 472 0% { 473 opacity: 0; 474 -webkit-transform: translateX(-10%); 475 transform: translateX(-10%); 476 } 477 100% { 478 opacity: 1; 479 -webkit-transform: translateX(0%); 480 transform: translateX(0%); 481 } 482 } 483 484 /* Out */ 485 @-webkit-keyframes fadeOut { 486 0% { 487 opacity: 1; 488 } 489 100% { 490 opacity: 0; 491 } 492 } 493 @keyframes fadeOut { 494 0% { 495 opacity: 1; 496 } 497 100% { 498 opacity: 0; 499 } 500 } 501 @-webkit-keyframes fadeOutUp { 502 0% { 503 opacity: 1; 504 -webkit-transform: translateY(0%); 505 transform: translateY(0%); 506 } 507 100% { 508 opacity: 0; 509 -webkit-transform: translateY(10%); 510 transform: translateY(10%); 511 } 512 } 513 @keyframes fadeOutUp { 514 0% { 515 opacity: 1; 516 -webkit-transform: translateY(0%); 517 transform: translateY(0%); 518 } 519 100% { 520 opacity: 0; 521 -webkit-transform: translateY(10%); 522 transform: translateY(10%); 523 } 524 } 525 @-webkit-keyframes fadeOutDown { 526 0% { 527 opacity: 1; 528 -webkit-transform: translateY(0%); 529 transform: translateY(0%); 530 } 531 100% { 532 opacity: 0; 533 -webkit-transform: translateY(-10%); 534 transform: translateY(-10%); 535 } 536 } 537 @keyframes fadeOutDown { 538 0% { 539 opacity: 1; 540 -webkit-transform: translateY(0%); 541 transform: translateY(0%); 542 } 543 100% { 544 opacity: 0; 545 -webkit-transform: translateY(-10%); 546 transform: translateY(-10%); 547 } 548 } 549 @-webkit-keyframes fadeOutLeft { 550 0% { 551 opacity: 1; 552 -webkit-transform: translateX(0%); 553 transform: translateX(0%); 554 } 555 100% { 556 opacity: 0; 557 -webkit-transform: translateX(10%); 558 transform: translateX(10%); 559 } 560 } 561 @keyframes fadeOutLeft { 562 0% { 563 opacity: 1; 564 -webkit-transform: translateX(0%); 565 transform: translateX(0%); 566 } 567 100% { 568 opacity: 0; 569 -webkit-transform: translateX(10%); 570 transform: translateX(10%); 571 } 572 } 573 @-webkit-keyframes fadeOutRight { 574 0% { 575 opacity: 1; 576 -webkit-transform: translateX(0%); 577 transform: translateX(0%); 578 } 579 100% { 580 opacity: 0; 581 -webkit-transform: translateX(-10%); 582 transform: translateX(-10%); 583 } 584 } 585 @keyframes fadeOutRight { 586 0% { 587 opacity: 1; 588 -webkit-transform: translateX(0%); 589 transform: translateX(0%); 590 } 591 100% { 592 opacity: 0; 593 -webkit-transform: translateX(-10%); 594 transform: translateX(-10%); 595 } 596 } 597 598 /*-------------- 599 Flips 600 ---------------*/ 601 602 .flip.transition.in, 603 .flip.transition.out { 604 -webkit-animation-duration: 600ms; 605 animation-duration: 600ms; 606 -webkit-perspective: 2000px; 607 perspective: 2000px; 608 } 609 .horizontal.flip.transition.in { 610 -webkit-animation-name: horizontalFlipIn; 611 animation-name: horizontalFlipIn; 612 } 613 .horizontal.flip.transition.out { 614 -webkit-animation-name: horizontalFlipOut; 615 animation-name: horizontalFlipOut; 616 } 617 .vertical.flip.transition.in { 618 -webkit-animation-name: verticalFlipIn; 619 animation-name: verticalFlipIn; 620 } 621 .vertical.flip.transition.out { 622 -webkit-animation-name: verticalFlipOut; 623 animation-name: verticalFlipOut; 624 } 625 626 /* In */ 627 @-webkit-keyframes horizontalFlipIn { 628 0% { 629 -webkit-transform: perspective(2000px) rotateY(-90deg); 630 transform: perspective(2000px) rotateY(-90deg); 631 opacity: 0; 632 } 633 100% { 634 -webkit-transform: perspective(2000px) rotateY(0deg); 635 transform: perspective(2000px) rotateY(0deg); 636 opacity: 1; 637 } 638 } 639 @keyframes horizontalFlipIn { 640 0% { 641 -webkit-transform: perspective(2000px) rotateY(-90deg); 642 transform: perspective(2000px) rotateY(-90deg); 643 opacity: 0; 644 } 645 100% { 646 -webkit-transform: perspective(2000px) rotateY(0deg); 647 transform: perspective(2000px) rotateY(0deg); 648 opacity: 1; 649 } 650 } 651 @-webkit-keyframes verticalFlipIn { 652 0% { 653 -webkit-transform: perspective(2000px) rotateX(-90deg); 654 transform: perspective(2000px) rotateX(-90deg); 655 opacity: 0; 656 } 657 100% { 658 -webkit-transform: perspective(2000px) rotateX(0deg); 659 transform: perspective(2000px) rotateX(0deg); 660 opacity: 1; 661 } 662 } 663 @keyframes verticalFlipIn { 664 0% { 665 -webkit-transform: perspective(2000px) rotateX(-90deg); 666 transform: perspective(2000px) rotateX(-90deg); 667 opacity: 0; 668 } 669 100% { 670 -webkit-transform: perspective(2000px) rotateX(0deg); 671 transform: perspective(2000px) rotateX(0deg); 672 opacity: 1; 673 } 674 } 675 676 /* Out */ 677 @-webkit-keyframes horizontalFlipOut { 678 0% { 679 -webkit-transform: perspective(2000px) rotateY(0deg); 680 transform: perspective(2000px) rotateY(0deg); 681 opacity: 1; 682 } 683 100% { 684 -webkit-transform: perspective(2000px) rotateY(90deg); 685 transform: perspective(2000px) rotateY(90deg); 686 opacity: 0; 687 } 688 } 689 @keyframes horizontalFlipOut { 690 0% { 691 -webkit-transform: perspective(2000px) rotateY(0deg); 692 transform: perspective(2000px) rotateY(0deg); 693 opacity: 1; 694 } 695 100% { 696 -webkit-transform: perspective(2000px) rotateY(90deg); 697 transform: perspective(2000px) rotateY(90deg); 698 opacity: 0; 699 } 700 } 701 @-webkit-keyframes verticalFlipOut { 702 0% { 703 -webkit-transform: perspective(2000px) rotateX(0deg); 704 transform: perspective(2000px) rotateX(0deg); 705 opacity: 1; 706 } 707 100% { 708 -webkit-transform: perspective(2000px) rotateX(-90deg); 709 transform: perspective(2000px) rotateX(-90deg); 710 opacity: 0; 711 } 712 } 713 @keyframes verticalFlipOut { 714 0% { 715 -webkit-transform: perspective(2000px) rotateX(0deg); 716 transform: perspective(2000px) rotateX(0deg); 717 opacity: 1; 718 } 719 100% { 720 -webkit-transform: perspective(2000px) rotateX(-90deg); 721 transform: perspective(2000px) rotateX(-90deg); 722 opacity: 0; 723 } 724 } 725 726 /*-------------- 727 Scale 728 ---------------*/ 729 730 .scale.transition.in { 731 -webkit-animation-name: scaleIn; 732 animation-name: scaleIn; 733 } 734 .scale.transition.out { 735 -webkit-animation-name: scaleOut; 736 animation-name: scaleOut; 737 } 738 739 /* In */ 740 @-webkit-keyframes scaleIn { 741 0% { 742 opacity: 0; 743 -webkit-transform: scale(0.7); 744 transform: scale(0.7); 745 } 746 100% { 747 opacity: 1; 748 -webkit-transform: scale(1); 749 transform: scale(1); 750 } 751 } 752 @keyframes scaleIn { 753 0% { 754 opacity: 0; 755 -webkit-transform: scale(0.7); 756 transform: scale(0.7); 757 } 758 100% { 759 opacity: 1; 760 -webkit-transform: scale(1); 761 transform: scale(1); 762 } 763 } 764 765 /* Out */ 766 @-webkit-keyframes scaleOut { 767 0% { 768 opacity: 1; 769 -webkit-transform: scale(1); 770 transform: scale(1); 771 } 772 100% { 773 opacity: 0; 774 -webkit-transform: scale(0.7); 775 transform: scale(0.7); 776 } 777 } 778 @keyframes scaleOut { 779 0% { 780 opacity: 1; 781 -webkit-transform: scale(1); 782 transform: scale(1); 783 } 784 100% { 785 opacity: 0; 786 -webkit-transform: scale(0.7); 787 transform: scale(0.7); 788 } 789 } 790 791 /*-------------- 792 Fly 793 ---------------*/ 794 795 796 /* Inward */ 797 .transition.fly { 798 -webkit-animation-duration: 0.6s; 799 animation-duration: 0.6s; 800 -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 801 transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 802 } 803 .transition.fly.in { 804 -webkit-animation-name: flyIn; 805 animation-name: flyIn; 806 } 807 .transition[class*="fly up"].in { 808 -webkit-animation-name: flyInUp; 809 animation-name: flyInUp; 810 } 811 .transition[class*="fly down"].in { 812 -webkit-animation-name: flyInDown; 813 animation-name: flyInDown; 814 } 815 .transition[class*="fly left"].in { 816 -webkit-animation-name: flyInLeft; 817 animation-name: flyInLeft; 818 } 819 .transition[class*="fly right"].in { 820 -webkit-animation-name: flyInRight; 821 animation-name: flyInRight; 822 } 823 824 /* Outward */ 825 .transition.fly.out { 826 -webkit-animation-name: flyOut; 827 animation-name: flyOut; 828 } 829 .transition[class*="fly up"].out { 830 -webkit-animation-name: flyOutUp; 831 animation-name: flyOutUp; 832 } 833 .transition[class*="fly down"].out { 834 -webkit-animation-name: flyOutDown; 835 animation-name: flyOutDown; 836 } 837 .transition[class*="fly left"].out { 838 -webkit-animation-name: flyOutLeft; 839 animation-name: flyOutLeft; 840 } 841 .transition[class*="fly right"].out { 842 -webkit-animation-name: flyOutRight; 843 animation-name: flyOutRight; 844 } 845 846 /* In */ 847 @-webkit-keyframes flyIn { 848 0% { 849 opacity: 0; 850 -webkit-transform: scale3d(0.3, 0.3, 0.3); 851 transform: scale3d(0.3, 0.3, 0.3); 852 } 853 20% { 854 -webkit-transform: scale3d(1.1, 1.1, 1.1); 855 transform: scale3d(1.1, 1.1, 1.1); 856 } 857 40% { 858 -webkit-transform: scale3d(0.9, 0.9, 0.9); 859 transform: scale3d(0.9, 0.9, 0.9); 860 } 861 60% { 862 opacity: 1; 863 -webkit-transform: scale3d(1.03, 1.03, 1.03); 864 transform: scale3d(1.03, 1.03, 1.03); 865 } 866 80% { 867 -webkit-transform: scale3d(0.97, 0.97, 0.97); 868 transform: scale3d(0.97, 0.97, 0.97); 869 } 870 100% { 871 opacity: 1; 872 -webkit-transform: scale3d(1, 1, 1); 873 transform: scale3d(1, 1, 1); 874 } 875 } 876 @keyframes flyIn { 877 0% { 878 opacity: 0; 879 -webkit-transform: scale3d(0.3, 0.3, 0.3); 880 transform: scale3d(0.3, 0.3, 0.3); 881 } 882 20% { 883 -webkit-transform: scale3d(1.1, 1.1, 1.1); 884 transform: scale3d(1.1, 1.1, 1.1); 885 } 886 40% { 887 -webkit-transform: scale3d(0.9, 0.9, 0.9); 888 transform: scale3d(0.9, 0.9, 0.9); 889 } 890 60% { 891 opacity: 1; 892 -webkit-transform: scale3d(1.03, 1.03, 1.03); 893 transform: scale3d(1.03, 1.03, 1.03); 894 } 895 80% { 896 -webkit-transform: scale3d(0.97, 0.97, 0.97); 897 transform: scale3d(0.97, 0.97, 0.97); 898 } 899 100% { 900 opacity: 1; 901 -webkit-transform: scale3d(1, 1, 1); 902 transform: scale3d(1, 1, 1); 903 } 904 } 905 @-webkit-keyframes flyInUp { 906 0% { 907 opacity: 0; 908 -webkit-transform: translate3d(0, 1500px, 0); 909 transform: translate3d(0, 1500px, 0); 910 } 911 60% { 912 opacity: 1; 913 -webkit-transform: translate3d(0, -20px, 0); 914 transform: translate3d(0, -20px, 0); 915 } 916 75% { 917 -webkit-transform: translate3d(0, 10px, 0); 918 transform: translate3d(0, 10px, 0); 919 } 920 90% { 921 -webkit-transform: translate3d(0, -5px, 0); 922 transform: translate3d(0, -5px, 0); 923 } 924 100% { 925 -webkit-transform: translate3d(0, 0, 0); 926 transform: translate3d(0, 0, 0); 927 } 928 } 929 @keyframes flyInUp { 930 0% { 931 opacity: 0; 932 -webkit-transform: translate3d(0, 1500px, 0); 933 transform: translate3d(0, 1500px, 0); 934 } 935 60% { 936 opacity: 1; 937 -webkit-transform: translate3d(0, -20px, 0); 938 transform: translate3d(0, -20px, 0); 939 } 940 75% { 941 -webkit-transform: translate3d(0, 10px, 0); 942 transform: translate3d(0, 10px, 0); 943 } 944 90% { 945 -webkit-transform: translate3d(0, -5px, 0); 946 transform: translate3d(0, -5px, 0); 947 } 948 100% { 949 -webkit-transform: translate3d(0, 0, 0); 950 transform: translate3d(0, 0, 0); 951 } 952 } 953 @-webkit-keyframes flyInDown { 954 0% { 955 opacity: 0; 956 -webkit-transform: translate3d(0, -1500px, 0); 957 transform: translate3d(0, -1500px, 0); 958 } 959 60% { 960 opacity: 1; 961 -webkit-transform: translate3d(0, 25px, 0); 962 transform: translate3d(0, 25px, 0); 963 } 964 75% { 965 -webkit-transform: translate3d(0, -10px, 0); 966 transform: translate3d(0, -10px, 0); 967 } 968 90% { 969 -webkit-transform: translate3d(0, 5px, 0); 970 transform: translate3d(0, 5px, 0); 971 } 972 100% { 973 -webkit-transform: none; 974 transform: none; 975 } 976 } 977 @keyframes flyInDown { 978 0% { 979 opacity: 0; 980 -webkit-transform: translate3d(0, -1500px, 0); 981 transform: translate3d(0, -1500px, 0); 982 } 983 60% { 984 opacity: 1; 985 -webkit-transform: translate3d(0, 25px, 0); 986 transform: translate3d(0, 25px, 0); 987 } 988 75% { 989 -webkit-transform: translate3d(0, -10px, 0); 990 transform: translate3d(0, -10px, 0); 991 } 992 90% { 993 -webkit-transform: translate3d(0, 5px, 0); 994 transform: translate3d(0, 5px, 0); 995 } 996 100% { 997 -webkit-transform: none; 998 transform: none; 999 } 1000 } 1001 @-webkit-keyframes flyInLeft { 1002 0% { 1003 opacity: 0; 1004 -webkit-transform: translate3d(1500px, 0, 0); 1005 transform: translate3d(1500px, 0, 0); 1006 } 1007 60% { 1008 opacity: 1; 1009 -webkit-transform: translate3d(-25px, 0, 0); 1010 transform: translate3d(-25px, 0, 0); 1011 } 1012 75% { 1013 -webkit-transform: translate3d(10px, 0, 0); 1014 transform: translate3d(10px, 0, 0); 1015 } 1016 90% { 1017 -webkit-transform: translate3d(-5px, 0, 0); 1018 transform: translate3d(-5px, 0, 0); 1019 } 1020 100% { 1021 -webkit-transform: none; 1022 transform: none; 1023 } 1024 } 1025 @keyframes flyInLeft { 1026 0% { 1027 opacity: 0; 1028 -webkit-transform: translate3d(1500px, 0, 0); 1029 transform: translate3d(1500px, 0, 0); 1030 } 1031 60% { 1032 opacity: 1; 1033 -webkit-transform: translate3d(-25px, 0, 0); 1034 transform: translate3d(-25px, 0, 0); 1035 } 1036 75% { 1037 -webkit-transform: translate3d(10px, 0, 0); 1038 transform: translate3d(10px, 0, 0); 1039 } 1040 90% { 1041 -webkit-transform: translate3d(-5px, 0, 0); 1042 transform: translate3d(-5px, 0, 0); 1043 } 1044 100% { 1045 -webkit-transform: none; 1046 transform: none; 1047 } 1048 } 1049 @-webkit-keyframes flyInRight { 1050 0% { 1051 opacity: 0; 1052 -webkit-transform: translate3d(-1500px, 0, 0); 1053 transform: translate3d(-1500px, 0, 0); 1054 } 1055 60% { 1056 opacity: 1; 1057 -webkit-transform: translate3d(25px, 0, 0); 1058 transform: translate3d(25px, 0, 0); 1059 } 1060 75% { 1061 -webkit-transform: translate3d(-10px, 0, 0); 1062 transform: translate3d(-10px, 0, 0); 1063 } 1064 90% { 1065 -webkit-transform: translate3d(5px, 0, 0); 1066 transform: translate3d(5px, 0, 0); 1067 } 1068 100% { 1069 -webkit-transform: none; 1070 transform: none; 1071 } 1072 } 1073 @keyframes flyInRight { 1074 0% { 1075 opacity: 0; 1076 -webkit-transform: translate3d(-1500px, 0, 0); 1077 transform: translate3d(-1500px, 0, 0); 1078 } 1079 60% { 1080 opacity: 1; 1081 -webkit-transform: translate3d(25px, 0, 0); 1082 transform: translate3d(25px, 0, 0); 1083 } 1084 75% { 1085 -webkit-transform: translate3d(-10px, 0, 0); 1086 transform: translate3d(-10px, 0, 0); 1087 } 1088 90% { 1089 -webkit-transform: translate3d(5px, 0, 0); 1090 transform: translate3d(5px, 0, 0); 1091 } 1092 100% { 1093 -webkit-transform: none; 1094 transform: none; 1095 } 1096 } 1097 1098 /* Out */ 1099 @-webkit-keyframes flyOut { 1100 20% { 1101 -webkit-transform: scale3d(0.9, 0.9, 0.9); 1102 transform: scale3d(0.9, 0.9, 0.9); 1103 } 1104 50%, 1105 55% { 1106 opacity: 1; 1107 -webkit-transform: scale3d(1.1, 1.1, 1.1); 1108 transform: scale3d(1.1, 1.1, 1.1); 1109 } 1110 100% { 1111 opacity: 0; 1112 -webkit-transform: scale3d(0.3, 0.3, 0.3); 1113 transform: scale3d(0.3, 0.3, 0.3); 1114 } 1115 } 1116 @keyframes flyOut { 1117 20% { 1118 -webkit-transform: scale3d(0.9, 0.9, 0.9); 1119 transform: scale3d(0.9, 0.9, 0.9); 1120 } 1121 50%, 1122 55% { 1123 opacity: 1; 1124 -webkit-transform: scale3d(1.1, 1.1, 1.1); 1125 transform: scale3d(1.1, 1.1, 1.1); 1126 } 1127 100% { 1128 opacity: 0; 1129 -webkit-transform: scale3d(0.3, 0.3, 0.3); 1130 transform: scale3d(0.3, 0.3, 0.3); 1131 } 1132 } 1133 @-webkit-keyframes flyOutUp { 1134 20% { 1135 -webkit-transform: translate3d(0, 10px, 0); 1136 transform: translate3d(0, 10px, 0); 1137 } 1138 40%, 1139 45% { 1140 opacity: 1; 1141 -webkit-transform: translate3d(0, -20px, 0); 1142 transform: translate3d(0, -20px, 0); 1143 } 1144 100% { 1145 opacity: 0; 1146 -webkit-transform: translate3d(0, 2000px, 0); 1147 transform: translate3d(0, 2000px, 0); 1148 } 1149 } 1150 @keyframes flyOutUp { 1151 20% { 1152 -webkit-transform: translate3d(0, 10px, 0); 1153 transform: translate3d(0, 10px, 0); 1154 } 1155 40%, 1156 45% { 1157 opacity: 1; 1158 -webkit-transform: translate3d(0, -20px, 0); 1159 transform: translate3d(0, -20px, 0); 1160 } 1161 100% { 1162 opacity: 0; 1163 -webkit-transform: translate3d(0, 2000px, 0); 1164 transform: translate3d(0, 2000px, 0); 1165 } 1166 } 1167 @-webkit-keyframes flyOutDown { 1168 20% { 1169 -webkit-transform: translate3d(0, -10px, 0); 1170 transform: translate3d(0, -10px, 0); 1171 } 1172 40%, 1173 45% { 1174 opacity: 1; 1175 -webkit-transform: translate3d(0, 20px, 0); 1176 transform: translate3d(0, 20px, 0); 1177 } 1178 100% { 1179 opacity: 0; 1180 -webkit-transform: translate3d(0, -2000px, 0); 1181 transform: translate3d(0, -2000px, 0); 1182 } 1183 } 1184 @keyframes flyOutDown { 1185 20% { 1186 -webkit-transform: translate3d(0, -10px, 0); 1187 transform: translate3d(0, -10px, 0); 1188 } 1189 40%, 1190 45% { 1191 opacity: 1; 1192 -webkit-transform: translate3d(0, 20px, 0); 1193 transform: translate3d(0, 20px, 0); 1194 } 1195 100% { 1196 opacity: 0; 1197 -webkit-transform: translate3d(0, -2000px, 0); 1198 transform: translate3d(0, -2000px, 0); 1199 } 1200 } 1201 @-webkit-keyframes flyOutRight { 1202 20% { 1203 opacity: 1; 1204 -webkit-transform: translate3d(20px, 0, 0); 1205 transform: translate3d(20px, 0, 0); 1206 } 1207 100% { 1208 opacity: 0; 1209 -webkit-transform: translate3d(-2000px, 0, 0); 1210 transform: translate3d(-2000px, 0, 0); 1211 } 1212 } 1213 @keyframes flyOutRight { 1214 20% { 1215 opacity: 1; 1216 -webkit-transform: translate3d(20px, 0, 0); 1217 transform: translate3d(20px, 0, 0); 1218 } 1219 100% { 1220 opacity: 0; 1221 -webkit-transform: translate3d(-2000px, 0, 0); 1222 transform: translate3d(-2000px, 0, 0); 1223 } 1224 } 1225 @-webkit-keyframes flyOutLeft { 1226 20% { 1227 opacity: 1; 1228 -webkit-transform: translate3d(-20px, 0, 0); 1229 transform: translate3d(-20px, 0, 0); 1230 } 1231 100% { 1232 opacity: 0; 1233 -webkit-transform: translate3d(2000px, 0, 0); 1234 transform: translate3d(2000px, 0, 0); 1235 } 1236 } 1237 @keyframes flyOutLeft { 1238 20% { 1239 opacity: 1; 1240 -webkit-transform: translate3d(-20px, 0, 0); 1241 transform: translate3d(-20px, 0, 0); 1242 } 1243 100% { 1244 opacity: 0; 1245 -webkit-transform: translate3d(2000px, 0, 0); 1246 transform: translate3d(2000px, 0, 0); 1247 } 1248 } 1249 1250 /*-------------- 1251 Slide 1252 ---------------*/ 1253 1254 .transition.slide.in, 1255 .transition[class*="slide down"].in { 1256 -webkit-animation-name: slideInY; 1257 animation-name: slideInY; 1258 -webkit-transform-origin: top center; 1259 -ms-transform-origin: top center; 1260 transform-origin: top center; 1261 } 1262 .transition[class*="slide up"].in { 1263 -webkit-animation-name: slideInY; 1264 animation-name: slideInY; 1265 -webkit-transform-origin: bottom center; 1266 -ms-transform-origin: bottom center; 1267 transform-origin: bottom center; 1268 } 1269 .transition[class*="slide left"].in { 1270 -webkit-animation-name: slideInX; 1271 animation-name: slideInX; 1272 -webkit-transform-origin: center right; 1273 -ms-transform-origin: center right; 1274 transform-origin: center right; 1275 } 1276 .transition[class*="slide right"].in { 1277 -webkit-animation-name: slideInX; 1278 animation-name: slideInX; 1279 -webkit-transform-origin: center left; 1280 -ms-transform-origin: center left; 1281 transform-origin: center left; 1282 } 1283 .transition.slide.out, 1284 .transition[class*="slide down"].out { 1285 -webkit-animation-name: slideOutY; 1286 animation-name: slideOutY; 1287 -webkit-transform-origin: top center; 1288 -ms-transform-origin: top center; 1289 transform-origin: top center; 1290 } 1291 .transition[class*="slide up"].out { 1292 -webkit-animation-name: slideOutY; 1293 animation-name: slideOutY; 1294 -webkit-transform-origin: bottom center; 1295 -ms-transform-origin: bottom center; 1296 transform-origin: bottom center; 1297 } 1298 .transition[class*="slide left"].out { 1299 -webkit-animation-name: slideOutX; 1300 animation-name: slideOutX; 1301 -webkit-transform-origin: center right; 1302 -ms-transform-origin: center right; 1303 transform-origin: center right; 1304 } 1305 .transition[class*="slide right"].out { 1306 -webkit-animation-name: slideOutX; 1307 animation-name: slideOutX; 1308 -webkit-transform-origin: center left; 1309 -ms-transform-origin: center left; 1310 transform-origin: center left; 1311 } 1312 1313 /* In */ 1314 @-webkit-keyframes slideInY { 1315 0% { 1316 opacity: 0; 1317 -webkit-transform: scaleY(0); 1318 transform: scaleY(0); 1319 } 1320 100% { 1321 opacity: 1; 1322 -webkit-transform: scaleY(1); 1323 transform: scaleY(1); 1324 } 1325 } 1326 @keyframes slideInY { 1327 0% { 1328 opacity: 0; 1329 -webkit-transform: scaleY(0); 1330 transform: scaleY(0); 1331 } 1332 100% { 1333 opacity: 1; 1334 -webkit-transform: scaleY(1); 1335 transform: scaleY(1); 1336 } 1337 } 1338 @-webkit-keyframes slideInX { 1339 0% { 1340 opacity: 0; 1341 -webkit-transform: scaleX(0); 1342 transform: scaleX(0); 1343 } 1344 100% { 1345 opacity: 1; 1346 -webkit-transform: scaleX(1); 1347 transform: scaleX(1); 1348 } 1349 } 1350 @keyframes slideInX { 1351 0% { 1352 opacity: 0; 1353 -webkit-transform: scaleX(0); 1354 transform: scaleX(0); 1355 } 1356 100% { 1357 opacity: 1; 1358 -webkit-transform: scaleX(1); 1359 transform: scaleX(1); 1360 } 1361 } 1362 1363 /* Out */ 1364 @-webkit-keyframes slideOutY { 1365 0% { 1366 opacity: 1; 1367 -webkit-transform: scaleY(1); 1368 transform: scaleY(1); 1369 } 1370 100% { 1371 opacity: 0; 1372 -webkit-transform: scaleY(0); 1373 transform: scaleY(0); 1374 } 1375 } 1376 @keyframes slideOutY { 1377 0% { 1378 opacity: 1; 1379 -webkit-transform: scaleY(1); 1380 transform: scaleY(1); 1381 } 1382 100% { 1383 opacity: 0; 1384 -webkit-transform: scaleY(0); 1385 transform: scaleY(0); 1386 } 1387 } 1388 @-webkit-keyframes slideOutX { 1389 0% { 1390 opacity: 1; 1391 -webkit-transform: scaleX(1); 1392 transform: scaleX(1); 1393 } 1394 100% { 1395 opacity: 0; 1396 -webkit-transform: scaleX(0); 1397 transform: scaleX(0); 1398 } 1399 } 1400 @keyframes slideOutX { 1401 0% { 1402 opacity: 1; 1403 -webkit-transform: scaleX(1); 1404 transform: scaleX(1); 1405 } 1406 100% { 1407 opacity: 0; 1408 -webkit-transform: scaleX(0); 1409 transform: scaleX(0); 1410 } 1411 } 1412 1413 /*-------------- 1414 Swing 1415 ---------------*/ 1416 1417 .transition.swing { 1418 -webkit-animation-duration: 800ms; 1419 animation-duration: 800ms; 1420 } 1421 .transition[class*="swing down"].in { 1422 -webkit-animation-name: swingInX; 1423 animation-name: swingInX; 1424 -webkit-transform-origin: top center; 1425 -ms-transform-origin: top center; 1426 transform-origin: top center; 1427 } 1428 .transition[class*="swing up"].in { 1429 -webkit-animation-name: swingInX; 1430 animation-name: swingInX; 1431 -webkit-transform-origin: bottom center; 1432 -ms-transform-origin: bottom center; 1433 transform-origin: bottom center; 1434 } 1435 .transition[class*="swing left"].in { 1436 -webkit-animation-name: swingInY; 1437 animation-name: swingInY; 1438 -webkit-transform-origin: center right; 1439 -ms-transform-origin: center right; 1440 transform-origin: center right; 1441 } 1442 .transition[class*="swing right"].in { 1443 -webkit-animation-name: swingInY; 1444 animation-name: swingInY; 1445 -webkit-transform-origin: center left; 1446 -ms-transform-origin: center left; 1447 transform-origin: center left; 1448 } 1449 .transition.swing.out, 1450 .transition[class*="swing down"].out { 1451 -webkit-animation-name: swingOutX; 1452 animation-name: swingOutX; 1453 -webkit-transform-origin: top center; 1454 -ms-transform-origin: top center; 1455 transform-origin: top center; 1456 } 1457 .transition[class*="swing up"].out { 1458 -webkit-animation-name: swingOutX; 1459 animation-name: swingOutX; 1460 -webkit-transform-origin: bottom center; 1461 -ms-transform-origin: bottom center; 1462 transform-origin: bottom center; 1463 } 1464 .transition[class*="swing left"].out { 1465 -webkit-animation-name: swingOutY; 1466 animation-name: swingOutY; 1467 -webkit-transform-origin: center right; 1468 -ms-transform-origin: center right; 1469 transform-origin: center right; 1470 } 1471 .transition[class*="swing right"].out { 1472 -webkit-animation-name: swingOutY; 1473 animation-name: swingOutY; 1474 -webkit-transform-origin: center left; 1475 -ms-transform-origin: center left; 1476 transform-origin: center left; 1477 } 1478 1479 /* In */ 1480 @-webkit-keyframes swingInX { 1481 0% { 1482 -webkit-transform: perspective(1000px) rotateX(90deg); 1483 transform: perspective(1000px) rotateX(90deg); 1484 opacity: 0; 1485 } 1486 40% { 1487 -webkit-transform: perspective(1000px) rotateX(-30deg); 1488 transform: perspective(1000px) rotateX(-30deg); 1489 opacity: 1; 1490 } 1491 60% { 1492 -webkit-transform: perspective(1000px) rotateX(15deg); 1493 transform: perspective(1000px) rotateX(15deg); 1494 } 1495 80% { 1496 -webkit-transform: perspective(1000px) rotateX(-7.5deg); 1497 transform: perspective(1000px) rotateX(-7.5deg); 1498 } 1499 100% { 1500 -webkit-transform: perspective(1000px) rotateX(0deg); 1501 transform: perspective(1000px) rotateX(0deg); 1502 } 1503 } 1504 @keyframes swingInX { 1505 0% { 1506 -webkit-transform: perspective(1000px) rotateX(90deg); 1507 transform: perspective(1000px) rotateX(90deg); 1508 opacity: 0; 1509 } 1510 40% { 1511 -webkit-transform: perspective(1000px) rotateX(-30deg); 1512 transform: perspective(1000px) rotateX(-30deg); 1513 opacity: 1; 1514 } 1515 60% { 1516 -webkit-transform: perspective(1000px) rotateX(15deg); 1517 transform: perspective(1000px) rotateX(15deg); 1518 } 1519 80% { 1520 -webkit-transform: perspective(1000px) rotateX(-7.5deg); 1521 transform: perspective(1000px) rotateX(-7.5deg); 1522 } 1523 100% { 1524 -webkit-transform: perspective(1000px) rotateX(0deg); 1525 transform: perspective(1000px) rotateX(0deg); 1526 } 1527 } 1528 @-webkit-keyframes swingInY { 1529 0% { 1530 -webkit-transform: perspective(1000px) rotateY(-90deg); 1531 transform: perspective(1000px) rotateY(-90deg); 1532 opacity: 0; 1533 } 1534 40% { 1535 -webkit-transform: perspective(1000px) rotateY(30deg); 1536 transform: perspective(1000px) rotateY(30deg); 1537 opacity: 1; 1538 } 1539 60% { 1540 -webkit-transform: perspective(1000px) rotateY(-17.5deg); 1541 transform: perspective(1000px) rotateY(-17.5deg); 1542 } 1543 80% { 1544 -webkit-transform: perspective(1000px) rotateY(7.5deg); 1545 transform: perspective(1000px) rotateY(7.5deg); 1546 } 1547 100% { 1548 -webkit-transform: perspective(1000px) rotateY(0deg); 1549 transform: perspective(1000px) rotateY(0deg); 1550 } 1551 } 1552 @keyframes swingInY { 1553 0% { 1554 -webkit-transform: perspective(1000px) rotateY(-90deg); 1555 transform: perspective(1000px) rotateY(-90deg); 1556 opacity: 0; 1557 } 1558 40% { 1559 -webkit-transform: perspective(1000px) rotateY(30deg); 1560 transform: perspective(1000px) rotateY(30deg); 1561 opacity: 1; 1562 } 1563 60% { 1564 -webkit-transform: perspective(1000px) rotateY(-17.5deg); 1565 transform: perspective(1000px) rotateY(-17.5deg); 1566 } 1567 80% { 1568 -webkit-transform: perspective(1000px) rotateY(7.5deg); 1569 transform: perspective(1000px) rotateY(7.5deg); 1570 } 1571 100% { 1572 -webkit-transform: perspective(1000px) rotateY(0deg); 1573 transform: perspective(1000px) rotateY(0deg); 1574 } 1575 } 1576 1577 /* Out */ 1578 @-webkit-keyframes swingOutX { 1579 0% { 1580 -webkit-transform: perspective(1000px) rotateX(0deg); 1581 transform: perspective(1000px) rotateX(0deg); 1582 } 1583 40% { 1584 -webkit-transform: perspective(1000px) rotateX(-7.5deg); 1585 transform: perspective(1000px) rotateX(-7.5deg); 1586 } 1587 60% { 1588 -webkit-transform: perspective(1000px) rotateX(17.5deg); 1589 transform: perspective(1000px) rotateX(17.5deg); 1590 } 1591 80% { 1592 -webkit-transform: perspective(1000px) rotateX(-30deg); 1593 transform: perspective(1000px) rotateX(-30deg); 1594 opacity: 1; 1595 } 1596 100% { 1597 -webkit-transform: perspective(1000px) rotateX(90deg); 1598 transform: perspective(1000px) rotateX(90deg); 1599 opacity: 0; 1600 } 1601 } 1602 @keyframes swingOutX { 1603 0% { 1604 -webkit-transform: perspective(1000px) rotateX(0deg); 1605 transform: perspective(1000px) rotateX(0deg); 1606 } 1607 40% { 1608 -webkit-transform: perspective(1000px) rotateX(-7.5deg); 1609 transform: perspective(1000px) rotateX(-7.5deg); 1610 } 1611 60% { 1612 -webkit-transform: perspective(1000px) rotateX(17.5deg); 1613 transform: perspective(1000px) rotateX(17.5deg); 1614 } 1615 80% { 1616 -webkit-transform: perspective(1000px) rotateX(-30deg); 1617 transform: perspective(1000px) rotateX(-30deg); 1618 opacity: 1; 1619 } 1620 100% { 1621 -webkit-transform: perspective(1000px) rotateX(90deg); 1622 transform: perspective(1000px) rotateX(90deg); 1623 opacity: 0; 1624 } 1625 } 1626 @-webkit-keyframes swingOutY { 1627 0% { 1628 -webkit-transform: perspective(1000px) rotateY(0deg); 1629 transform: perspective(1000px) rotateY(0deg); 1630 } 1631 40% { 1632 -webkit-transform: perspective(1000px) rotateY(7.5deg); 1633 transform: perspective(1000px) rotateY(7.5deg); 1634 } 1635 60% { 1636 -webkit-transform: perspective(1000px) rotateY(-10deg); 1637 transform: perspective(1000px) rotateY(-10deg); 1638 } 1639 80% { 1640 -webkit-transform: perspective(1000px) rotateY(30deg); 1641 transform: perspective(1000px) rotateY(30deg); 1642 opacity: 1; 1643 } 1644 100% { 1645 -webkit-transform: perspective(1000px) rotateY(-90deg); 1646 transform: perspective(1000px) rotateY(-90deg); 1647 opacity: 0; 1648 } 1649 } 1650 @keyframes swingOutY { 1651 0% { 1652 -webkit-transform: perspective(1000px) rotateY(0deg); 1653 transform: perspective(1000px) rotateY(0deg); 1654 } 1655 40% { 1656 -webkit-transform: perspective(1000px) rotateY(7.5deg); 1657 transform: perspective(1000px) rotateY(7.5deg); 1658 } 1659 60% { 1660 -webkit-transform: perspective(1000px) rotateY(-10deg); 1661 transform: perspective(1000px) rotateY(-10deg); 1662 } 1663 80% { 1664 -webkit-transform: perspective(1000px) rotateY(30deg); 1665 transform: perspective(1000px) rotateY(30deg); 1666 opacity: 1; 1667 } 1668 100% { 1669 -webkit-transform: perspective(1000px) rotateY(-90deg); 1670 transform: perspective(1000px) rotateY(-90deg); 1671 opacity: 0; 1672 } 1673 } 1674 1675 1676 /******************************* 1677 Static Animations 1678 *******************************/ 1679 1680 1681 /*-------------- 1682 Emphasis 1683 ---------------*/ 1684 1685 .flash.transition { 1686 -webkit-animation-duration: 750ms; 1687 animation-duration: 750ms; 1688 -webkit-animation-name: flash; 1689 animation-name: flash; 1690 } 1691 .shake.transition { 1692 -webkit-animation-duration: 750ms; 1693 animation-duration: 750ms; 1694 -webkit-animation-name: shake; 1695 animation-name: shake; 1696 } 1697 .bounce.transition { 1698 -webkit-animation-duration: 750ms; 1699 animation-duration: 750ms; 1700 -webkit-animation-name: bounce; 1701 animation-name: bounce; 1702 } 1703 .tada.transition { 1704 -webkit-animation-duration: 750ms; 1705 animation-duration: 750ms; 1706 -webkit-animation-name: tada; 1707 animation-name: tada; 1708 } 1709 .pulse.transition { 1710 -webkit-animation-duration: 500ms; 1711 animation-duration: 500ms; 1712 -webkit-animation-name: pulse; 1713 animation-name: pulse; 1714 } 1715 .jiggle.transition { 1716 -webkit-animation-duration: 750ms; 1717 animation-duration: 750ms; 1718 -webkit-animation-name: jiggle; 1719 animation-name: jiggle; 1720 } 1721 1722 /* Flash */ 1723 @-webkit-keyframes flash { 1724 0%, 1725 50%, 1726 100% { 1727 opacity: 1; 1728 } 1729 25%, 1730 75% { 1731 opacity: 0; 1732 } 1733 } 1734 @keyframes flash { 1735 0%, 1736 50%, 1737 100% { 1738 opacity: 1; 1739 } 1740 25%, 1741 75% { 1742 opacity: 0; 1743 } 1744 } 1745 1746 /* Shake */ 1747 @-webkit-keyframes shake { 1748 0%, 1749 100% { 1750 -webkit-transform: translateX(0); 1751 transform: translateX(0); 1752 } 1753 10%, 1754 30%, 1755 50%, 1756 70%, 1757 90% { 1758 -webkit-transform: translateX(-10px); 1759 transform: translateX(-10px); 1760 } 1761 20%, 1762 40%, 1763 60%, 1764 80% { 1765 -webkit-transform: translateX(10px); 1766 transform: translateX(10px); 1767 } 1768 } 1769 @keyframes shake { 1770 0%, 1771 100% { 1772 -webkit-transform: translateX(0); 1773 transform: translateX(0); 1774 } 1775 10%, 1776 30%, 1777 50%, 1778 70%, 1779 90% { 1780 -webkit-transform: translateX(-10px); 1781 transform: translateX(-10px); 1782 } 1783 20%, 1784 40%, 1785 60%, 1786 80% { 1787 -webkit-transform: translateX(10px); 1788 transform: translateX(10px); 1789 } 1790 } 1791 1792 /* Bounce */ 1793 @-webkit-keyframes bounce { 1794 0%, 1795 20%, 1796 50%, 1797 80%, 1798 100% { 1799 -webkit-transform: translateY(0); 1800 transform: translateY(0); 1801 } 1802 40% { 1803 -webkit-transform: translateY(-30px); 1804 transform: translateY(-30px); 1805 } 1806 60% { 1807 -webkit-transform: translateY(-15px); 1808 transform: translateY(-15px); 1809 } 1810 } 1811 @keyframes bounce { 1812 0%, 1813 20%, 1814 50%, 1815 80%, 1816 100% { 1817 -webkit-transform: translateY(0); 1818 transform: translateY(0); 1819 } 1820 40% { 1821 -webkit-transform: translateY(-30px); 1822 transform: translateY(-30px); 1823 } 1824 60% { 1825 -webkit-transform: translateY(-15px); 1826 transform: translateY(-15px); 1827 } 1828 } 1829 1830 /* Tada */ 1831 @-webkit-keyframes tada { 1832 0% { 1833 -webkit-transform: scale(1); 1834 transform: scale(1); 1835 } 1836 10%, 1837 20% { 1838 -webkit-transform: scale(0.9) rotate(-3deg); 1839 transform: scale(0.9) rotate(-3deg); 1840 } 1841 30%, 1842 50%, 1843 70%, 1844 90% { 1845 -webkit-transform: scale(1.1) rotate(3deg); 1846 transform: scale(1.1) rotate(3deg); 1847 } 1848 40%, 1849 60%, 1850 80% { 1851 -webkit-transform: scale(1.1) rotate(-3deg); 1852 transform: scale(1.1) rotate(-3deg); 1853 } 1854 100% { 1855 -webkit-transform: scale(1) rotate(0); 1856 transform: scale(1) rotate(0); 1857 } 1858 } 1859 @keyframes tada { 1860 0% { 1861 -webkit-transform: scale(1); 1862 transform: scale(1); 1863 } 1864 10%, 1865 20% { 1866 -webkit-transform: scale(0.9) rotate(-3deg); 1867 transform: scale(0.9) rotate(-3deg); 1868 } 1869 30%, 1870 50%, 1871 70%, 1872 90% { 1873 -webkit-transform: scale(1.1) rotate(3deg); 1874 transform: scale(1.1) rotate(3deg); 1875 } 1876 40%, 1877 60%, 1878 80% { 1879 -webkit-transform: scale(1.1) rotate(-3deg); 1880 transform: scale(1.1) rotate(-3deg); 1881 } 1882 100% { 1883 -webkit-transform: scale(1) rotate(0); 1884 transform: scale(1) rotate(0); 1885 } 1886 } 1887 1888 /* Pulse */ 1889 @-webkit-keyframes pulse { 1890 0% { 1891 -webkit-transform: scale(1); 1892 transform: scale(1); 1893 opacity: 1; 1894 } 1895 50% { 1896 -webkit-transform: scale(0.9); 1897 transform: scale(0.9); 1898 opacity: 0.7; 1899 } 1900 100% { 1901 -webkit-transform: scale(1); 1902 transform: scale(1); 1903 opacity: 1; 1904 } 1905 } 1906 @keyframes pulse { 1907 0% { 1908 -webkit-transform: scale(1); 1909 transform: scale(1); 1910 opacity: 1; 1911 } 1912 50% { 1913 -webkit-transform: scale(0.9); 1914 transform: scale(0.9); 1915 opacity: 0.7; 1916 } 1917 100% { 1918 -webkit-transform: scale(1); 1919 transform: scale(1); 1920 opacity: 1; 1921 } 1922 } 1923 1924 /* Rubberband */ 1925 @-webkit-keyframes jiggle { 1926 0% { 1927 -webkit-transform: scale3d(1, 1, 1); 1928 transform: scale3d(1, 1, 1); 1929 } 1930 30% { 1931 -webkit-transform: scale3d(1.25, 0.75, 1); 1932 transform: scale3d(1.25, 0.75, 1); 1933 } 1934 40% { 1935 -webkit-transform: scale3d(0.75, 1.25, 1); 1936 transform: scale3d(0.75, 1.25, 1); 1937 } 1938 50% { 1939 -webkit-transform: scale3d(1.15, 0.85, 1); 1940 transform: scale3d(1.15, 0.85, 1); 1941 } 1942 65% { 1943 -webkit-transform: scale3d(0.95, 1.05, 1); 1944 transform: scale3d(0.95, 1.05, 1); 1945 } 1946 75% { 1947 -webkit-transform: scale3d(1.05, 0.95, 1); 1948 transform: scale3d(1.05, 0.95, 1); 1949 } 1950 100% { 1951 -webkit-transform: scale3d(1, 1, 1); 1952 transform: scale3d(1, 1, 1); 1953 } 1954 } 1955 @keyframes jiggle { 1956 0% { 1957 -webkit-transform: scale3d(1, 1, 1); 1958 transform: scale3d(1, 1, 1); 1959 } 1960 30% { 1961 -webkit-transform: scale3d(1.25, 0.75, 1); 1962 transform: scale3d(1.25, 0.75, 1); 1963 } 1964 40% { 1965 -webkit-transform: scale3d(0.75, 1.25, 1); 1966 transform: scale3d(0.75, 1.25, 1); 1967 } 1968 50% { 1969 -webkit-transform: scale3d(1.15, 0.85, 1); 1970 transform: scale3d(1.15, 0.85, 1); 1971 } 1972 65% { 1973 -webkit-transform: scale3d(0.95, 1.05, 1); 1974 transform: scale3d(0.95, 1.05, 1); 1975 } 1976 75% { 1977 -webkit-transform: scale3d(1.05, 0.95, 1); 1978 transform: scale3d(1.05, 0.95, 1); 1979 } 1980 100% { 1981 -webkit-transform: scale3d(1, 1, 1); 1982 transform: scale3d(1, 1, 1); 1983 } 1984 } 1985 1986 1987 /******************************* 1988 Site Overrides 1989 *******************************/ 1990