HTML之CSS Animation 属性常用动画

• 引入下面的样式表后
  -webkit-animation: tada 1s ease 0.3s infinite both;
• -webkit-animation: name duration timing-function delay iteration_count direction
• animation 各个参数详细用法请看
  https://www.w3school.com.cn/css/css3_animations.asp
• cubic-bezier 生成器
  https://cubic-bezier.com

•    /*
   
   ====进入====
   淡入：fadeIn
   翻转进入：flipInY
   中心弹入：bounceIn 
   中心放大：zoomIn
   翻转进入：rollIn
   光速进入：lightSpeedIn
   
   移入，从左向右：fadeInLeft
   移入，从上向下：fadeInDown 
   移入，从右向左：fadeInRight
   移入，从下向上：fadeInUp
   
   弹入，从左向右：bounceInLeft
   弹入，从上向下：bounceInDown 
   弹入，从右向左：bounceInRight
   弹入，从下向上：bounceInUp
   
   ========强调======
   摇摆：wobble 
   抖动：rubberBand
   旋转：rotateIn
   翻转：flip 
   悬摆：swing
   放大抖动：tada 
   倾斜摆动：jello 
   
   =========退出===========
   淡出：fadeOut 
   翻转消失：flipOutY 
   中心消失：bounceOut 
   翻滚退出：rollOut 
   光速退出：lightSpeedOut
   
   */
    
    @-webkit-keyframes rollIn { 0% {
   opacity:0;
   -webkit-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
   transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
   }
   100% {
   opacity:1;
   -webkit-transform:none;
   transform:none
   }
   }
   @keyframes rollIn { 0% {
   opacity:0;
   -webkit-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
   transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
   }
   100% {
   opacity:1;
   -webkit-transform:none;
   transform:none
   }
   }
   @-webkit-keyframes lightSpeedIn { 0% {
   -webkit-transform:translate3d(100%, 0, 0) skewX(-30deg);
   transform:translate3d(100%, 0, 0) skewX(-30deg);
   opacity:0
   }
   60% {
   -webkit-transform:skewX(20deg);
   transform:skewX(20deg);
   opacity:1
   }
   80% {
   -webkit-transform:skewX(-5deg);
   transform:skewX(-5deg);
   opacity:1
   }
   100% {
   -webkit-transform:none;
   transform:none;
   opacity:1
   }
   }
   @keyframes lightSpeedIn { 0% {
   -webkit-transform:translate3d(100%, 0, 0) skewX(-30deg);
   transform:translate3d(100%, 0, 0) skewX(-30deg);
   opacity:0
   }
   60% {
   -webkit-transform:skewX(20deg);
   transform:skewX(20deg);
   opacity:1
   }
   80% {
   -webkit-transform:skewX(-5deg);
   transform:skewX(-5deg);
   opacity:1
   }
   100% {
   -webkit-transform:none;
   transform:none;
   opacity:1
   }
   }
    @-webkit-keyframes fadeInLeft { 0% {
   opacity:0;
   -webkit-transform:translate3d(-100%, 0, 0);
   transform:translate3d(-100%, 0, 0)
   }
   100% {
   opacity:1;
   -webkit-transform:none;
   transform:none
   }
   }
   @keyframes fadeInLeft { 0% {
   opacity:0;
   -webkit-transform:translate3d(-100%, 0, 0);
   transform:translate3d(-100%, 0, 0)
   }
   100% {
   opacity:1;
   -webkit-transform:none;
   transform:none
   }
   }
    @-webkit-keyframes fadeInRight { 0% {
   opacity:0;
   -webkit-transform:translate3d(100%, 0, 0);
   transform:translate3d(100%, 0, 0)
   }
   100% {
   opacity:1;
   transform:none
   }
   }
   @keyframes fadeInRight { 0% {
   opacity:0;
   -webkit-transform:translate3d(100%, 0, 0);
   transform:translate3d(100%, 0, 0)
   }
   100% {
   opacity:1;
   -webkit-transform:none;
   transform:none
   }
   }
    @-webkit-keyframes fadeInUp { 0% {
   opacity:0;
   -webkit-transform:translate3d(0, 100%, 0);
   transform:translate3d(0, 100%, 0)
   }
   100% {
   opacity:1;
   -webkit-transform:none;
   transform:none
   }
   }
   @keyframes fadeInUp { 0% {
   opacity:0;
   -webkit-transform:translate3d(0, 100%, 0);
   -ms-transform:translate3d(0, 100%, 0);
   transform:translate3d(0, 100%, 0)
   }
   100% {
   opacity:1;
   -webkit-transform:none;
   -ms-transform:none;
   transform:none
   }
   }
    @-webkit-keyframes fadeOutDown { 0% {
   opacity:1
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(0, 100%, 0);
   transform:translate3d(0, 100%, 0)
   }
   }
   @keyframes fadeOutDown { 0% {
   opacity:1
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(0, 100%, 0);
   transform:translate3d(0, 100%, 0)
   }
   }
    @-webkit-keyframes fadeOutLeft { 0% {
   opacity:1
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(-100%, 0, 0);
   transform:translate3d(-100%, 0, 0)
   }
   }
   @keyframes fadeOutLeft { 0% {
   opacity:1
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(-100%, 0, 0);
   transform:translate3d(-100%, 0, 0)
   }
   }
    @-webkit-keyframes fadeOutRight { 0% {
   opacity:1
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(100%, 0, 0);
   transform:translate3d(100%, 0, 0)
   }
   }
   @keyframes fadeOutRight { 0% {
   opacity:1
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(100%, 0, 0);
   transform:translate3d(100%, 0, 0)
   }
   }
    @-webkit-keyframes fadeOutUp { 0% {
   opacity:1
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(0, -100%, 0);
   transform:translate3d(0, -100%, 0)
   }
   }
   @keyframes fadeOutUp { 0% {
   opacity:1
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(0, -100%, 0);
   transform:translate3d(0, -100%, 0)
   }
   }
    @-webkit-keyframes swing { 20% {
   -webkit-transform:rotate3d(0, 0, 1, 15deg);
   transform:rotate3d(0, 0, 1, 15deg)
   }
   40% {
   -webkit-transform:rotate3d(0, 0, 1, -10deg);
   transform:rotate3d(0, 0, 1, -10deg)
   }
   60% {
   -webkit-transform:rotate3d(0, 0, 1, 5deg);
   transform:rotate3d(0, 0, 1, 5deg)
   }
   80% {
   -webkit-transform:rotate3d(0, 0, 1, -5deg);
   transform:rotate3d(0, 0, 1, -5deg)
   }
   100% {
   -webkit-transform:rotate3d(0, 0, 1, 0deg);
   transform:rotate3d(0, 0, 1, 0deg)
   }
   }
   @keyframes swing { 20% {
   -webkit-transform:rotate3d(0, 0, 1, 15deg);
   transform:rotate3d(0, 0, 1, 15deg)
   }
   40% {
   -webkit-transform:rotate3d(0, 0, 1, -10deg);
   transform:rotate3d(0, 0, 1, -10deg)
   }
   60% {
   -webkit-transform:rotate3d(0, 0, 1, 5deg);
   transform:rotate3d(0, 0, 1, 5deg)
   }
   80% {
   -webkit-transform:rotate3d(0, 0, 1, -5deg);
   transform:rotate3d(0, 0, 1, -5deg)
   }
   100% {
   -webkit-transform:rotate3d(0, 0, 1, 0deg);
   transform:rotate3d(0, 0, 1, 0deg)
   }
   }
    @-webkit-keyframes wobble { 0% {
   -webkit-transform:none;
   transform:none
   }
   15% {
   -webkit-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
   transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
   }
   30% {
   -webkit-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
   transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
   }
   45% {
   -webkit-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
   transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
   }
   60% {
   -webkit-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
   transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
   }
   75% {
   -webkit-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
   transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
   }
   100% {
   -webkit-transform:none;
   transform:none
   }
   }
   @keyframes wobble { 0% {
   -webkit-transform:none;
   transform:none
   }
   15% {
   -webkit-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
   transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
   }
   30% {
   -webkit-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
   transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
   }
   45% {
   -webkit-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
   transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
   }
   60% {
   -webkit-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
   transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
   }
   75% {
   -webkit-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
   transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
   }
   100% {
   -webkit-transform:none;
   transform:none
   }
   }
    @-webkit-keyframes rotateIn { from {
   -webkit-transform:rotate(0deg)
   }
   to { -webkit-transform: rotate(360deg) }
   }
   @-moz-keyframes rotateIn { from {
   -moz-transform:rotate(0deg)
   }
   to { -moz-transform: rotate(359deg) }
   }
   @-o-keyframes rotateIn { from {
   -o-transform:rotate(0deg)
   }
   to { -o-transform: rotate(359deg) }
   }
   @keyframes rotateIn { from {
   transform:rotate(0deg)
   }
   to { transform: rotate(359deg) }
   }
    @-webkit-keyframes fadeOut { 0% {
   opacity:1
   }
   100% {
   opacity:0
   }
   }
   @keyframes fadeOut { 0% {
   opacity:1
   }
   100% {
   opacity:0
   }
   }
    @-webkit-keyframes flip { 0% {
   -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -360deg);
   transform:perspective(400px) rotate3d(0, 1, 0, -360deg);
   -webkit-animation-timing-function:ease-out;
   animation-timing-function:ease-out
   }
   40% {
   -webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
   transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
   -webkit-animation-timing-function:ease-out;
   animation-timing-function:ease-out
   }
   50% {
   -webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
   transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
   -webkit-animation-timing-function:ease-in;
   animation-timing-function:ease-in
   }
   80% {
   -webkit-transform:perspective(400px) scale3d(.95, .95, .95);
   transform:perspective(400px) scale3d(.95, .95, .95);
   -webkit-animation-timing-function:ease-in;
   animation-timing-function:ease-in
   }
   100% {
   -webkit-transform:perspective(400px);
   transform:perspective(400px);
   -webkit-animation-timing-function:ease-in;
   animation-timing-function:ease-in
   }
   }
   @keyframes flip { 0% {
   -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -360deg);
   transform:perspective(400px) rotate3d(0, 1, 0, -360deg);
   -webkit-animation-timing-function:ease-out;
   animation-timing-function:ease-out
   }
   40% {
   -webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
   transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
   -webkit-animation-timing-function:ease-out;
   animation-timing-function:ease-out
   }
   50% {
   -webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
   transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
   -webkit-animation-timing-function:ease-in;
   animation-timing-function:ease-in
   }
   80% {
   -webkit-transform:perspective(400px) scale3d(.95, .95, .95);
   transform:perspective(400px) scale3d(.95, .95, .95);
   -webkit-animation-timing-function:ease-in;
   animation-timing-function:ease-in
   }
   100% {
   -webkit-transform:perspective(400px);
   transform:perspective(400px);
   -webkit-animation-timing-function:ease-in;
   animation-timing-function:ease-in
   }
   }
    @-webkit-keyframes fadeInDown { 0% {
   opacity:0;
   -webkit-transform:translate3d(0, -100%, 0);
   transform:translate3d(0, -100%, 0)
   }
   100% {
   opacity:1;
   -webkit-transform:none;
   transform:none
   }
   }
   @keyframes fadeInDown { 0% {
   opacity:0;
   -webkit-transform:translate3d(0, -100%, 0);
   -ms-transform:translate3d(0, -100%, 0);
   transform:translate3d(0, -100%, 0)
   }
   100% {
   opacity:1;
   -webkit-transform:none;
   -ms-transform:none;
   transform:none
   }
   }
    @-webkit-keyframes fadeIn { 0% {
   opacity:0
   }
   100% {
   opacity:1
   }
   }
   @keyframes fadeIn { 0% {
   opacity:0
   }
   100% {
   opacity:1
   }
   }
   @-webkit-keyframes zoomIn { 0% {
   opacity:0;
   -webkit-transform:scale3d(.3, .3, .3);
   transform:scale3d(.3, .3, .3)
   }
   50% {
   opacity:1
   }
   }
   @keyframes zoomIn { 0% {
   opacity:0;
   -webkit-transform:scale3d(.3, .3, .3);
   transform:scale3d(.3, .3, .3)
   }
   50% {
   opacity:1
   }
   }
    @-webkit-keyframes zoomOut { 0% {
   opacity:1
   }
   50% {
   opacity:0;
   -webkit-transform:scale3d(.3, .3, .3);
   transform:scale3d(.3, .3, .3)
   }
   100% {
   opacity:0
   }
   }
   @keyframes zoomOut { 0% {
   opacity:1
   }
   50% {
   opacity:0;
   -webkit-transform:scale3d(.3, .3, .3);
   transform:scale3d(.3, .3, .3)
   }
   100% {
   opacity:0
   }
   }
    @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% {
   -webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
   transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)
   }
   0% {
   opacity:0;
   -webkit-transform:scale3d(.3, .3, .3);
   transform:scale3d(.3, .3, .3)
   }
   20% {
   -webkit-transform:scale3d(1.1, 1.1, 1.1);
   transform:scale3d(1.1, 1.1, 1.1)
   }
   40% {
   -webkit-transform:scale3d(.9, .9, .9);
   transform:scale3d(.9, .9, .9)
   }
   60% {
   opacity:1;
   -webkit-transform:scale3d(1.03, 1.03, 1.03);
   transform:scale3d(1.03, 1.03, 1.03)
   }
   80% {
   -webkit-transform:scale3d(.97, .97, .97);
   transform:scale3d(.97, .97, .97)
   }
   100% {
   opacity:1;
   -webkit-transform:scale3d(1, 1, 1);
   transform:scale3d(1, 1, 1)
   }
   }
   @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% {
   -webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
   transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)
   }
   0% {
   opacity:0;
   -webkit-transform:scale3d(.3, .3, .3);
   transform:scale3d(.3, .3, .3)
   }
   20% {
   -webkit-transform:scale3d(1.1, 1.1, 1.1);
   transform:scale3d(1.1, 1.1, 1.1)
   }
   40% {
   -webkit-transform:scale3d(.9, .9, .9);
   transform:scale3d(.9, .9, .9)
   }
   60% {
   opacity:1;
   -webkit-transform:scale3d(1.03, 1.03, 1.03);
   transform:scale3d(1.03, 1.03, 1.03)
   }
   80% {
   -webkit-transform:scale3d(.97, .97, .97);
   transform:scale3d(.97, .97, .97)
   }
   100% {
   opacity:1;
   -webkit-transform:scale3d(1, 1, 1);
   transform:scale3d(1, 1, 1)
   }
   }
    @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% {
   -webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
   transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)
   }
   0% {
   opacity:0;
   -webkit-transform:translate3d(-3000px, 0, 0);
   transform:translate3d(-3000px, 0, 0)
   }
   60% {
   opacity:1;
   -webkit-transform:translate3d(25px, 0, 0);
   transform:translate3d(25px, 0, 0)
   }
   75% {
   -webkit-transform:translate3d(-10px, 0, 0);
   transform:translate3d(-10px, 0, 0)
   }
   90% {
   -webkit-transform:translate3d(5px, 0, 0);
   transform:translate3d(5px, 0, 0)
   }
   100% {
   -webkit-transform:none;
   transform:none
   }
   }
   @keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% {
   -webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
   transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)
   }
   0% {
   opacity:0;
   -webkit-transform:translate3d(-3000px, 0, 0);
   transform:translate3d(-3000px, 0, 0)
   }
   60% {
   opacity:1;
   -webkit-transform:translate3d(25px, 0, 0);
   transform:translate3d(25px, 0, 0)
   }
   75% {
   -webkit-transform:translate3d(-10px, 0, 0);
   transform:translate3d(-10px, 0, 0)
   }
   90% {
   -webkit-transform:translate3d(5px, 0, 0);
   transform:translate3d(5px, 0, 0)
   }
   100% {
   -webkit-transform:none;
   transform:none
   }
   }
    @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% {
   -webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
   transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)
   }
   0% {
   opacity:0;
   -webkit-transform:translate3d(3000px, 0, 0);
   transform:translate3d(3000px, 0, 0)
   }
   60% {
   opacity:1;
   -webkit-transform:translate3d(-25px, 0, 0);
   transform:translate3d(-25px, 0, 0)
   }
   75% {
   -webkit-transform:translate3d(10px, 0, 0);
   transform:translate3d(10px, 0, 0)
   }
   90% {
   -webkit-transform:translate3d(-5px, 0, 0);
   transform:translate3d(-5px, 0, 0)
   }
   100% {
   -webkit-transform:none;
   transform:none
   }
   }
   @keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% {
   -webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
   transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)
   }
   0% {
   opacity:0;
   -webkit-transform:translate3d(3000px, 0, 0);
   transform:translate3d(3000px, 0, 0)
   }
   60% {
   opacity:1;
   -webkit-transform:translate3d(-25px, 0, 0);
   transform:translate3d(-25px, 0, 0)
   }
   75% {
   -webkit-transform:translate3d(10px, 0, 0);
   transform:translate3d(10px, 0, 0)
   }
   90% {
   -webkit-transform:translate3d(-5px, 0, 0);
   transform:translate3d(-5px, 0, 0)
   }
   100% {
   -webkit-transform:none;
   -ms-transform:none;
   transform:none
   }
   }
    @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% {
   -webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
   transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)
   }
   0% {
   opacity:0;
   -webkit-transform:translate3d(0, 3000px, 0);
   transform:translate3d(0, 3000px, 0)
   }
   60% {
   opacity:1;
   -webkit-transform:translate3d(0, -25px, 0);
   transform:translate3d(0, -25px, 0)
   }
   75% {
   -webkit-transform:translate3d(0, 10px, 0);
   transform:translate3d(0, 10px, 0)
   }
   90% {
   -webkit-transform:translate3d(0, -5px, 0);
   transform:translate3d(0, -5px, 0)
   }
   100% {
   -webkit-transform:none;
   transform:none
   }
   }
   @keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% {
   -webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
   transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)
   }
   0% {
   opacity:0;
   -webkit-transform:translate3d(0, 3000px, 0);
   transform:translate3d(0, 3000px, 0)
   }
   60% {
   opacity:1;
   -webkit-transform:translate3d(0, -25px, 0);
   transform:translate3d(0, -25px, 0)
   }
   75% {
   -webkit-transform:translate3d(0, 10px, 0);
   transform:translate3d(0, 10px, 0)
   }
   90% {
   -webkit-transform:translate3d(0, -5px, 0);
   transform:translate3d(0, -5px, 0)
   }
   100% {
   -webkit-transform:none;
   transform:none
   }
   }
    @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% {
   -webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
   transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)
   }
   0% {
   opacity:0;
   -webkit-transform:translate3d(0, -3000px, 0);
   transform:translate3d(0, -3000px, 0)
   }
   60% {
   opacity:1;
   -webkit-transform:translate3d(0, 25px, 0);
   transform:translate3d(0, 25px, 0)
   }
   75% {
   -webkit-transform:translate3d(0, -10px, 0);
   transform:translate3d(0, -10px, 0)
   }
   90% {
   -webkit-transform:translate3d(0, 5px, 0);
   transform:translate3d(0, 5px, 0)
   }
   100% {
   -webkit-transform:none;
   transform:none
   }
   }
   @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% {
   -webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
   transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)
   }
   0% {
   opacity:0;
   -webkit-transform:translate3d(0, -3000px, 0);
   transform:translate3d(0, -3000px, 0)
   }
   60% {
   opacity:1;
   -webkit-transform:translate3d(0, 25px, 0);
   transform:translate3d(0, 25px, 0)
   }
   75% {
   -webkit-transform:translate3d(0, -10px, 0);
   transform:translate3d(0, -10px, 0)
   }
   90% {
   -webkit-transform:translate3d(0, 5px, 0);
   transform:translate3d(0, 5px, 0)
   }
   100% {
   -webkit-transform:none;
   transform:none
   }
   }
    @-webkit-keyframes bounceOut { 20% {
   -webkit-transform:scale3d(.9, .9, .9);
   transform:scale3d(.9, .9, .9)
   }
   50%, 55% {
   opacity:1;
   -webkit-transform:scale3d(1.1, 1.1, 1.1);
   transform:scale3d(1.1, 1.1, 1.1)
   }
   100% {
   opacity:0;
   -webkit-transform:scale3d(.3, .3, .3);
   transform:scale3d(.3, .3, .3)
   }
   }
   @keyframes bounceOut { 20% {
   -webkit-transform:scale3d(.9, .9, .9);
   transform:scale3d(.9, .9, .9)
   }
   50%, 55% {
   opacity:1;
   -webkit-transform:scale3d(1.1, 1.1, 1.1);
   transform:scale3d(1.1, 1.1, 1.1)
   }
   100% {
   opacity:0;
   -webkit-transform:scale3d(.3, .3, .3);
   transform:scale3d(.3, .3, .3)
   }
   }
    @-webkit-keyframes bounceOutDown { 20% {
   -webkit-transform:translate3d(0, 10px, 0);
   transform:translate3d(0, 10px, 0)
   }
   40%, 45% {
   opacity:1;
   -webkit-transform:translate3d(0, -20px, 0);
   transform:translate3d(0, -20px, 0)
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(0, 2000px, 0);
   transform:translate3d(0, 2000px, 0)
   }
   }
   @keyframes bounceOutDown { 20% {
   -webkit-transform:translate3d(0, 10px, 0);
   transform:translate3d(0, 10px, 0)
   }
   40%, 45% {
   opacity:1;
   -webkit-transform:translate3d(0, -20px, 0);
   transform:translate3d(0, -20px, 0)
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(0, 2000px, 0);
   transform:translate3d(0, 2000px, 0)
   }
   }
    @-webkit-keyframes bounceOutLeft { 20% {
   opacity:1;
   -webkit-transform:translate3d(20px, 0, 0);
   transform:translate3d(20px, 0, 0)
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(-2000px, 0, 0);
   transform:translate3d(-2000px, 0, 0)
   }
   }
   @keyframes bounceOutLeft { 20% {
   opacity:1;
   -webkit-transform:translate3d(20px, 0, 0);
   transform:translate3d(20px, 0, 0)
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(-2000px, 0, 0);
   transform:translate3d(-2000px, 0, 0)
   }
   }
    @-webkit-keyframes bounceOutRight { 20% {
   opacity:1;
   -webkit-transform:translate3d(-20px, 0, 0);
   transform:translate3d(-20px, 0, 0)
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(2000px, 0, 0);
   transform:translate3d(2000px, 0, 0)
   }
   }
   @keyframes bounceOutRight { 20% {
   opacity:1;
   -webkit-transform:translate3d(-20px, 0, 0);
   transform:translate3d(-20px, 0, 0)
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(2000px, 0, 0);
   transform:translate3d(2000px, 0, 0)
   }
   }
    @-webkit-keyframes bounceOutUp { 20% {
   -webkit-transform:translate3d(0, -10px, 0);
   transform:translate3d(0, -10px, 0)
   }
   40%, 45% {
   opacity:1;
   -webkit-transform:translate3d(0, 20px, 0);
   transform:translate3d(0, 20px, 0)
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(0, -2000px, 0);
   transform:translate3d(0, -2000px, 0)
   }
   }
   @keyframes bounceOutUp { 20% {
   -webkit-transform:translate3d(0, -10px, 0);
   transform:translate3d(0, -10px, 0)
   }
   40%, 45% {
   opacity:1;
   -webkit-transform:translate3d(0, 20px, 0);
   transform:translate3d(0, 20px, 0)
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(0, -2000px, 0);
   transform:translate3d(0, -2000px, 0)
   }
   }
    @-webkit-keyframes rollOut { 0% {
   opacity:1
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
   transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
   }
   }
   @keyframes rollOut { 0% {
   opacity:1
   }
   100% {
   opacity:0;
   -webkit-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
   transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
   }
   }
    @-webkit-keyframes rubberBand { 0% {
   -webkit-transform:scale3d(1, 1, 1);
   transform:scale3d(1, 1, 1)
   }
   30% {
   -webkit-transform:scale3d(1.25, .75, 1);
   transform:scale3d(1.25, .75, 1)
   }
   40% {
   -webkit-transform:scale3d(0.75, 1.25, 1);
   transform:scale3d(0.75, 1.25, 1)
   }
   50% {
   -webkit-transform:scale3d(1.15, .85, 1);
   transform:scale3d(1.15, .85, 1)
   }
   65% {
   -webkit-transform:scale3d(.95, 1.05, 1);
   transform:scale3d(.95, 1.05, 1)
   }
   75% {
   -webkit-transform:scale3d(1.05, .95, 1);
   transform:scale3d(1.05, .95, 1)
   }
   100% {
   -webkit-transform:scale3d(1, 1, 1);
   transform:scale3d(1, 1, 1)
   }
   }
   @keyframes rubberBand { 0% {
   -webkit-transform:scale3d(1, 1, 1);
   transform:scale3d(1, 1, 1)
   }
   30% {
   -webkit-transform:scale3d(1.25, .75, 1);
   transform:scale3d(1.25, .75, 1)
   }
   40% {
   -webkit-transform:scale3d(0.75, 1.25, 1);
   transform:scale3d(0.75, 1.25, 1)
   }
   50% {
   -webkit-transform:scale3d(1.15, .85, 1);
   transform:scale3d(1.15, .85, 1)
   }
   65% {
   -webkit-transform:scale3d(.95, 1.05, 1);
   transform:scale3d(.95, 1.05, 1)
   }
   75% {
   -webkit-transform:scale3d(1.05, .95, 1);
   transform:scale3d(1.05, .95, 1)
   }
   100% {
   -webkit-transform:scale3d(1, 1, 1);
   transform:scale3d(1, 1, 1)
   }
   }
   @-webkit-keyframes lightSpeedOut { 0% {
   opacity:1
   }
   100% {
   -webkit-transform:translate3d(100%, 0, 0) skewX(30deg);
   transform:translate3d(100%, 0, 0) skewX(30deg);
   opacity:0
   }
   }
   @keyframes lightSpeedOut { 0% {
   opacity:1
   }
   100% {
   -webkit-transform:translate3d(100%, 0, 0) skewX(30deg);
   transform:translate3d(100%, 0, 0) skewX(30deg);
   opacity:0
   }
   }
    @-webkit-keyframes heartbeat { 0% {
   -webkit-transform:scale(1);
   transform:scale(1)
   }
   50% {
   -webkit-transform:scale(1.5);
   transform:scale(1.5)
   }
   100% {
   -webkit-transform:scale(1);
   transform:scale(1)
   }
   }
   @keyframes heartbeat { 0% {
   -webkit-transform:scale(1);
   transform:scale(1)
   }
   50% {
   -webkit-transform:scale(1.5);
   transform:scale(1.5)
   }
   100% {
   -webkit-transform:scale(1);
   transform:scale(1)
   }
   }
    @-webkit-keyframes flipOutY { 0% {
   -webkit-transform:perspective(400px);
   transform:perspective(400px)
   }
   30% {
   -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -15deg);
   transform:perspective(400px) rotate3d(0, 1, 0, -15deg);
   opacity:1
   }
   100% {
   -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
   transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
   opacity:0
   }
   }
   @keyframes flipOutY { 0% {
   -webkit-transform:perspective(400px);
   transform:perspective(400px)
   }
   30% {
   -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -15deg);
   transform:perspective(400px) rotate3d(0, 1, 0, -15deg);
   opacity:1
   }
   100% {
   -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
   transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
   opacity:0
   }
   }
    @-webkit-keyframes flipInY { 0% {
   -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
   transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
   -webkit-animation-timing-function:ease-in;
   animation-timing-function:ease-in;
   opacity:0
   }
   40% {
   -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg);
   transform:perspective(400px) rotate3d(0, 1, 0, -20deg);
   -webkit-animation-timing-function:ease-in;
   animation-timing-function:ease-in
   }
   60% {
   -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg);
   transform:perspective(400px) rotate3d(0, 1, 0, 10deg);
   opacity:1
   }
   80% {
   -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg);
   transform:perspective(400px) rotate3d(0, 1, 0, -5deg)
   }
   100% {
   -webkit-transform:perspective(400px);
   transform:perspective(400px)
   }
   }
   @keyframes flipInY { 0% {
   -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
   transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
   -webkit-animation-timing-function:ease-in;
   animation-timing-function:ease-in;
   opacity:0
   }
   40% {
   -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg);
   transform:perspective(400px) rotate3d(0, 1, 0, -20deg);
   -webkit-animation-timing-function:ease-in;
   animation-timing-function:ease-in
   }
   60% {
   -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg);
   transform:perspective(400px) rotate3d(0, 1, 0, 10deg);
   opacity:1
   }
   80% {
   -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg);
   transform:perspective(400px) rotate3d(0, 1, 0, -5deg)
   }
   100% {
   -webkit-transform:perspective(400px);
   transform:perspective(400px)
   }
   }
    @-webkit-keyframes flipInX { 0% {
   -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
   transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
   -webkit-animation-timing-function:ease-in;
   animation-timing-function:ease-in;
   opacity:0
   }
   40% {
   -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
   transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
   -webkit-animation-timing-function:ease-in;
   animation-timing-function:ease-in
   }
   60% {
   -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg);
   transform:perspective(400px) rotate3d(1, 0, 0, 10deg);
   opacity:1
   }
   80% {
   -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg);
   transform:perspective(400px) rotate3d(1, 0, 0, -5deg)
   }
   100% {
   -webkit-transform:perspective(400px);
   transform:perspective(400px)
   }
   }
   @keyframes flipInX { 0% {
   -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
   transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
   -webkit-animation-timing-function:ease-in;
   animation-timing-function:ease-in;
   opacity:0
   }
   40% {
   -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
   transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
   -webkit-animation-timing-function:ease-in;
   animation-timing-function:ease-in
   }
   60% {
   -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg);
   transform:perspective(400px) rotate3d(1, 0, 0, 10deg);
   opacity:1
   }
   80% {
   -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg);
   transform:perspective(400px) rotate3d(1, 0, 0, -5deg)
   }
   100% {
   -webkit-transform:perspective(400px);
   transform:perspective(400px)
   }
   }
    @-webkit-keyframes flipOutX { 0% {
   -webkit-transform:perspective(400px);
   transform:perspective(400px)
   }
   30% {
   -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
   transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
   opacity:1
   }
   100% {
   -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
   transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
   opacity:0
   }
   }
   @keyframes flipOutX { 0% {
   -webkit-transform:perspective(400px);
   transform:perspective(400px)
   }
   30% {
   -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
   transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
   opacity:1
   }
   100% {
   -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
   transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
   opacity:0
   }
   }
    @-webkit-keyframes tada { 0% {
   -webkit-transform:scale3d(1, 1, 1);
   transform:scale3d(1, 1, 1)
   }
   10%, 20% {
   -webkit-transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
   transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
   }
   30%, 50%, 70%, 90% {
   -webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
   transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
   }
   40%, 60%, 80% {
   -webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
   transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
   }
   100% {
   -webkit-transform:scale3d(1, 1, 1);
   transform:scale3d(1, 1, 1)
   }
   }
   @keyframes tada { 0% {
   -webkit-transform:scale3d(1, 1, 1);
   transform:scale3d(1, 1, 1)
   }
   10%, 20% {
   -webkit-transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
   transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
   }
   30%, 50%, 70%, 90% {
   -webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
   transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
   }
   40%, 60%, 80% {
   -webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
   transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
   }
   100% {
   -webkit-transform:scale3d(1, 1, 1);
   transform:scale3d(1, 1, 1)
   }
   }
    @-webkit-keyframes jello { 11.1% {
   -webkit-transform:none;
   transform:none
   }
   22.2% {
   -webkit-transform:skewX(-12.5deg) skewY(-12.5deg);
   transform:skewX(-12.5deg) skewY(-12.5deg)
   }
   33.3% {
   -webkit-transform:skewX(6.25deg) skewY(6.25deg);
   transform:skewX(6.25deg) skewY(6.25deg)
   }
   44.4% {
   -webkit-transform:skewX(-3.125deg) skewY(-3.125deg);
   transform:skewX(-3.125deg) skewY(-3.125deg)
   }
   55.5% {
   -webkit-transform:skewX(1.5625deg) skewY(1.5625deg);
   transform:skewX(1.5625deg) skewY(1.5625deg)
   }
   66.6% {
   -webkit-transform:skewX(-.78125deg) skewY(-.78125deg);
   transform:skewX(-.78125deg) skewY(-.78125deg)
   }
   77.7% {
   -webkit-transform:skewX(0.390625deg) skewY(0.390625deg);
   transform:skewX(0.390625deg) skewY(0.390625deg)
   }
   88.8% {
   -webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);
   transform:skewX(-.1953125deg) skewY(-.1953125deg)
   }
   100% {
   -webkit-transform:none;
   transform:none
   }
   }
   @keyframes jello { 11.1% {
   -webkit-transform:none;
   transform:none
   }
   22.2% {
   -webkit-transform:skewX(-12.5deg) skewY(-12.5deg);
   transform:skewX(-12.5deg) skewY(-12.5deg)
   }
   33.3% {
   -webkit-transform:skewX(6.25deg) skewY(6.25deg);
   transform:skewX(6.25deg) skewY(6.25deg)
   }
   44.4% {
   -webkit-transform:skewX(-3.125deg) skewY(-3.125deg);
   transform:skewX(-3.125deg) skewY(-3.125deg)
   }
   55.5% {
   -webkit-transform:skewX(1.5625deg) skewY(1.5625deg);
   transform:skewX(1.5625deg) skewY(1.5625deg)
   }
   66.6% {
   -webkit-transform:skewX(-.78125deg) skewY(-.78125deg);
   transform:skewX(-.78125deg) skewY(-.78125deg)
   }
   77.7% {
   -webkit-transform:skewX(0.390625deg) skewY(0.390625deg);
   transform:skewX(0.390625deg) skewY(0.390625deg)
   }
   88.8% {
   -webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);
   transform:skewX(-.1953125deg) skewY(-.1953125deg)
   }
   100% {
   -webkit-transform:none;
   transform:none
   }
   }
    @-webkit-keyframes flash { 0%, 50%, 100% {
   opacity:1
   }
   25%, 75% {
   opacity:0
   }
   }
   @keyframes flash { 0%, 50%, 100% {
   opacity:1
   }
   25%, 75% {
   opacity:0
   }
   }
    @-webkit-keyframes pulse { 0% {
   -webkit-transform:scale3d(1, 1, 1);
   transform:scale3d(1, 1, 1)
   }
   50% {
   -webkit-transform:scale3d(1.05, 1.05, 1.05);
   transform:scale3d(1.05, 1.05, 1.05)
   }
   100% {
   -webkit-transform:scale3d(1, 1, 1);
   transform:scale3d(1, 1, 1)
   }
   }
   @keyframes pulse { 0% {
   -webkit-transform:scale3d(1, 1, 1);
   transform:scale3d(1, 1, 1)
   }
   50% {
   -webkit-transform:scale3d(1.05, 1.05, 1.05);
   transform:scale3d(1.05, 1.05, 1.05)
   }
   100% {
   -webkit-transform:scale3d(1, 1, 1);
   transform:scale3d(1, 1, 1)
   }
   }
   @-webkit-keyframes scaleUp { 0% {
   -webkit-transform:scale(1)
   }
   100% {
   -webkit-transform:scale(1.5)
   }
   }
   @keyframes scaleUp { 0% {
   transform:scale(1)
   }
   100% {
   transform:scale(1.5)
   }
   }
   @-webkit-keyframes scaleDown { 0% {
   -webkit-transform:scale(1.5)
   }
   100% {
   -webkit-transform:scale(1)
   }
   }
   @keyframes scaleDown { 0% {
   transform:scale(1.5)
   }
   100% {
   transform:scale(1)
   }
   }
   @-webkit-keyframes blur { 0% {
   -webkit-filter:blur(0px)
   }
   100% {
   -webkit-filter:blur(8px)
   }
   }
   @keyframes blur { 0% {
   -webkit-filter:blur(0px)
   }
   100% {
   -webkit-filter:blur(8px)
   }
   }
   @-webkit-keyframes sharp { 0% {
   -webkit-filter:blur(8px)
   }
   100% {
   -webkit-filter:blur(0px)
   }
   }
   @keyframes sharp { 0% {
   -webkit-filter:blur(8px)
   }
   100% {
   -webkit-filter:blur(0px)
   }
   }