/* animation */
.animation {
  opacity: 0;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-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;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
/* fadeInUp */
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUp2 {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
}
@-webkit-keyframes fadeInUp2 {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUp2 {
  -webkit-animation-name: fadeInUp2;
  animation-name: fadeInUp2;
}
/* fadeIn */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
/* */
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
/* */
@-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;
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
/*  */
@-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;
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
/*  */
@-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;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
/* rotateIn */
@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes scale {
  0%,100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }
}
.scale
{
  -webkit-animation:scale 3s .2s ease-in-out both infinite;
  animation:scale 3s .2s ease-in-out both infinite;
}
.scale2
{
  -webkit-animation:scale 2s .2s ease-in-out both infinite;
  animation:scale 2s .2s ease-in-out both infinite;
}

@-webkit-keyframes faguang {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  100%{
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
  }
}

.faguang{
    -webkit-animation-name: faguang;
    animation-name: faguang;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    /*-webkit-animation:faguang ease-in-out both;
    animation:faguang  ease-in-out both;*/
    transform-origin:50% 100%;
    -webkit-transform-origin:50% 100%;
}
/* */
@-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;
  }
}
.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes flash {
  0%,100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

@keyframes flash {
  0%, 100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}
@-webkit-keyframes flash3 {
  0%, 100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}
@keyframes flash3 {
  0%, 100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }
}
.flash3{
  -webkit-animation-name: flash3;
  animation-name: flash3;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  animation-delay:0s;
  -webkit-animation-delay:0s;
}
.flash1{
  -webkit-animation-name: flash;
  animation-name: flash;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  animation-delay:0s;
  -webkit-animation-delay:0s;
}
.flash2{
  -webkit-animation-name: flash;
  animation-name: flash;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  animation-delay:1.1s;
  -webkit-animation-delay:1.1s;
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}


@-webkit-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.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% {
    opacity: 1;
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    opacity: 1;
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.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% {
    opacity: 1;
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    opacity: 1;
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.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% {
    opacity: 1;
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    opacity: 1;
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.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% {
    opacity: 1;
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    opacity: 1;
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-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;
  }
}



/*
==============================================
CSS3 ANIMATION CHEAT SHEET
==============================================

Made by Justin Aguilar

www.justinaguilar.com/animations/

Questions, comments, concerns, love letters:
justin@justinaguilar.com
==============================================
*/

/*
==============================================
slideDown
==============================================
*/


.slideDown{
  animation-name: slideDown;
  -webkit-animation-name: slideDown;

  animation-duration: 1s;
  -webkit-animation-duration: 1s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  visibility: visible !important;
}

@keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  50%{
    -webkit-transform: translateY(8%);
            transform: translateY(8%);
  }
  65%{
    -webkit-transform: translateY(-4%);
            transform: translateY(-4%);
  }
  80%{
    -webkit-transform: translateY(4%);
            transform: translateY(4%);
  }
  95%{
    -webkit-transform: translateY(-2%);
            transform: translateY(-2%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
  }
  50%{
    -webkit-transform: translateY(8%);
  }
  65%{
    -webkit-transform: translateY(-4%);
  }
  80%{
    -webkit-transform: translateY(4%);
  }
  95%{
    -webkit-transform: translateY(-2%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}

/*
==============================================
slideUp
==============================================
*/


.slideUp{
  animation-name: slideUp;
  -webkit-animation-name: slideUp;

  animation-duration: 1s;
  -webkit-animation-duration: 1s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  visibility: visible !important;
}

@keyframes slideUp {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  50%{
    -webkit-transform: translateY(-8%);
            transform: translateY(-8%);
  }
  65%{
    -webkit-transform: translateY(4%);
            transform: translateY(4%);
  }
  80%{
    -webkit-transform: translateY(-4%);
            transform: translateY(-4%);
  }
  95%{
    -webkit-transform: translateY(2%);
            transform: translateY(2%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(100%);
  }
  50%{
    -webkit-transform: translateY(-8%);
  }
  65%{
    -webkit-transform: translateY(4%);
  }
  80%{
    -webkit-transform: translateY(-4%);
  }
  95%{
    -webkit-transform: translateY(2%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}

/*
==============================================
slideLeft
==============================================
*/


.slideLeft{
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;

  animation-duration: 1s;
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;

  visibility: visible !important;
}

@keyframes slideLeft {
  0% {
    -webkit-transform: translateX(150%);
            transform: translateX(150%);
            opacity: 1;
  }
  50%{
    -webkit-transform: translateX(-8%);
            transform: translateX(-8%);
            opacity: 1;
  }
  65%{
    -webkit-transform: translateX(4%);
            transform: translateX(4%);
            opacity: 1;
  }
  80%{
    -webkit-transform: translateX(-4%);
            transform: translateX(-4%);
            opacity: 1;
  }
  95%{
    -webkit-transform: translateX(2%);
            transform: translateX(2%);
            opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
            opacity: 1;
  }
}

@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(150%);
    opacity: 1;
  }
  50%{
    -webkit-transform: translateX(-8%);
    opacity: 1;
  }
  65%{
    -webkit-transform: translateX(4%);
    opacity: 1;
  }
  80%{
    -webkit-transform: translateX(-4%);
    opacity: 1;
  }
  95%{
    -webkit-transform: translateX(2%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%);
    opacity: 1;
  }
}

/*
==============================================
slideRight
==============================================
*/


.slideRight{
  animation-name: slideRight;
  -webkit-animation-name: slideRight;

  animation-duration: 1s;
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;

  visibility: visible !important;
}

@keyframes slideRight {
  0% {
    -webkit-transform: translateX(-150%);
            transform: translateX(-150%);
            opacity: 1;
  }
  50%{
    -webkit-transform: translateX(8%);
            transform: translateX(8%);
            opacity: 1;
  }
  65%{
    -webkit-transform: translateX(-4%);
            transform: translateX(-4%);
            opacity: 1;
  }
  80%{
    -webkit-transform: translateX(4%);
            transform: translateX(4%);
            opacity: 1;
  }
  95%{
    -webkit-transform: translateX(-2%);
            transform: translateX(-2%);
            opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
            opacity: 1;
  }
}

@-webkit-keyframes slideRight {
  0% {
    -webkit-transform: translateX(-150%);
    opacity: 1;
  }
  50%{
    -webkit-transform: translateX(8%);
    opacity: 1;
  }
  65%{
    -webkit-transform: translateX(-4%);
    opacity: 1;
  }
  80%{
    -webkit-transform: translateX(4%);
    opacity: 1;
  }
  95%{
    -webkit-transform: translateX(-2%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%);
    opacity: 1;
  }
}

/*
==============================================
slideExpandUp
==============================================
*/


.slideExpandUp{
  animation-name: slideExpandUp;
  -webkit-animation-name: slideExpandUp;

  animation-duration: 1.6s;
  -webkit-animation-duration: 1.6s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease -out;

  visibility: visible !important;
}

@keyframes slideExpandUp {
  0% {
    -webkit-transform: translateY(100%) scaleX(0.5);
            transform: translateY(100%) scaleX(0.5);
    opacity: 1;
  }
  30%{
    -webkit-transform: translateY(-8%) scaleX(0.5);
            transform: translateY(-8%) scaleX(0.5);
    opacity: 1;
  }
  40%{
    -webkit-transform: translateY(2%) scaleX(0.5);
            transform: translateY(2%) scaleX(0.5);
    opacity: 1;
  }
  50%{
    -webkit-transform: translateY(0%) scaleX(1.1);
            transform: translateY(0%) scaleX(1.1);
  }
  60%{
    -webkit-transform: translateY(0%) scaleX(0.9);
            transform: translateY(0%) scaleX(0.9);
  }
  70% {
    -webkit-transform: translateY(0%) scaleX(1.05);
            transform: translateY(0%) scaleX(1.05);
  }
  80%{
    -webkit-transform: translateY(0%) scaleX(0.95);
            transform: translateY(0%) scaleX(0.95);
  }
  90% {
    -webkit-transform: translateY(0%) scaleX(1.02);
            transform: translateY(0%) scaleX(1.02);
  }
  100%{
    -webkit-transform: translateY(0%) scaleX(1);
            transform: translateY(0%) scaleX(1);
    opacity: 1;
  }
}

@-webkit-keyframes slideExpandUp {
  0% {
    -webkit-transform: translateY(100%) scaleX(0.5);
  }
  30%{
    -webkit-transform: translateY(-8%) scaleX(0.5);
  }
  40%{
    -webkit-transform: translateY(2%) scaleX(0.5);
  }
  50%{
    -webkit-transform: translateY(0%) scaleX(1.1);
  }
  60%{
    -webkit-transform: translateY(0%) scaleX(0.9);
  }
  70% {
    -webkit-transform: translateY(0%) scaleX(1.05);
  }
  80%{
    -webkit-transform: translateY(0%) scaleX(0.95);
  }
  90% {
    -webkit-transform: translateY(0%) scaleX(1.02);
  }
  100%{
    -webkit-transform: translateY(0%) scaleX(1);
  }
}

/*
==============================================
expandUp
==============================================
*/


.expandUp{
  animation-name: expandUp;
  -webkit-animation-name: expandUp;

  animation-duration: 0.7s;
  -webkit-animation-duration: 0.7s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  visibility: visible !important;
}

@keyframes expandUp {
  0% {
    -webkit-transform: translateY(55%) scale(0.6) scaleY(0.5);
            transform: translateY(55%) scale(0.6) scaleY(0.5);
    opacity: 1;
  }
  60%{
    -webkit-transform: translateY(-7%) scaleY(1.12);
            transform: translateY(-7%) scaleY(1.12);
    opacity: 1;
  }
  75%{
    -webkit-transform: translateY(3%);
            transform: translateY(3%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0%) scale(1) scaleY(1);
            transform: translateY(0%) scale(1) scaleY(1);
    opacity: 1;
  }
}

@-webkit-keyframes expandUp {
  0% {
    -webkit-transform: translateY(55%) scale(0.6) scaleY(0.5);
    opacity: 1;
  }
  60%{
    -webkit-transform: translateY(-7%) scaleY(1.12);
    opacity: 1;
  }
  75%{
    -webkit-transform: translateY(3%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0%) scale(1) scaleY(1);
    opacity: 1;
  }
}

/*
==============================================
fadeIn
==============================================
*/

.fadeIn_scale{
  animation-name: fadeIn_scale;
  -webkit-animation-name: fadeIn_scale;

  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;

  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;

  visibility: visible !important;
}

@keyframes fadeIn_scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0.0;
  }
  60% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  80% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn_scale {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
  }
  60% {
    -webkit-transform: scale(1.1);
  }
  80% {
    -webkit-transform: scale(0.9);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}

/*
==============================================
expandOpen
==============================================
*/


.expandOpen{
  animation-name: expandOpen;
  -webkit-animation-name: expandOpen;

  animation-duration: 1.2s;
  -webkit-animation-duration: 1.2s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  visibility: visible !important;
}

@keyframes expandOpen {
  0% {
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
  }
  50% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  80% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  90% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes expandOpen {
  0% {
    -webkit-transform: scale(1.8);
  }
  50% {
    -webkit-transform: scale(0.95);
  }
  80% {
    -webkit-transform: scale(1.05);
  }
  90% {
    -webkit-transform: scale(0.98);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

/*
==============================================
bigEntrance
==============================================
*/


.bigEntrance{
  animation-name: bigEntrance;
  -webkit-animation-name: bigEntrance;

  animation-duration: 1.6s;
  -webkit-animation-duration: 1.6s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  visibility: visible !important;
}

@keyframes bigEntrance {
  0% {
    -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
            transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
    opacity: 0.2;
  }
  30% {
    -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
            transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
    opacity: 1;
  }
  45% {
    -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
            transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
            transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  75% {
    -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
            transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  90% {
    -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
            transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
            transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes bigEntrance {
  0% {
    -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
    opacity: 0.2;
  }
  30% {
    -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
    opacity: 1;
  }
  45% {
    -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  75% {
    -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  90% {
    -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
}

/*
==============================================
hatch
==============================================
*/

.hatch{
  animation-name: hatch;
  -webkit-animation-name: hatch;

  animation-duration: 2s;
  -webkit-animation-duration: 2s;

  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;

  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;

  visibility: visible !important;
}

@keyframes hatch {
  0% {
    -webkit-transform: rotate(0deg) scaleY(0.6);
            transform: rotate(0deg) scaleY(0.6);
    opacity: 1;
  }
  20% {
    -webkit-transform: rotate(-2deg) scaleY(1.05);
            transform: rotate(-2deg) scaleY(1.05);
    opacity: 1;
  }
  35% {
    -webkit-transform: rotate(2deg) scaleY(1);
            transform: rotate(2deg) scaleY(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
    opacity: 1;
  }
  65% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    opacity: 1;
  }
}

@-webkit-keyframes hatch {
  0% {
    -webkit-transform: rotate(0deg) scaleY(0.6);
  }
  20% {
    -webkit-transform: rotate(-2deg) scaleY(1.05);
  }
  35% {
    -webkit-transform: rotate(2deg) scaleY(1);
  }
  50% {
    -webkit-transform: rotate(-2deg);
  }
  65% {
    -webkit-transform: rotate(1deg);
  }
  80% {
    -webkit-transform: rotate(-1deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}


/*
==============================================
bounce
==============================================
*/


.bounce{
  animation-name: bounce;
  -webkit-animation-name: bounce;

  animation-duration: 1.6s;
  -webkit-animation-duration: 1.6s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
}

@keyframes bounce {
  0% {
    -webkit-transform: translateY(0%) scaleY(0.6);
            transform: translateY(0%) scaleY(0.6);
    opacity: 0;
  }
  60%{
    -webkit-transform: translateY(-100%) scaleY(1.1);
            transform: translateY(-100%) scaleY(1.1);
    opacity: 1;
  }
  70%{
    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
            transform: translateY(0%) scaleY(0.95) scaleX(1.05);
            opacity: 1;
  }
  80%{
    -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
            transform: translateY(0%) scaleY(1.05) scaleX(1);
            opacity: 1;
  }
  90%{
    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
            transform: translateY(0%) scaleY(0.95) scaleX(1);
            opacity: 1;
  }
  100%{
    -webkit-transform: translateY(0%) scaleY(1) scaleX(1);
            transform: translateY(0%) scaleY(1) scaleX(1);
            opacity: 1;
  }
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0%) scaleY(0.6);
    opacity: 0;
  }
  60%{
    -webkit-transform: translateY(-100%) scaleY(1.1);
    opacity: 1;
  }
  70%{
    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
    opacity: 1;
  }
  80%{
    -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
    opacity: 1;
  }
  90%{
    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
    opacity: 1;
  }
  100%{
    -webkit-transform: translateY(0%) scaleY(1) scaleX(1);
    opacity: 1;
  }
}


/*
==============================================
pulse
==============================================
*/

@-webkit-keyframes pulse {
  from {
    -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);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -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);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

/*
==============================================
floating
==============================================
*/

.floating{
  animation-name: floating;
  -webkit-animation-name: floating;

  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(8%);
            transform: translateY(8%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(8%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}

.floating3{
  animation-name: floating2;
  -webkit-animation-name: floating2;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

.piao1{
  animation-name: piao1;
  -webkit-animation-name: piao1;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation-duration: 10s;
  -webkit-animation-duration: 10s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
.piao2{
  animation-name: piao2;
  -webkit-animation-name: piao2;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation-duration: 10s;
  -webkit-animation-duration: 10s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
.piao3{
  animation-name: piao3;
  -webkit-animation-name: piao3;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation-duration: 10s;
  -webkit-animation-duration: 10s;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
.piao4{
  animation-name: piao4;
  -webkit-animation-name: piao4;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation-duration: 10s;
  -webkit-animation-duration: 10s;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

.floating2{
  animation-name: floating2;
  -webkit-animation-name: floating2;
  -webkit-animation-timing-function: ease-in-out;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating2 {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@-webkit-keyframes floating2 {
  0% {
    -webkit-transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}

@keyframes piao1 {
  0% {
    -webkit-transform: translateY(0%) translateX(0%);
            transform: translateY(0%) translateX(0%);
  }
  50% {
    -webkit-transform: translateY(-100%) translateX(-100%);
            transform: translateY(-100%) translateX(-100%);
  }
  100% {
    -webkit-transform: translateY(0%) translateX(0%);
            transform: translateY(0%) translateX(0%);
  }
}

@-webkit-keyframes piao1 {
  0% {
    -webkit-transform: translateY(0%) translateX(0%);
            transform: translateY(0%) translateX(0%);
  }
  50% {
    -webkit-transform: translateY(-100%) translateX(-100%);
            transform: translateY(-100%) translateX(-100%);
  }
  100% {
    -webkit-transform: translateY(0%) translateX(0%);
            transform: translateY(0%) translateX(0%);
  }
  }
}


@keyframes piao2 {
  0% {
    -webkit-transform: translateY(0%) translateX(0%);
            transform: translateY(0%) translateX(0%);
  }
  50% {
    -webkit-transform: translateY(100%) translateX(-100%);
            transform: translateY(100%) translateX(-100%);
  }
  100% {
    -webkit-transform: translateY(0%) translateX(0%);
            transform: translateY(0%) translateX(0%);
  }
}

@-webkit-keyframes piao2 {
  0% {
    -webkit-transform: translateY(0%) translateX(0%);
            transform: translateY(0%) translateX(0%);
  }
  50% {
    -webkit-transform: translateY(100%) translateX(-100%);
            transform: translateY(100%) translateX(-100%);
  }
  100% {
    -webkit-transform: translateY(0%) translateX(0%);
            transform: translateY(0%) translateX(0%);
  }
}

@keyframes piao3 {
  0% {
    -webkit-transform: translateY(0%) translateX(0%);
            transform: translateY(0%) translateX(0%);
  }
  50% {
    -webkit-transform: translateY(-100%) translateX(100%);
            transform: translateY(-100%) translateX(100%);
  }
  100% {
    -webkit-transform: translateY(0%) translateX(0%);
            transform: translateY(0%) translateX(0%);
  }
}

@-webkit-keyframes piao3 {
  0% {
    -webkit-transform: translateY(0%) translateX(0%);
            transform: translateY(0%) translateX(0%);
  }
  50% {
    -webkit-transform: translateY(-100%) translateX(100%);
            transform: translateY(-100%) translateX(100%);
  }
  100% {
    -webkit-transform: translateY(0%) translateX(0%);
            transform: translateY(0%) translateX(0%);
  }
}

@keyframes piao4 {
  0% {
    -webkit-transform: translateY(0%) translateX(0%);
            transform: translateY(0%) translateX(0%);
  }
  50% {
    -webkit-transform: translateY(100%) translateX(100%);
            transform: translateY(100%) translateX(100%);
  }
  100% {
    -webkit-transform: translateY(0%) translateX(0%);
            transform: translateY(0%) translateX(0%);
  }
}

@-webkit-keyframes piao4 {
  0% {
    -webkit-transform: translateY(0%) translateX(0%);
            transform: translateY(0%) translateX(0%);
  }
  50% {
    -webkit-transform: translateY(100%) translateX(100%);
            transform: translateY(100%) translateX(100%);
  }
  100% {
    -webkit-transform: translateY(0%) translateX(0%);
            transform: translateY(0%) translateX(0%);
  }
}

@keyframes piao {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@-webkit-keyframes piao {
  0% {
    -webkit-transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}

/*
==============================================
tossing
==============================================
*/

.tossing{
  animation-name: tossing;
  -webkit-animation-name: tossing;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  transition: all 0.5s;
  -moz-transition: all 0.5s; /* Firefox 4 */
  -webkit-transition: all 0.5s; /* Safari 和 Chrome */
  -o-transition: all 0.5s; /* Opera */
}

@keyframes tossing {
  0% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  50% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  100% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
}

@-webkit-keyframes tossing {
  0% {
    -webkit-transform: rotate(-4deg);
  }
  50% {
    -webkit-transform: rotate(4deg);
  }
  100% {
    -webkit-transform: rotate(-4deg);
  }
}

/*
==============================================
pullUp
==============================================
*/

.pullUp{
  animation-name: pullUp;
  -webkit-animation-name: pullUp;

  animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
}

@keyframes pullUp {
  0% {
    -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
    opacity: 1;
  }
  40% {
    -webkit-transform: scaleY(1.02);
            transform: scaleY(1.02);opacity: 1;
  }
  60% {
    -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);opacity: 1;
  }
  80% {
    -webkit-transform: scaleY(1.01);
            transform: scaleY(1.01);opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);opacity: 1;
  }
  80% {
    -webkit-transform: scaleY(1.01);
            transform: scaleY(1.01);opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    opacity: 1;
  }
}

@-webkit-keyframes pullUp {
  0% {
    -webkit-transform: scaleY(0.1);opacity: 1;
  }
  40% {
    -webkit-transform: scaleY(1.02);opacity: 1;
  }
  60% {
    -webkit-transform: scaleY(0.98);opacity: 1;
  }
  80% {
    -webkit-transform: scaleY(1.01);opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0.98);opacity: 1;
  }
  80% {
    -webkit-transform: scaleY(1.01);opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);opacity: 1;
  }
}

/*
==============================================
pullDown
==============================================
*/

.pullDown{
  animation-name: pullDown;
  -webkit-animation-name: pullDown;

  animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
}

@keyframes pullDown {
  0% {
    -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
  }
  40% {
    -webkit-transform: scaleY(1.02);
            transform: scaleY(1.02);
  }
  60% {
    -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
            transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
            transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@-webkit-keyframes pullDown {
  0% {
    -webkit-transform: scaleY(0.1);
  }
  40% {
    -webkit-transform: scaleY(1.02);
  }
  60% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(1);
  }
}

/*
==============================================
stretchLeft
==============================================
*/

.stretchLeft{
  animation-name: stretchLeft;
  -webkit-animation-name: stretchLeft;

  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  -webkit-transform-origin: 100% 0%;
}

@keyframes stretchLeft {
  0% {
    -webkit-transform: scaleX(0.3);
            transform: scaleX(0.3);
  }
  40% {
    -webkit-transform: scaleX(1.02);
            transform: scaleX(1.02);
  }
  60% {
    -webkit-transform: scaleX(0.98);
            transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
            transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(0.98);
            transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
            transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@-webkit-keyframes stretchLeft {
  0% {
    -webkit-transform: scaleX(0.3);
  }
  40% {
    -webkit-transform: scaleX(1.02);
  }
  60% {
    -webkit-transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(1);
  }
}

/*
==============================================
stretchRight
==============================================
*/

.stretchRight{
  animation-name: stretchRight;
  -webkit-animation-name: stretchRight;

  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
}

@keyframes stretchRight {
  0% {
    -webkit-transform: scaleX(0.3);
            transform: scaleX(0.3);
  }
  40% {
    -webkit-transform: scaleX(1.02);
            transform: scaleX(1.02);
  }
  60% {
    -webkit-transform: scaleX(0.98);
            transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
            transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(0.98);
            transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
            transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@-webkit-keyframes stretchRight {
  0% {
    -webkit-transform: scaleX(0.3);
  }
  40% {
    -webkit-transform: scaleX(1.02);
  }
  60% {
    -webkit-transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(1);
  }
}

.tianping{
-webkit-transform-origin:41.8% 76.6%;
-webkit-animation-name:tianping;
-webkit-animation-timing-function:ease-in;
} @-webkit-keyframes tianping{
0%{
-webkit-transform:rotate(-16deg);
opacity: 0;
}
10%{
  opacity: 1;
  -webkit-transform:rotate(-16deg);
  }
81%{
-webkit-transform:rotate(1.5deg);
opacity: 1;
} 92%{
-webkit-transform:rotate(-1deg);
opacity: 1;
} 100%{
-webkit-transform:rotate(0deg);
opacity: 1;
}
}.tianping{
-moz-transform-origin:41.8% 76.6%;
-moz-animation-name:tianping;
-moz-animation-timing-function:ease-in;
}


@-webkit-keyframes rotate {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate( 0);
    transform: rotate(0);
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes rotate {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate( 0);
    transform: rotate(0);
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 1;
  }
}

@-webkit-keyframes rotate_fanxiang {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate( 0);
    transform: rotate(0);
    opacity: 1;
  }

  40%,100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    opacity: 1;
  }
}

@-webkit-keyframes rotate_fanxiang {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate( 0);
    transform: rotate(0);
    opacity: 1;
  }

  40%,100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    opacity: 1;
  }
}

@keyframes rotate_fan {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate( 0);
    transform: rotate(0);
    opacity: 1;
  }

  40%,100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    opacity: 1;
  }
}

@-webkit-keyframes rotate_zheng {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate( 0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes rotate_zheng {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate( 0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 1;
  }
}




.rotate_reverse {
  -webkit-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
/*  -webkit-transform-origin:51% 50%;*/
}
.rotate {
  -webkit-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
/*  -webkit-transform-origin:51% 50%;*/
}

.zhuandong {
  -webkit-animation-name: rotate_zheng;
  animation-name: rotate_zheng;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
/*  -webkit-transform-origin:51% 50%;*/
}

.zhuandong_fan {
  -webkit-animation-name: rotate_fanxiang;
  animation-name: rotate_fanxiang;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
/*  -webkit-transform-origin:51% 50%;*/
}

.rotate2{
-webkit-backface-visibility:visible;
-webkit-transform-origin:19.3% 90%;
-webkit-animation:rotate2 1s 0s infinite ease-in-out normal both ;
} @-webkit-keyframes rotate2{
0%{
-webkit-transform:rotate(deg);
} 50%{
-webkit-transform:rotate(-30deg);
} 100%{
-webkit-transform:rotate(0deg);
}
}.rotate2{
-moz-backface-visibility:visible;
-moz-transform-origin:19.3% 90%;
-moz-animation:rotate2 1s 0s infinite ease-in-out normal both ;
}

.rotate3{
-webkit-backface-visibility:visible;
-webkit-transform-origin:64.5% 91.4%;
-webkit-animation:rotate3 1s 0s infinite ease-in-out normal both ;
} @-webkit-keyframes rotate3{
0%{
-webkit-transform:rotate(0deg);
} 50%{
-webkit-transform:rotate(20deg);
} 100%{
-webkit-transform:rotate(0deg);
}
}.rotate3{
-moz-backface-visibility:visible;
-moz-transform-origin:64.5% 91.4%;
-moz-animation:rotate3 1s 0s infinite ease-in-out normal both ;
}

.fly1{
  -webkit-backface-visibility:visible;
  -webkit-transform-origin:50% 50%;
  -webkit-animation-name:fly1;
  } @-webkit-keyframes fly1{
  0%{
  -webkit-transform:rotate(-20deg) translate(100% ,100%);
  opacity: 1;
  }  100%{
  -webkit-transform:rotate(-20deg) translate(0 ,0);
    opacity: 1;
  }
}.fly1{
  -moz-backface-visibility:visible;
  -moz-transform-origin:50% 50%;
  -moz-animation-name:fly1;
  }

.float1{

  -webkit-backface-visibility:visible;
  -webkit-transform-origin:50% 50%;
  -webkit-animation:float1 2s 0s infinite ease-in-out normal both ;
  -webkit-animation-delay:0.6s;
  } @-webkit-keyframes float1{
  0%{
  -webkit-transform:rotate(-20deg) translate(0 ,0);
  opacity: 1;
  }
  50%{
  -webkit-transform:rotate(-20deg) translate(5% ,5%);
  opacity: 1;
  }
    100%{
  -webkit-transform:rotate(-20deg) translate(0 ,0);
    opacity: 1;
  }
}.float1{

  -moz-backface-visibility:visible;
  -moz-transform-origin:50% 50%;
  -moz-animation:float1 2s 0s infinite ease-in-out normal both ;
  -moz-animation-delay:0.6s;
  }




.fly2{
  -webkit-backface-visibility:visible;
  -webkit-transform-origin:50% 50%;
  -webkit-animation-name:fly2;
  } @-webkit-keyframes fly2{
  0%{
  -webkit-transform: translate(50% ,100%);
  opacity: 1;
  }  100%{
  -webkit-transform: translate(0 ,0);
    opacity: 1;
  }
}.fly2{
  -moz-backface-visibility:visible;
  -moz-transform-origin:50% 50%;
  -moz-animation-name:fly2;
  }


.float2{

  -webkit-backface-visibility:visible;
  -webkit-transform-origin:50% 50%;
  -webkit-animation:float2 2s 0s infinite ease-in-out normal both ;
  -webkit-animation-delay:0.4s;
  } @-webkit-keyframes float2{
  0%{
  -webkit-transform:translate(0 ,0);
  opacity: 1;
  }
  50%{
  -webkit-transform:translate(2.5% ,5%);
  opacity: 1;
  }
    100%{
    -webkit-transform:translate(0 ,0);
    opacity: 1;
  }
}.float2{

  -moz-backface-visibility:visible;
  -moz-transform-origin:50% 50%;
  -moz-animation:float2 2s 0s infinite ease-in-out normal both ;
  -moz-animation-delay:0.4s;
  }



.fly3{
  -webkit-backface-visibility:visible;
  -webkit-transform-origin:50% 50%;
  -webkit-animation-name:fly3;
  } @-webkit-keyframes fly3{
  0%{
  -webkit-transform:rotate(70deg) translateX(0) translateY(150%);
  opacity: 1;
  }  100%{
  -webkit-transform:rotate(70deg) translateX(0) translateY(0);
    opacity: 1;
  }
}.fly3{
  -moz-backface-visibility:visible;
  -moz-transform-origin:50% 50%;
  -moz-animation-name:fly3;
  }

.float3{

  -webkit-backface-visibility:visible;
  -webkit-transform-origin:50% 50%;
  -webkit-animation:float3 2s 0s infinite ease-in-out normal both ;
  -webkit-animation-delay:0.2s;
  } @-webkit-keyframes float3{
  0%{
  -webkit-transform:rotate(70deg) translate(0 ,0);
  opacity: 1;
  }
  50%{
  -webkit-transform:rotate(70deg) translate(0 ,21%);
  opacity: 1;
  }
    100%{
    -webkit-transform:rotate(70deg) translate(0 ,0);
    opacity: 1;
  }
}.float3{

  -moz-backface-visibility:visible;
  -moz-transform-origin:50% 50%;
  -moz-animation:float3 2s 0s infinite ease-in-out normal both ;
  -moz-animation-delay:0.2s;
  }
.tan{
-webkit-backface-visibility:visible;
-webkit-transform-origin:center center;
-webkit-animation:tan 0.5s 0s infinite ease-out alternate both ;
} @-webkit-keyframes tan{
0%{
-webkit-transform:translateY(0);
opacity: 1;
} 100%{
-webkit-transform:translateY(-10%);
opacity: 1;
}
}.tan{
-moz-backface-visibility:visible;
-moz-transform-origin:center center;
-moz-animation:tan 0.5s 0s infinite ease-out alternate both ;
}
.stopanimation
{
  animation-play-state:paused;
  -webkit-animation-play-state:paused; /* Safari 和 Chrome */
}




@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
    opacity: 1;
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
    opacity: 1;
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
    opacity: 1;
  }
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
    opacity: 1;
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
    opacity: 1;
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
    opacity: 1;
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }

  30% {
    -webkit-transform: scale(1.25, 0.75);
    transform: scale(1.25, 0.75);
    opacity: 1;
  }

  40% {
    -webkit-transform: scale(0.75, 1.25);
    transform: scale(0.75, 1.25);
    opacity: 1;
  }

  50% {
    -webkit-transform: scale(1.15, 0.85);
    transform: scale(1.15, 0.85);
    opacity: 1;
  }

  65% {
    -webkit-transform: scale(.95, 1.05);
    transform: scale(.95, 1.05);
    opacity: 1;
  }

  75% {
    -webkit-transform: scale(1.05, .95);
    transform: scale(1.05, .95);
    opacity: 1;
  }

  to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }

  30% {
    -webkit-transform: scale(1.25, 0.75);
    transform: scale(1.25, 0.75);
    opacity: 1;
  }

  40% {
    -webkit-transform: scale(0.75, 1.25);
    transform: scale(0.75, 1.25);
    opacity: 1;
  }

  50% {
    -webkit-transform: scale(1.15, 0.85);
    transform: scale(1.15, 0.85);
    opacity: 1;
  }

  65% {
    -webkit-transform: scale(.95, 1.05);
    transform: scale(.95, 1.05);
    opacity: 1;
  }

  75% {
    -webkit-transform: scale(1.05, .95);
    transform: scale(1.05, .95);
    opacity: 1;
  }

  to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}


@-webkit-keyframes tantou1 {
  from {
    opacity: 1;
    -webkit-transform: translate(50%,100%);
    transform: translate(50%,50%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

@keyframes tantou1 {
  from {
    opacity: 1;
    -webkit-transform: translate(50%,50%);
    transform: translate(50%,50%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

.tantou1 {
  -webkit-animation-name: tantou1;
  animation-name: tantou1;
}

@-webkit-keyframes tantou2 {
  from {
    opacity: 1;
    -webkit-transform: translate(0,50%);
    transform: translate(0,50%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

@keyframes tantou2 {
  from {
    opacity: 1;
    -webkit-transform: translate(0,50%);
    transform: translate(0,50%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

.tantou2 {
  -webkit-animation-name: tantou2;
  animation-name: tantou2;
}


@-webkit-keyframes tantou3 {
  from {
    opacity: 1;
    -webkit-transform: translate(-50%,50%);
    transform: translate(-50%,50%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

@keyframes tantou3 {
  from {
    opacity: 1;
    -webkit-transform: translate(-50%,50%);
    transform: translate(-50%,50%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

.tantou3 {
  -webkit-animation-name: tantou3;
  animation-name: tantou3;
}

@-webkit-keyframes tantou4 {
  from {
    opacity: 1;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

@keyframes tantou4 {
  from {
    opacity: 1;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

.tantou4 {
  -webkit-animation-name: tantou4;
  animation-name: tantou4;
}

@-webkit-keyframes tantou5 {
  from {
    opacity: 1;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

@keyframes tantou5 {
  from {
    opacity: 1;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

.tantou5 {
  -webkit-animation-name: tantou5;
  animation-name: tantou5;
}

@-webkit-keyframes tantou6 {
  from {
    opacity: 1;
    -webkit-transform: translate(50%,-50%);
    transform: translate(50%,-50%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

@keyframes tantou6 {
  from {
    opacity: 1;
    -webkit-transform: translate(50%,-50%);
    transform: translate(100%,-50%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

.tantou6 {
  -webkit-animation-name: tantou6;
  animation-name: tantou6;
}

@-webkit-keyframes show {
  from {
    opacity: 1;

  }

  100% {
    opacity: 1;
  }
}

@keyframes show {
  from {
    opacity: 1;

  }

  100% {
    opacity: 1;

  }
}

.show {
  -webkit-animation-name: show;
  animation-name: show;
}



.slideDown2{
  animation-name: slideDown2;
  -webkit-animation-name: slideDown2;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}

@keyframes slideDown2 {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50%{
    transform: translateY(8%);
    opacity: 1;
  }
  65%{
    transform: translateY(-4%);
    opacity: 1;
  }
  80%{
    transform: translateY(4%);
    opacity: 1;
  }
  95%{
    transform: translateY(-2%);
    opacity: 1;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes slideDown2 {
  0% {
    -webkit-transform: translateY(-100%);
    opacity: 0;
  }
  50%{
    -webkit-transform: translateY(8%);
    opacity: 1;
  }
  65%{
    -webkit-transform: translateY(-4%);
    opacity: 1;
  }
  80%{
    -webkit-transform: translateY(4%);
    opacity: 1;
  }
  95%{
    -webkit-transform: translateY(-2%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0%);
    opacity: 1;
  }
}

/*
==============================================
bigEntrance
==============================================
*/


.bigEntrance{
  animation-name: bigEntrance;
  -webkit-animation-name: bigEntrance;

  animation-duration: 1.6s;
  -webkit-animation-duration: 1.6s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  visibility: visible !important;
}

@keyframes bigEntrance {
  0% {
    transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
    opacity: 0.2;
  }
  30% {
    transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
    opacity: 1;
  }
  45% {
    transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  60% {
    transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  75% {
    transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  90% {
    transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes bigEntrance {
  0% {
    -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
    opacity: 0.2;
  }
  30% {
    -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
    opacity: 1;
  }
  45% {
    -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  75% {
    -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  90% {
    -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
}
@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.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);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.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);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(200%, 0, 0);
    transform: translate3d(200%, 0, 0);
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(200%, 0, 0);
    transform: translate3d(200%, 0, 0);
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-timing-function: 'ease-in';
    animation-timing-function: 'ease-in';
}
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
.bounceOut {
  -webkit-animation-name:bounceOut;
  animation-name:bounceOut;
}
@-webkit-keyframes bounceOut {
  0%,20%,40%,60%,80%,100% {
  -webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);
  transition-timing-function:cubic-bezier(.215,.61,.355,1);
}
0% {
  opacity:0;
  filter:alpha(opacity=0);
  -webkit-transform:scale3d(.3,.3,.3);
  transform:scale3d(.3,.3,.3);
}
30% {
  -webkit-transform:scale3d(1.5,1.5,1.5);
  transform:scale3d(1.5,1.5,1.5);
}
40% {
  -webkit-transform:scale3d(.9,.9,.9);
  transform:scale3d(.9,.9,.9);
}
60% {
  opacity:1;
  filter:alpha(opacity=100);
  -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;
  filter:alpha(opacity=100);
  -webkit-transform:scale3d(1,1,1);
  transform:scale3d(1,1,1);
}
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
    opacity: 1;
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
    opacity: 1;
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.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);
    opacity: 1;
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.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% {
    opacity: 1;
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    opacity: 1;
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}


@-webkit-keyframes flip {
  from {
    -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;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -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;
    opacity: 1;
  }

  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;
    opacity: 1;
  }

  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;
    opacity: 1;
  }

  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;
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }
}

.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInY {
  from {
    -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: 1;
  }

  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;
    opacity: 1;
  }

  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);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}

@keyframes flipInY {
  from {
    -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: 1;
  }

  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;
    opacity: 1;
  }

  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);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}


.za {
  -webkit-animation: za .6s 0s ease-in alternate 1 both;
  -moz-animation: za .6s 0s ease-in alternate 1 both;
  -ms-animation: za .6s 0s ease-in alternate 1 both;
  animation: za .6s 0s ease-in alternate 1 both;
}
@-webkit-keyframes za{
  0%{-webkit-transform:scale(6);opacity: 0;}
  70%{-webkit-transform:scale(0.9);opacity: 1;}
  80%{-webkit-transform:scale(1.15);opacity: 1;}
  85%{-webkit-transform:scale(0.95);opacity: 1;}
  90%{-webkit-transform:scale(1.1);opacity: 1;}
  93%{-webkit-transform:scale(0.98);opacity: 1;}
  97%{-webkit-transform:scale(1.05);opacity: 1;}
  100%{-webkit-transform:scale(1);opacity: 1;}
}
@-moz-keyframes za{
  0%{-moz-transform:scale(6);opacity: 0;}
  80%{-moz-transform:scale(1);opacity: 1;}
  85%{-moz-transform:translateY(0.4rem) rotate(180deg)}
  90%{-moz-transform:translateY(0.4rem) rotate(180deg)}
  95%{-moz-transform:translateY(0.4rem) rotate(180deg)}
  100%{-moz-transform:translateY(0.4rem) rotate(180deg)}
}
@-o-keyframes za{
  0%{-o-transform:scale(6);opacity: 0;}
  70%{-o-transform:scale(0.9);opacity: 1;}
  80%{-o-transform:scale(1.15);opacity: 1;}
  85%{-o-transform:scale(0.95);opacity: 1;}
  90%{-o-transform:scale(1.1);opacity: 1;}
  93%{-o-transform:scale(0.98);opacity: 1;}
  97%{-o-transform:scale(1.05);opacity: 1;}
  100%{-o-transform:scale(1);opacity: 1;}
}
@-ms-keyframes za{
 0%{-ms-transform:scale(6);opacity: 0;}
  70%{-ms-transform:scale(0.9);opacity: 1;}
  80%{-ms-transform:scale(1.15);opacity: 1;}
  85%{-ms-transform:scale(0.95);opacity: 1;}
  90%{-ms-transform:scale(1.1);opacity: 1;}
  93%{-ms-transform:scale(0.98);opacity: 1;}
  97%{-ms-transform:scale(1.05);opacity: 1;}
  100%{-ms-transform:scale(1);opacity: 1;}
}
@keyframes za{
  0%{transform:scale(6);opacity: 0;}
  70%{transform:scale(0.9);opacity: 1;}
  80%{transform:scale(1.15);opacity: 1;}
  85%{transform:scale(0.95);opacity: 1;}
  90%{transform:scale(1.1);opacity: 1;}
  93%{-transform:scale(0.98);opacity: 1;}
  97%{-transform:scale(1.05);opacity: 1;}
  100%{transform:scale(1);opacity: 1;}
}


@-webkit-keyframes qiu1animation {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100%{
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
  }
}

.qiu1animation{
    -webkit-animation-name: qiu1animation;
    animation-name: qiu1animation;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    /*-webkit-animation:faguang ease-in-out both;
    animation:faguang  ease-in-out both;*/
}


@-webkit-keyframes qiu2animation {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100%{
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
  }
}

.qiu2animation{
    -webkit-animation-name: qiu2animation;
    animation-name: qiu2animation;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    /*-webkit-animation:faguang ease-in-out both;
    animation:faguang  ease-in-out both;*/
    -webkit-transform-origin: 100% 100%;
    transform-origin: center 100% 100%;
}


@-webkit-keyframes qiu3animation {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100%{
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
  }
}

.qiu3animation{
    -webkit-animation-name: qiu3animation;
    animation-name: qiu3animation;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    /*-webkit-animation:faguang ease-in-out both;
    animation:faguang  ease-in-out both;*/
    -webkit-transform-origin: 0% 100%;
    transform-origin: center 0% 100%;
}

@-webkit-keyframes qiu4animation {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100%{
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
  }
}

.qiu4animation{
    -webkit-animation-name: qiu4animation;
    animation-name: qiu4animation;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    /*-webkit-animation:faguang ease-in-out both;
    animation:faguang  ease-in-out both;*/
    -webkit-transform-origin: 0% 0%;
    transform-origin: center 0% 0%;
}

@-webkit-keyframes qiu5animation {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100%{
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
  }
}

.qiu5animation{
    -webkit-animation-name: qiu5animation;
    animation-name: qiu5animation;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    /*-webkit-animation:faguang ease-in-out both;
    animation:faguang  ease-in-out both;*/
    -webkit-transform-origin: 100% 0%;
    transform-origin: center 100% 0%;
}