1function download(filename) { 2 3 const animationCSSSourceCode = 4 `@charset "UTF-8"; 5 .animated { 6 animation-duration: 1s; 7 animation-fill-mode: both; 8 } 9 10 .animated.infinite { 11 animation-iteration-count: infinite; 12 } 13 14 .animated.hinge { 15 animation-duration: 2s; 16 } 17 18 .animated.flipOutX, 19 .animated.flipOutY, 20 .animated.bounceIn, 21 .animated.bounceOut { 22 animation-duration: .75s; 23 } 24 25 @keyframes bounce { 26 from, 20%, 53%, 80%, to { 27 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 28 transform: translate3d(0,0,0); 29 } 30 31 40%, 43% { 32 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 33 transform: translate3d(0, -30px, 0); 34 } 35 36 70% { 37 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 38 transform: translate3d(0, -15px, 0); 39 } 40 41 90% { 42 transform: translate3d(0,-4px,0); 43 } 44 } 45 46 .bounce { 47 animation-name: bounce; 48 transform-origin: center bottom; 49 } 50 51 @keyframes flash { 52 from, 50%, to { 53 opacity: 1; 54 } 55 56 25%, 75% { 57 opacity: 0; 58 } 59 } 60 61 .flash { 62 animation-name: flash; 63 } 64 65 66 @keyframes pulse { 67 from { 68 transform: scale3d(1, 1, 1); 69 } 70 71 50% { 72 transform: scale3d(1.05, 1.05, 1.05); 73 } 74 75 to { 76 transform: scale3d(1, 1, 1); 77 } 78 } 79 80 .pulse { 81 animation-name: pulse; 82 } 83 84 @keyframes rubberBand { 85 from { 86 transform: scale3d(1, 1, 1); 87 } 88 89 30% { 90 transform: scale3d(1.25, 0.75, 1); 91 } 92 93 40% { 94 transform: scale3d(0.75, 1.25, 1); 95 } 96 97 50% { 98 transform: scale3d(1.15, 0.85, 1); 99 } 100 101 65% { 102 transform: scale3d(.95, 1.05, 1); 103 } 104 105 75% { 106 transform: scale3d(1.05, .95, 1); 107 } 108 109 to { 110 transform: scale3d(1, 1, 1); 111 } 112 } 113 114 .rubberBand { 115 animation-name: rubberBand; 116 } 117 118 @keyframes shake { 119 from, to { 120 transform: translate3d(0, 0, 0); 121 } 122 123 10%, 30%, 50%, 70%, 90% { 124 transform: translate3d(-10px, 0, 0); 125 } 126 127 20%, 40%, 60%, 80% { 128 transform: translate3d(10px, 0, 0); 129 } 130 } 131 132 .shake { 133 animation-name: shake; 134 } 135 136 @keyframes headShake { 137 0% { 138 transform: translateX(0); 139 } 140 141 6.5% { 142 transform: translateX(-6px) rotateY(-9deg); 143 } 144 145 18.5% { 146 transform: translateX(5px) rotateY(7deg); 147 } 148 149 31.5% { 150 transform: translateX(-3px) rotateY(-5deg); 151 } 152 153 43.5% { 154 transform: translateX(2px) rotateY(3deg); 155 } 156 157 50% { 158 transform: translateX(0); 159 } 160 } 161 162 .headShake { 163 animation-timing-function: ease-in-out; 164 animation-name: headShake; 165 } 166 167 @keyframes swing { 168 20% { 169 transform: rotate3d(0, 0, 1, 15deg); 170 } 171 172 40% { 173 transform: rotate3d(0, 0, 1, -10deg); 174 } 175 176 60% { 177 transform: rotate3d(0, 0, 1, 5deg); 178 } 179 180 80% { 181 transform: rotate3d(0, 0, 1, -5deg); 182 } 183 184 to { 185 transform: rotate3d(0, 0, 1, 0deg); 186 } 187 } 188 189 .swing { 190 transform-origin: top center; 191 animation-name: swing; 192 } 193 194 @keyframes tada { 195 from { 196 transform: scale3d(1, 1, 1); 197 } 198 199 10%, 20% { 200 transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 201 } 202 203 30%, 50%, 70%, 90% { 204 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 205 } 206 207 40%, 60%, 80% { 208 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 209 } 210 211 to { 212 transform: scale3d(1, 1, 1); 213 } 214 } 215 216 .tada { 217 animation-name: tada; 218 } 219 220 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 221 222 @keyframes wobble { 223 from { 224 transform: none; 225 } 226 227 15% { 228 transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 229 } 230 231 30% { 232 transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 233 } 234 235 45% { 236 transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 237 } 238 239 60% { 240 transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 241 } 242 243 75% { 244 transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 245 } 246 247 to { 248 transform: none; 249 } 250 } 251 252 .wobble { 253 animation-name: wobble; 254 } 255 256 @keyframes jello { 257 from, 11.1%, to { 258 transform: none; 259 } 260 261 22.2% { 262 transform: skewX(-12.5deg) skewY(-12.5deg); 263 } 264 265 33.3% { 266 transform: skewX(6.25deg) skewY(6.25deg); 267 } 268 269 44.4% { 270 transform: skewX(-3.125deg) skewY(-3.125deg); 271 } 272 273 55.5% { 274 transform: skewX(1.5625deg) skewY(1.5625deg); 275 } 276 277 66.6% { 278 transform: skewX(-0.78125deg) skewY(-0.78125deg); 279 } 280 281 77.7% { 282 transform: skewX(0.390625deg) skewY(0.390625deg); 283 } 284 285 88.8% { 286 transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 287 } 288 } 289 290 .jello { 291 animation-name: jello; 292 transform-origin: center; 293 } 294 295 @keyframes bounceIn { 296 from, 20%, 40%, 60%, 80%, to { 297 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 298 } 299 300 0% { 301 opacity: 0; 302 transform: scale3d(.3, .3, .3); 303 } 304 305 20% { 306 transform: scale3d(1.1, 1.1, 1.1); 307 } 308 309 40% { 310 transform: scale3d(.9, .9, .9); 311 } 312 313 60% { 314 opacity: 1; 315 transform: scale3d(1.03, 1.03, 1.03); 316 } 317 318 80% { 319 transform: scale3d(.97, .97, .97); 320 } 321 322 to { 323 opacity: 1; 324 transform: scale3d(1, 1, 1); 325 } 326 } 327 328 .bounceIn { 329 animation-name: bounceIn; 330 } 331 332 @keyframes bounceInDown { 333 from, 60%, 75%, 90%, to { 334 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 335 } 336 337 0% { 338 opacity: 0; 339 transform: translate3d(0, -3000px, 0); 340 } 341 342 60% { 343 opacity: 1; 344 transform: translate3d(0, 25px, 0); 345 } 346 347 75% { 348 transform: translate3d(0, -10px, 0); 349 } 350 351 90% { 352 transform: translate3d(0, 5px, 0); 353 } 354 355 to { 356 transform: none; 357 } 358 } 359 360 .bounceInDown { 361 animation-name: bounceInDown; 362 } 363 364 @keyframes bounceInLeft { 365 from, 60%, 75%, 90%, to { 366 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 367 } 368 369 0% { 370 opacity: 0; 371 transform: translate3d(-3000px, 0, 0); 372 } 373 374 60% { 375 opacity: 1; 376 transform: translate3d(25px, 0, 0); 377 } 378 379 75% { 380 transform: translate3d(-10px, 0, 0); 381 } 382 383 90% { 384 transform: translate3d(5px, 0, 0); 385 } 386 387 to { 388 transform: none; 389 } 390 } 391 392 .bounceInLeft { 393 animation-name: bounceInLeft; 394 } 395 396 @keyframes bounceInRight { 397 from, 60%, 75%, 90%, to { 398 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 399 } 400 401 from { 402 opacity: 0; 403 transform: translate3d(3000px, 0, 0); 404 } 405 406 60% { 407 opacity: 1; 408 transform: translate3d(-25px, 0, 0); 409 } 410 411 75% { 412 transform: translate3d(10px, 0, 0); 413 } 414 415 90% { 416 transform: translate3d(-5px, 0, 0); 417 } 418 419 to { 420 transform: none; 421 } 422 } 423 424 .bounceInRight { 425 animation-name: bounceInRight; 426 } 427 428 @keyframes bounceInUp { 429 from, 60%, 75%, 90%, to { 430 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 431 } 432 433 from { 434 opacity: 0; 435 transform: translate3d(0, 3000px, 0); 436 } 437 438 60% { 439 opacity: 1;
440 transform: translate3d(0, -20px, 0); 441 } 442 443 75% { 444 transform: translate3d(0, 10px, 0); 445 } 446 447 90% { 448 transform: translate3d(0, -5px, 0); 449 } 450 451 to { 452 transform: translate3d(0, 0, 0); 453 } 454 } 455 456 .bounceInUp { 457 animation-name: bounceInUp; 458 } 459 460 @keyframes bounceOut { 461 20% { 462 transform: scale3d(.9, .9, .9); 463 } 464 465 50%, 55% { 466 opacity: 1; 467 transform: scale3d(1.1, 1.1, 1.1); 468 } 469 470 to { 471 opacity: 0; 472 transform: scale3d(.3, .3, .3); 473 } 474 } 475 476 .bounceOut { 477 animation-name: bounceOut; 478 } 479 480 @keyframes bounceOutDown { 481 20% { 482 transform: translate3d(0, 10px, 0); 483 } 484 485 40%, 45% { 486 opacity: 1; 487 transform: translate3d(0, -20px, 0); 488 } 489 490 to { 491 opacity: 0; 492 transform: translate3d(0, 2000px, 0); 493 } 494 } 495 496 .bounceOutDown { 497 animation-name: bounceOutDown; 498 } 499 500 @keyframes bounceOutLeft { 501 20% { 502 opacity: 1; 503 transform: translate3d(20px, 0, 0); 504 } 505 506 to { 507 opacity: 0; 508 transform: translate3d(-2000px, 0, 0); 509 } 510 } 511 512 .bounceOutLeft { 513 animation-name: bounceOutLeft; 514 } 515 516 @keyframes bounceOutRight { 517 20% { 518 opacity: 1; 519 transform: translate3d(-20px, 0, 0); 520 } 521 522 to { 523 opacity: 0; 524 transform: translate3d(2000px, 0, 0); 525 } 526 } 527 528 .bounceOutRight { 529 animation-name: bounceOutRight; 530 } 531 532 @keyframes bounceOutUp { 533 20% { 534 transform: translate3d(0, -10px, 0); 535 } 536 537 40%, 45% { 538 opacity: 1; 539 transform: translate3d(0, 20px, 0); 540 } 541 542 to { 543 opacity: 0; 544 transform: translate3d(0, -2000px, 0); 545 } 546 } 547 548 .bounceOutUp { 549 animation-name: bounceOutUp; 550 } 551 552 @keyframes fadeIn { 553 from { 554 opacity: 0; 555 } 556 557 to { 558 opacity: 1; 559 } 560 } 561 562 .fadeIn { 563 animation-name: fadeIn; 564 } 565 566 @keyframes fadeInDown { 567 from { 568 opacity: 0; 569 transform: translate3d(0, -100%, 0); 570 } 571 572 to { 573 opacity: 1; 574 transform: none; 575 } 576 } 577 578 .fadeInDown { 579 animation-name: fadeInDown; 580 } 581 582 @keyframes fadeInDownBig { 583 from { 584 opacity: 0; 585 transform: translate3d(0, -2000px, 0); 586 } 587 588 to { 589 opacity: 1; 590 transform: none; 591 } 592 } 593 594 .fadeInDownBig { 595 animation-name: fadeInDownBig; 596 } 597 598 @keyframes fadeInLeft { 599 from { 600 opacity: 0; 601 transform: translate3d(-100%, 0, 0); 602 } 603 604 to { 605 opacity: 1; 606 transform: none; 607 } 608 } 609 610 .fadeInLeft { 611 animation-name: fadeInLeft; 612 } 613 614 @keyframes fadeInLeftBig { 615 from { 616 opacity: 0; 617 transform: translate3d(-2000px, 0, 0); 618 } 619 620 to { 621 opacity: 1; 622 transform: none; 623 } 624 } 625 626 .fadeInLeftBig { 627 animation-name: fadeInLeftBig; 628 } 629 630 @keyframes fadeInRight { 631 from { 632 opacity: 0; 633 transform: translate3d(100%, 0, 0); 634 } 635 636 to { 637 opacity: 1; 638 transform: none; 639 } 640 } 641 642 .fadeInRight { 643 animation-name: fadeInRight; 644 } 645 646 @keyframes fadeInRightBig { 647 from { 648 opacity: 0; 649 transform: translate3d(2000px, 0, 0); 650 } 651 652 to { 653 opacity: 1; 654 transform: none; 655 } 656 } 657 658 .fadeInRightBig { 659 animation-name: fadeInRightBig; 660 } 661 662 @keyframes fadeInUp { 663 from { 664 opacity: 0; 665 transform: translate3d(0, 100%, 0); 666 } 667 668 to { 669 opacity: 1; 670 transform: none; 671 } 672 } 673 674 .fadeInUp { 675 animation-name: fadeInUp; 676 } 677 678 @keyframes fadeInUpBig { 679 from { 680 opacity: 0; 681 transform: translate3d(0, 2000px, 0); 682 } 683 684 to { 685 opacity: 1; 686 transform: none; 687 } 688 } 689 690 .fadeInUpBig { 691 animation-name: fadeInUpBig; 692 } 693 694 @keyframes fadeOut { 695 from { 696 opacity: 1; 697 } 698 699 to { 700 opacity: 0; 701 } 702 } 703 704 .fadeOut { 705 animation-name: fadeOut; 706 } 707 708 @keyframes fadeOutDown { 709 from { 710 opacity: 1; 711 } 712 713 to { 714 opacity: 0; 715 transform: translate3d(0, 100%, 0); 716 } 717 } 718 719 .fadeOutDown { 720 animation-name: fadeOutDown; 721 } 722 723 @keyframes fadeOutDownBig { 724 from { 725 opacity: 1; 726 } 727 728 to { 729 opacity: 0; 730 transform: translate3d(0, 2000px, 0); 731 } 732 } 733 734 .fadeOutDownBig { 735 animation-name: fadeOutDownBig; 736 } 737 738 @keyframes fadeOutLeft { 739 from { 740 opacity: 1; 741 } 742 743 to { 744 opacity: 0; 745 transform: translate3d(-100%, 0, 0); 746 } 747 } 748 749 .fadeOutLeft { 750 animation-name: fadeOutLeft; 751 } 752 753 @keyframes fadeOutLeftBig { 754 from { 755 opacity: 1; 756 } 757 758 to { 759 opacity: 0; 760 transform: translate3d(-2000px, 0, 0); 761 } 762 } 763 764 .fadeOutLeftBig { 765 animation-name: fadeOutLeftBig; 766 } 767 768 @keyframes fadeOutRight { 769 from { 770 opacity: 1; 771 } 772 773 to { 774 opacity: 0; 775 transform: translate3d(100%, 0, 0); 776 } 777 } 778 779 .fadeOutRight { 780 animation-name: fadeOutRight; 781 } 782 783 @keyframes fadeOutRightBig { 784 from { 785 opacity: 1; 786 } 787 788 to { 789 opacity: 0; 790 transform: translate3d(2000px, 0, 0); 791 } 792 } 793 794 .fadeOutRightBig { 795 animation-name: fadeOutRightBig; 796 } 797 798 @keyframes fadeOutUp { 799 from { 800 opacity: 1; 801 } 802 803 to { 804 opacity: 0; 805 transform: translate3d(0, -100%, 0); 806 } 807 } 808 809 .fadeOutUp { 810 animation-name: fadeOutUp; 811 } 812 813 @keyframes fadeOutUpBig { 814 from { 815 opacity: 1; 816 } 817 818 to { 819 opacity: 0; 820 transform: translate3d(0, -2000px, 0); 821 } 822 } 823 824 .fadeOutUpBig { 825 animation-name: fadeOutUpBig; 826 } 827 828 @keyframes flip { 829 from { 830 transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 831 animation-timing-function: ease-out; 832 } 833 834 40% { 835 transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 836 animation-timing-function: ease-out; 837 } 838 839 50% { 840 transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 841 animation-timing-function: ease-in; 842 } 843 844 80% { 845 transform: perspective(400px) scale3d(.95, .95, .95); 846 animation-timing-function: ease-in; 847 } 848 849 to { 850 transform: perspective(400px); 851 animation-timing-function: ease-in; 852 } 853 } 854 855 .animated.flip { 856 -webkit-backface-visibility: visible; 857 backface-visibility: visible; 858 animation-name: flip; 859 } 860 861 @keyframes flipInX { 862 from { 863 transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 864 animation-timing-function: ease-in; 865 opacity: 0; 866 } 867 868 40% { 869 transform: perspective(400px) rotate3d(1, 0, 0, -20
869deg); 870 animation-timing-function: ease-in; 871 } 872 873 60% { 874 transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 875 opacity: 1; 876 } 877 878 80% { 879 transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 880 } 881 882 to { 883 transform: perspective(400px); 884 } 885 } 886 887 .flipInX { 888 -webkit-backface-visibility: visible !important; 889 backface-visibility: visible !important; 890 animation-name: flipInX; 891 } 892 893 @keyframes flipInY { 894 from { 895 transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 896 animation-timing-function: ease-in; 897 opacity: 0; 898 } 899 900 40% { 901 transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 902 animation-timing-function: ease-in; 903 } 904 905 60% { 906 transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 907 opacity: 1; 908 } 909 910 80% { 911 transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 912 } 913 914 to { 915 transform: perspective(400px); 916 } 917 } 918 919 .flipInY { 920 -webkit-backface-visibility: visible !important; 921 backface-visibility: visible !important; 922 animation-name: flipInY; 923 } 924 925 @keyframes flipOutX { 926 from { 927 transform: perspective(400px); 928 } 929 930 30% { 931 transform: perspective(400px) rotate3d(1, 0, 0, -20
931deg); 932 opacity: 1; 933 } 934 935 to { 936 transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 937 opacity: 0; 938 } 939 } 940 941 .flipOutX { 942 animation-name: flipOutX; 943 -webkit-backface-visibility: visible !important; 944 backface-visibility: visible !important; 945 } 946 947 @keyframes flipOutY { 948 from { 949 transform: perspective(400px); 950 } 951 952 30% { 953 transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 954 opacity: 1; 955 } 956 957 to { 958 transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 959 opacity: 0; 960 } 961 } 962 963 .flipOutY { 964 -webkit-backface-visibility: visible !important; 965 backface-visibility: visible !important; 966 animation-name: flipOutY; 967 } 968 969 @keyframes lightSpeedIn { 970 from { 971 transform: translate3d(100%, 0, 0) skewX(-30deg); 972 opacity: 0; 973 } 974 975 60% { 976 transform: skewX(20deg); 977 opacity: 1; 978 } 979 980 80% { 981 transform: skewX(-5deg); 982 opacity: 1; 983 } 984 985 to { 986 transform: none; 987 opacity: 1; 988 } 989 } 990 991 .lightSpeedIn { 992 animation-name: lightSpeedIn; 993 animation-timing-function: ease-out; 994 } 995 996 @keyframes lightSpeedOut { 997 from { 998 opacity: 1; 999 } 1000 1001 to { 1002 transform: translate3d(100%, 0, 0) skewX(30deg); 1003 opacity: 0; 1004 } 1005 } 1006 1007 .lightSpeedOut { 1008 animation-name: lightSpeedOut; 1009 animation-timing-function: ease-in; 1010 } 1011 1012 @keyframes rotateIn { 1013 from { 1014 transform-origin: center; 1015 transform: rotate3d(0, 0, 1, -200deg); 1016 opacity: 0; 1017 } 1018 1019 to { 1020 transform-origin: center; 1021 transform: none; 1022 opacity: 1; 1023 } 1024 } 1025 1026 .rotateIn { 1027 animation-name: rotateIn; 1028 } 1029 1030 @keyframes rotateInDownLeft { 1031 from { 1032 transform-origin: left bottom; 1033 transform: rotate3d(0, 0, 1, -45deg); 1034 opacity: 0; 1035 } 1036 1037 to { 1038 transform-origin: left bottom; 1039 transform: none; 1040 opacity: 1; 1041 } 1042 } 1043 1044 .rotateInDownLeft { 1045 animation-name: rotateInDownLeft; 1046 } 1047 1048 @keyframes rotateInDownRight { 1049 from { 1050 transform-origin: right bottom; 1051 transform: rotate3d(0, 0, 1, 45deg); 1052 opacity: 0; 1053 } 1054 1055 to { 1056 transform-origin: right bottom; 1057 transform: none; 1058 opacity: 1; 1059 } 1060 } 1061 1062 .rotateInDownRight { 1063 animation-name: rotateInDownRight; 1064 } 1065 1066 @keyframes rotateInUpLeft { 1067 from { 1068 transform-origin: left bottom; 1069 transform: rotate3d(0, 0, 1, 45deg); 1070 opacity: 0; 1071 } 1072 1073 to { 1074 transform-origin: left bottom; 1075 transform: none; 1076 opacity: 1; 1077 } 1078 } 1079 1080 .rotateInUpLeft { 1081 animation-name: rotateInUpLeft; 1082 } 1083 1084 @keyframes rotateInUpRight { 1085 from { 1086 transform-origin: right bottom; 1087 transform: rotate3d(0, 0, 1, -90deg); 1088 opacity: 0; 1089 } 1090 1091 to { 1092 transform-origin: right bottom; 1093 transform: none; 1094 opacity: 1; 1095 } 1096 } 1097 1098 .rotateInUpRight { 1099 animation-name: rotateInUpRight; 1100 } 1101 1102 @keyframes rotateOut { 1103 from { 1104 transform-origin: center; 1105 opacity: 1; 1106 } 1107 1108 to { 1109 transform-origin: center; 1110 transform: rotate3d(0, 0, 1, 200deg); 1111 opacity: 0; 1112 } 1113 } 1114 1115 .rotateOut { 1116 animation-name: rotateOut; 1117 } 1118 1119 @keyframes rotateOutDownLeft { 1120 from { 1121 transform-origin: left bottom; 1122 opacity: 1; 1123 } 1124 1125 to { 1126 transform-origin: left bottom; 1127 transform: rotate3d(0, 0, 1, 45deg); 1128 opacity: 0; 1129 } 1130 } 1131 1132 .rotateOutDownLeft { 1133 animation-name: rotateOutDownLeft; 1134 } 1135 1136 @keyframes rotateOutDownRight { 1137 from { 1138 transform-origin: right bottom; 1139 opacity: 1; 1140 } 1141 1142 to { 1143 transform-origin: right bottom; 1144 transform: rotate3d(0, 0, 1, -45deg); 1145 opacity: 0; 1146 } 1147 } 1148 1149 .rotateOutDownRight { 1150 animation-name: rotateOutDownRight; 1151 } 1152 1153 @keyframes rotateOutUpLeft { 1154 from { 1155 transform-origin: left bottom; 1156 opacity: 1; 1157 } 1158 1159 to { 1160 transform-origin: left bottom; 1161 transform: rotate3d(0, 0, 1, -45deg); 1162 opacity: 0; 1163 } 1164 } 1165 1166 .rotateOutUpLeft { 1167 animation-name: rotateOutUpLeft; 1168 } 1169 1170 @keyframes rotateOutUpRight { 1171 from { 1172 transform-origin: right bottom; 1173 opacity: 1; 1174 } 1175 1176 to { 1177 transform-origin: right bottom; 1178 transform: rotate3d(0, 0, 1, 90deg); 1179 opacity: 0; 1180 } 1181 } 1182 1183 .rotateOutUpRight { 1184 animation-name: rotateOutUpRight; 1185 } 1186 1187 @keyframes hinge { 1188 0% { 1189 transform-origin: top left; 1190 animation-timing-function: ease-in-out; 1191 } 1192 1193 20%, 60% { 1194 transform: rotate3d(0, 0, 1, 80deg); 1195 transform-origin: top left; 1196 animation-timing-function: ease-in-out; 1197 } 1198 1199 40%, 80% { 1200 transform: rotate3d(0, 0, 1, 60deg); 1201 transform-origin: top left; 1202 animation-timing-function: ease-in-out; 1203 opacity: 1; 1204 } 1205 1206 to { 1207 transform: translate3d(0, 700px, 0); 1208 opacity: 0; 1209 } 1210 } 1211 1212 .hinge { 1213 animation-name: hinge; 1214 } 1215 1216 @keyframes jackInTheBox { 1217 from { 1218 opacity: 0; 1219 transform: scale(0.1) rotate(30deg); 1220 transform-origin: center bottom; 1221 } 1222 1223 50% { 1224 transform: rotate(-10deg); 1225 } 1226 1227 70% { 1228 transform: rotate(3deg); 1229 } 1230 1231 to { 1232 opacity: 1; 1233 transform: scale(1); 1234 } 1235 } 1236 1237 .jackInTheBox { 1238 animation-name: jackInTheBox; 1239 } 1240 1241 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 1242 1243 @keyframes rollIn { 1244 from { 1245 opacity: 0; 1246 transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 1247 } 1248 1249 to { 1250 opacity: 1; 1251 transform: none; 1252 } 1253 } 1254 1255 .rollIn { 1256 animation-name: rollIn; 1257 } 1258 1259 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 1260 1261 @keyframes rollOut { 1262 from { 1263 opacity: 1; 1264 } 1265 1266 to { 1267 opacity: 0; 1268 transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 1269 } 1270 } 1271 1272 .rollOut { 1273 animation-name: rollOut; 1274 } 1275 1276 @keyframes zoomIn { 1277 from { 1278 opacity: 0; 1279 transform: scale3d(.3, .3, .3); 1280 } 1281 1282 50% { 1283 opacity: 1; 1284 } 1285 } 1286 1287 .zoomIn { 1288 animation-name: zoomIn; 1289 } 1290 1291 @keyframes zoomInDown { 1292 from { 1293 opacity: 0; 1294 transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 1295 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1296 } 1297 1298 60% { 1299 opacity: 1; 1300 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 1301 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1302 } 1303 } 1304 1305 .zoomInDown { 1306 animation-name: zoomInDown; 1307 } 1308 1309 @keyframes zoomInLeft { 1310 from { 1311 opacity: 0; 1312 transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 1313 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1314 } 1315 1316 60% { 1317 opacity: 1; 1318 transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 1319 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1320 } 1321 } 1322 1323 .zoomInLeft { 1324 animation-name: zoomInLeft; 1325 } 1326 1327 @keyframes zoomInRight { 1328 from { 1329 opacity: 0; 1330 transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 1331 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1332 } 1333 1334 60% { 1335 opacity: 1; 1336 transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 1337 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1338 } 1339 } 1340 1341 .zoomInRight { 1342 animation-name: zoomInRight; 1343 } 1344 1345 @keyframes zoomInUp { 1346 from { 1347 opacity: 0; 1348 transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 1349 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1350 } 1351 1352 60% { 1353 opacity: 1; 1354 transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 1355 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1356 } 1357 } 1358 1359 .zoomInUp { 1360 animation-name: zoomInUp; 1361 } 1362 1363 @keyframes zoomOut { 1364 from { 1365 opacity: 1; 1366 } 1367 1368 50% { 1369 opacity: 0; 1370 transform: scale3d(.3, .3, .3); 1371 } 1372 1373 to { 1374 opacity: 0; 1375 } 1376 } 1377 1378 .zoomOut { 1379 animation-name: zoomOut; 1380 } 1381 1382 @keyframes zoomOutDown { 1383 40% { 1384 opacity: 1; 1385 transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 1386 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1387 } 1388 1389 to { 1390 opacity: 0; 1391 transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 1392 transform-origin: center bottom; 1393 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1394 } 1395 } 1396 1397 .zoomOutDown { 1398 animation-name: zoomOutDown; 1399 } 1400 1401 @keyframes zoomOutLeft { 1402 40% { 1403 opacity: 1; 1404 transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 1405 } 1406 1407 to { 1408 opacity: 0;
1409 transform: scale(.1) translate3d(-2000px, 0, 0); 1410 transform-origin: left center; 1411 } 1412 } 1413 1414 .zoomOutLeft { 1415 animation-name: zoomOutLeft; 1416 } 1417 1418 @keyframes zoomOutRight { 1419 40% { 1420 opacity: 1; 1421 transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 1422 } 1423 1424 to { 1425 opacity: 0; 1426 transform: scale(.1) translate3d(2000px, 0, 0); 1427 transform-origin: right center; 1428 } 1429 } 1430 1431 .zoomOutRight { 1432 animation-name: zoomOutRight; 1433 } 1434 1435 @keyframes zoomOutUp { 1436 40% { 1437 opacity: 1; 1438 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 1439 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1440 } 1441 1442 to { 1443 opacity: 0; 1444 transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 1445 transform-origin: center bottom; 1446 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1447 } 1448 } 1449 1450 .zoomOutUp { 1451 animation-name: zoomOutUp; 1452 } 1453 1454 @keyframes slideInDown { 1455 from { 1456 transform: translate3d(0, -100%, 0); 1457 visibility: visible; 1458 } 1459 1460 to { 1461 transform: translate3d(0, 0, 0); 1462 } 1463 } 1464 1465 .slideInDown { 1466 animation-name: slideInDown; 1467 } 1468 1469 @keyframes slideInLeft { 1470 from { 1471 transform: translate3d(-100%, 0, 0); 1472 visibility: visible; 1473 } 1474 1475 to { 1476 transform: translate3d(0, 0, 0); 1477 } 1478 } 1479 1480 .slideInLeft { 1481 animation-name: slideInLeft; 1482 } 1483 1484 @keyframes slideInRight { 1485 from { 1486 transform: translate3d(100%, 0, 0); 1487 visibility: visible; 1488 } 1489 1490 to { 1491 transform: translate3d(0, 0, 0); 1492 } 1493 } 1494 1495 .slideInRight { 1496 animation-name: slideInRight; 1497 } 1498 1499 @keyframes slideInUp { 1500 from { 1501 transform: translate3d(0, 100%, 0); 1502 visibility: visible; 1503 } 1504 1505 to { 1506 transform: translate3d(0, 0, 0); 1507 } 1508 } 1509 1510 .slideInUp { 1511 animation-name: slideInUp; 1512 } 1513 1514 @keyframes slideOutDown { 1515 from { 1516 transform: translate3d(0, 0, 0); 1517 } 1518 1519 to { 1520 visibility: hidden; 1521 transform: translate3d(0, 100%, 0); 1522 } 1523 } 1524 1525 .slideOutDown { 1526 animation-name: slideOutDown; 1527 } 1528 1529 @keyframes slideOutLeft { 1530 from { 1531 transform: translate3d(0, 0, 0); 1532 } 1533 1534 to { 1535 visibility: hidden; 1536 transform: translate3d(-100%, 0, 0); 1537 } 1538 } 1539 1540 .slideOutLeft { 1541 animation-name: slideOutLeft; 1542 } 1543 1544 @keyframes slideOutRight { 1545 from { 1546 transform: translate3d(0, 0, 0); 1547 } 1548 1549 to { 1550 visibility: hidden; 1551 transform: translate3d(100%, 0, 0); 1552 } 1553 } 1554 1555 .slideOutRight { 1556 animation-name: slideOutRight; 1557 } 1558 1559 @keyframes slideOutUp { 1560 from { 1561 transform: translate3d(0, 0, 0); 1562 } 1563 1564 to { 1565 visibility: hidden; 1566 transform: translate3d(0, -100%, 0); 1567 } 1568 } 1569 1570 .slideOutUp { 1571 animation-name: slideOutUp; 1572 }`; 1573 1574 1575 let modalCSSSourceCode = document.getElementById('modalCssCodeBox').value; 1576 let codeToDownload = ` 1577// The MIT License (MIT) 1578 1579// modal.js | Copyright (c) 2017 Shahzaib Khalid | www.shahzaibkhalid.com 1580 1581// Permission is hereby granted, free of charge, to any person obtaining a copy 1582// of this software and associated documentation files (the "Software"), to deal 1583// in the Software without restriction, including without limitation the rights 1584// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 1585// copies of the Software, and to permit persons to whom the Software is 1586// furnished to do so, subject to the following conditions: 1587 1588// The above copyright notice and this permission notice shall be included in 1589// all copies or substantial portions of the Software. 1590 1591// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 1592// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 1593// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 1594// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 1595// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
1596// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 1597// THE SOFTWARE. 1598 const head = document.getElementsByTagName('head')[0]; 1599 const animationsCSSStyleTag = document.createElement('style'); 1600 const modalCSSStyleTag = document.createElement('style'); 1601 let classesToHide; 1602 let classesToRetainOriginal; 1603 let modal, modalContent; 1604 1605 /* 1606 This valuesObj is only for your reference for what you've chosen when you downloaded from website. 1607 Changing this won't effect anything. Please refer comments below to modify: 1608 1) HTML inside the modal 1609 2) Input CSS animation tag, e.g. bounceInDown (at 2 places) 1610 3) Output CSS animation name, e.g. bounceOutDown (at 1 place) 1611 */ 1612 1613 let valuesObj = { 1614 $modalHTML: ${'`' + document.getElementById('modalHTMLBox').value + '`'}, 1615 $inputAnimation: '${document.getElementById('inAnim').options[document.getElementById('inAnim').selectedIndex].value}', 1616 $outputAnimation: '${document.getElementById('outAnim').options[document.getElementById('outAnim').selectedIndex].value}', 1617 $modalCSS: ${'`' + modalCSSSourceCode + '`'} 1618 }; 1619 1620 let $animationCSS = ${'`' + animationCSSSourceCode + '`'}; 1621 animationsCSSStyleTag.innerHTML = $animationCSS; 1622 document.head.appendChild(animationsCSSStyleTag); 1623 modalCSSStyleTag.id = 'modalCSSID'; 1624 modalCSSStyleTag.innerHTML = valuesObj.$modalCSS; 1625 document.head.appendChild(modalCSSStyleTag); 1626 1627 let openModal = function() { 1628 document.body.style.overflow = "hidden"; 1629 if(document.querySelector('.modal') !== null && document.querySelector('.modal').parentNode === document.body) { 1630 document.querySelector('.modal').parentNode.removeChild(document.querySelector('.modal')); 1631 } 1632 1633 //HTML inside the modal and Input CSS animation tag 1634 1635 document.body.innerHTML += 1636 ${'`'}<div class="modal" id="myModal"> 1637 <div class="modal-content-area animated ${document.getElementById('inAnim').options[document.getElementById('inAnim').selectedIndex].value}"> 1638 <i class="close-button" aria-hidden="true">✖</i> 1639 ${document.getElementById('modalHTMLBox').value} 1640 </div> 1641 </div>${'`'}; 1642 1643 //Output CSS animation name 1644 1645 classesToHide = ['modal-content-area', 'animated', '${document.getElementById('outAnim').options[document.getElementById('outAnim').selectedIndex].value}']; 1646 1647 //Input CSS animation tag 1648 1649 classesToRetainOriginal = ['modal-content-area', 'animated', '${document.getElementById('inAnim').options[document.getElementById('inAnim').selectedIndex].value}']; 1650 modal = document.getElementById('myModal'); 1651 modalContent = document.querySelector('.modal-content-area'); 1652 1653 document.getElementsByClassName('close-button')[0].addEventListener('click', () => { 1654 animateToHide(); 1655 }); 1656 modal.style.display = "block"; 1657 } 1658 1659 window.addEventListener('click', (event) => { 1660 if (event.target === modal) { 1661 animateToHide(); 1662 } 1663 }); 1664 1665 function animateToHide() { 1666 modalContent.className = ''; 1667 modalContent.classList.add(...classesToHide); 1668 window.setTimeout(function () { 1669 modal.style.display = "none"; 1670 retainToOriginal(); 1671 }, 700); 1672 } 1673 1674 function retainToOriginal() { 1675 modalContent.className = ''; 1676 modalContent.classList.add(...classesToRetainOriginal); 1677 document.body.style.overflow = "auto"; 1678 }`; 1679 1680 let element = document.createElement('a'); 1681 element.setAttribute('href', 'data:text/javascript;charset=utf-8,' + encodeURIComponent(codeToDownload)); 1682 element.setAttribute('download', filename); 1683 element.style.display = 'none'; 1684 document.body.appendChild(element); 1685 element.click(); 1686 document.body.removeChild(element); 1687 } 1688
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.