animate.css (13369B)
1 /* Custom style for animate.css. Lines 1-17 moved to frontend/_animate.scss */ 2 3 @keyframes bounce { 4 from, 20%, 53%, 80%, to { 5 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 6 transform: translate3d(0,0,0); 7 } 8 9 40%, 43% { 10 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 11 transform: translate3d(0, -30px, 0); 12 } 13 14 70% { 15 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 16 transform: translate3d(0, -15px, 0); 17 } 18 19 90% { 20 transform: translate3d(0,-4px,0); 21 } 22 } 23 24 .bounce { 25 animation-name: bounce; 26 transform-origin: center bottom; 27 } 28 29 @keyframes flash { 30 from, 50%, to { 31 opacity: 1; 32 } 33 34 25%, 75% { 35 opacity: 0; 36 } 37 } 38 39 .flash { 40 animation-name: flash; 41 } 42 43 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 44 45 @keyframes pulse { 46 from { 47 transform: scale3d(1, 1, 1); 48 } 49 50 50% { 51 transform: scale3d(1.05, 1.05, 1.05); 52 } 53 54 to { 55 transform: scale3d(1, 1, 1); 56 } 57 } 58 59 .pulse { 60 animation-name: pulse; 61 } 62 63 @keyframes rubberBand { 64 from { 65 transform: scale3d(1, 1, 1); 66 } 67 68 30% { 69 transform: scale3d(1.25, 0.75, 1); 70 } 71 72 40% { 73 transform: scale3d(0.75, 1.25, 1); 74 } 75 76 50% { 77 transform: scale3d(1.15, 0.85, 1); 78 } 79 80 65% { 81 transform: scale3d(.95, 1.05, 1); 82 } 83 84 75% { 85 transform: scale3d(1.05, .95, 1); 86 } 87 88 to { 89 transform: scale3d(1, 1, 1); 90 } 91 } 92 93 .rubberBand { 94 animation-name: rubberBand; 95 } 96 97 @keyframes shake { 98 from, to { 99 transform: translate3d(0, 0, 0); 100 } 101 102 10%, 30%, 50%, 70%, 90% { 103 transform: translate3d(-10px, 0, 0); 104 } 105 106 20%, 40%, 60%, 80% { 107 transform: translate3d(10px, 0, 0); 108 } 109 } 110 111 .shake { 112 animation-name: shake; 113 } 114 115 @keyframes headShake { 116 0% { 117 transform: translateX(0); 118 } 119 120 6.5% { 121 transform: translateX(-6px) rotateY(-9deg); 122 } 123 124 18.5% { 125 transform: translateX(5px) rotateY(7deg); 126 } 127 128 31.5% { 129 transform: translateX(-3px) rotateY(-5deg); 130 } 131 132 43.5% { 133 transform: translateX(2px) rotateY(3deg); 134 } 135 136 50% { 137 transform: translateX(0); 138 } 139 } 140 141 .headShake { 142 animation-timing-function: ease-in-out; 143 animation-name: headShake; 144 } 145 146 @keyframes swing { 147 20% { 148 transform: rotate3d(0, 0, 1, 15deg); 149 } 150 151 40% { 152 transform: rotate3d(0, 0, 1, -10deg); 153 } 154 155 60% { 156 transform: rotate3d(0, 0, 1, 5deg); 157 } 158 159 80% { 160 transform: rotate3d(0, 0, 1, -5deg); 161 } 162 163 to { 164 transform: rotate3d(0, 0, 1, 0deg); 165 } 166 } 167 168 .swing { 169 transform-origin: top center; 170 animation-name: swing; 171 } 172 173 @keyframes tada { 174 from { 175 transform: scale3d(1, 1, 1); 176 } 177 178 10%, 20% { 179 transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 180 } 181 182 30%, 50%, 70%, 90% { 183 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 184 } 185 186 40%, 60%, 80% { 187 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 188 } 189 190 to { 191 transform: scale3d(1, 1, 1); 192 } 193 } 194 195 .tada { 196 animation-name: tada; 197 } 198 199 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 200 201 @keyframes wobble { 202 from { 203 transform: none; 204 } 205 206 15% { 207 transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 208 } 209 210 30% { 211 transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 212 } 213 214 45% { 215 transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 216 } 217 218 60% { 219 transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 220 } 221 222 75% { 223 transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 224 } 225 226 to { 227 transform: none; 228 } 229 } 230 231 .wobble { 232 animation-name: wobble; 233 } 234 235 @keyframes jello { 236 from, 11.1%, to { 237 transform: none; 238 } 239 240 22.2% { 241 transform: skewX(-12.5deg) skewY(-12.5deg); 242 } 243 244 33.3% { 245 transform: skewX(6.25deg) skewY(6.25deg); 246 } 247 248 44.4% { 249 transform: skewX(-3.125deg) skewY(-3.125deg); 250 } 251 252 55.5% { 253 transform: skewX(1.5625deg) skewY(1.5625deg); 254 } 255 256 66.6% { 257 transform: skewX(-0.78125deg) skewY(-0.78125deg); 258 } 259 260 77.7% { 261 transform: skewX(0.390625deg) skewY(0.390625deg); 262 } 263 264 88.8% { 265 transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 266 } 267 } 268 269 .jello { 270 animation-name: jello; 271 transform-origin: center; 272 } 273 274 @keyframes bounceIn { 275 from, 20%, 40%, 60%, 80%, to { 276 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 277 } 278 279 0% { 280 opacity: 0; 281 transform: scale3d(.3, .3, .3); 282 } 283 284 20% { 285 transform: scale3d(1.1, 1.1, 1.1); 286 } 287 288 40% { 289 transform: scale3d(.9, .9, .9); 290 } 291 292 60% { 293 opacity: 1; 294 transform: scale3d(1.03, 1.03, 1.03); 295 } 296 297 80% { 298 transform: scale3d(.97, .97, .97); 299 } 300 301 to { 302 opacity: 1; 303 transform: scale3d(1, 1, 1); 304 } 305 } 306 307 .bounceIn { 308 animation-name: bounceIn; 309 } 310 311 @keyframes bounceInDown { 312 from, 60%, 75%, 90%, to { 313 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 314 } 315 316 0% { 317 opacity: 0; 318 transform: translate3d(0, -3000px, 0); 319 } 320 321 60% { 322 opacity: 1; 323 transform: translate3d(0, 25px, 0); 324 } 325 326 75% { 327 transform: translate3d(0, -10px, 0); 328 } 329 330 90% { 331 transform: translate3d(0, 5px, 0); 332 } 333 334 to { 335 transform: none; 336 } 337 } 338 339 .bounceInDown { 340 animation-name: bounceInDown; 341 } 342 343 @keyframes bounceInLeft { 344 from, 60%, 75%, 90%, to { 345 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 346 } 347 348 0% { 349 opacity: 0; 350 transform: translate3d(-3000px, 0, 0); 351 } 352 353 60% { 354 opacity: 1; 355 transform: translate3d(25px, 0, 0); 356 } 357 358 75% { 359 transform: translate3d(-10px, 0, 0); 360 } 361 362 90% { 363 transform: translate3d(5px, 0, 0); 364 } 365 366 to { 367 transform: none; 368 } 369 } 370 371 .bounceInLeft { 372 animation-name: bounceInLeft; 373 } 374 375 @keyframes bounceInRight { 376 from, 60%, 75%, 90%, to { 377 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 378 } 379 380 from { 381 opacity: 0; 382 transform: translate3d(3000px, 0, 0); 383 } 384 385 60% { 386 opacity: 1; 387 transform: translate3d(-25px, 0, 0); 388 } 389 390 75% { 391 transform: translate3d(10px, 0, 0); 392 } 393 394 90% { 395 transform: translate3d(-5px, 0, 0); 396 } 397 398 to { 399 transform: none; 400 } 401 } 402 403 .bounceInRight { 404 animation-name: bounceInRight; 405 } 406 407 @keyframes bounceInUp { 408 from, 60%, 75%, 90%, to { 409 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 410 } 411 412 from { 413 opacity: 0; 414 transform: translate3d(0, 3000px, 0); 415 } 416 417 60% { 418 opacity: 1; 419 transform: translate3d(0, -20px, 0); 420 } 421 422 75% { 423 transform: translate3d(0, 10px, 0); 424 } 425 426 90% { 427 transform: translate3d(0, -5px, 0); 428 } 429 430 to { 431 transform: translate3d(0, 0, 0); 432 } 433 } 434 435 .bounceInUp { 436 animation-name: bounceInUp; 437 } 438 439 @keyframes fadeIn { 440 from { 441 opacity: 0; 442 } 443 444 to { 445 opacity: 1; 446 } 447 } 448 449 .fadeIn { 450 animation-name: fadeIn; 451 } 452 453 @keyframes fadeInDown { 454 from { 455 opacity: 0; 456 transform: translate3d(0, -100%, 0); 457 } 458 459 to { 460 opacity: 1; 461 transform: none; 462 } 463 } 464 465 .fadeInDown { 466 animation-name: fadeInDown; 467 } 468 469 @keyframes fadeInLeft { 470 from { 471 opacity: 0; 472 transform: translate3d(-100%, 0, 0); 473 } 474 475 to { 476 opacity: 1; 477 transform: none; 478 } 479 } 480 481 .fadeInLeft { 482 animation-name: fadeInLeft; 483 } 484 485 @keyframes fadeInRight { 486 from { 487 opacity: 0; 488 transform: translate3d(100%, 0, 0); 489 } 490 491 to { 492 opacity: 1; 493 transform: none; 494 } 495 } 496 497 .fadeInRight { 498 animation-name: fadeInRight; 499 } 500 501 @keyframes fadeInUp { 502 from { 503 opacity: 0; 504 transform: translate3d(0, 100%, 0); 505 } 506 507 to { 508 opacity: 1; 509 transform: none; 510 } 511 } 512 513 .fadeInUp { 514 animation-name: fadeInUp; 515 } 516 517 @keyframes lightSpeedIn { 518 from { 519 transform: translate3d(100%, 0, 0) skewX(-30deg); 520 opacity: 0; 521 } 522 523 60% { 524 transform: skewX(20deg); 525 opacity: 1; 526 } 527 528 80% { 529 transform: skewX(-5deg); 530 opacity: 1; 531 } 532 533 to { 534 transform: none; 535 opacity: 1; 536 } 537 } 538 539 .lightSpeedIn { 540 animation-name: lightSpeedIn; 541 animation-timing-function: ease-out; 542 } 543 544 @keyframes rotateIn { 545 from { 546 transform-origin: center; 547 transform: rotate3d(0, 0, 1, -200deg); 548 opacity: 0; 549 } 550 551 to { 552 transform-origin: center; 553 transform: none; 554 opacity: 1; 555 } 556 } 557 558 .rotateIn { 559 animation-name: rotateIn; 560 } 561 562 @keyframes rotateInDownLeft { 563 from { 564 transform-origin: left bottom; 565 transform: rotate3d(0, 0, 1, -45deg); 566 opacity: 0; 567 } 568 569 to { 570 transform-origin: left bottom; 571 transform: none; 572 opacity: 1; 573 } 574 } 575 576 .rotateInDownLeft { 577 animation-name: rotateInDownLeft; 578 } 579 580 @keyframes rotateInDownRight { 581 from { 582 transform-origin: right bottom; 583 transform: rotate3d(0, 0, 1, 45deg); 584 opacity: 0; 585 } 586 587 to { 588 transform-origin: right bottom; 589 transform: none; 590 opacity: 1; 591 } 592 } 593 594 .rotateInDownRight { 595 animation-name: rotateInDownRight; 596 } 597 598 @keyframes rotateInUpLeft { 599 from { 600 transform-origin: left bottom; 601 transform: rotate3d(0, 0, 1, 45deg); 602 opacity: 0; 603 } 604 605 to { 606 transform-origin: left bottom; 607 transform: none; 608 opacity: 1; 609 } 610 } 611 612 .rotateInUpLeft { 613 animation-name: rotateInUpLeft; 614 } 615 616 @keyframes rotateInUpRight { 617 from { 618 transform-origin: right bottom; 619 transform: rotate3d(0, 0, 1, -90deg); 620 opacity: 0; 621 } 622 623 to { 624 transform-origin: right bottom; 625 transform: none; 626 opacity: 1; 627 } 628 } 629 630 .rotateInUpRight { 631 animation-name: rotateInUpRight; 632 } 633 634 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 635 636 @keyframes rollIn { 637 from { 638 opacity: 0; 639 transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 640 } 641 642 to { 643 opacity: 1; 644 transform: none; 645 } 646 } 647 648 .rollIn { 649 animation-name: rollIn; 650 } 651 652 @keyframes zoomIn { 653 from { 654 opacity: 0; 655 transform: scale3d(.3, .3, .3); 656 } 657 658 50% { 659 opacity: 1; 660 } 661 } 662 663 .zoomIn { 664 animation-name: zoomIn; 665 } 666 667 @keyframes zoomInDown { 668 from { 669 opacity: 0; 670 transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 671 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 672 } 673 674 60% { 675 opacity: 1; 676 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 677 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 678 } 679 } 680 681 .zoomInDown { 682 animation-name: zoomInDown; 683 } 684 685 @keyframes zoomInLeft { 686 from { 687 opacity: 0; 688 transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 689 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 690 } 691 692 60% { 693 opacity: 1; 694 transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 695 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 696 } 697 } 698 699 .zoomInLeft { 700 animation-name: zoomInLeft; 701 } 702 703 @keyframes zoomInRight { 704 from { 705 opacity: 0; 706 transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 707 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 708 } 709 710 60% { 711 opacity: 1; 712 transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 713 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 714 } 715 } 716 717 .zoomInRight { 718 animation-name: zoomInRight; 719 } 720 721 @keyframes zoomInUp { 722 from { 723 opacity: 0; 724 transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 725 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 726 } 727 728 60% { 729 opacity: 1; 730 transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 731 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 732 } 733 } 734 735 .zoomInUp { 736 animation-name: zoomInUp; 737 } 738 739 @keyframes slideInDown { 740 from { 741 transform: translate3d(0, -100%, 0); 742 visibility: visible; 743 } 744 745 to { 746 transform: translate3d(0, 0, 0); 747 } 748 } 749 750 .slideInDown { 751 animation-name: slideInDown; 752 } 753 754 @keyframes slideInLeft { 755 from { 756 transform: translate3d(-100%, 0, 0); 757 visibility: visible; 758 } 759 760 to { 761 transform: translate3d(0, 0, 0); 762 } 763 } 764 765 .slideInLeft { 766 animation-name: slideInLeft; 767 } 768 769 @keyframes slideInRight { 770 from { 771 transform: translate3d(100%, 0, 0); 772 visibility: visible; 773 } 774 775 to { 776 transform: translate3d(0, 0, 0); 777 } 778 } 779 780 .slideInRight { 781 animation-name: slideInRight; 782 } 783 784 @keyframes slideInUp { 785 from { 786 transform: translate3d(0, 100%, 0); 787 visibility: visible; 788 } 789 790 to { 791 transform: translate3d(0, 0, 0); 792 } 793 } 794 795 .slideInUp { 796 animation-name: slideInUp; 797 }