CSS   30

animate css

Guest on 22nd June 2022 02:28:56 PM

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

Raw Paste


Login or Register to edit or fork this paste. It's free.