@charset "utf-8";
/* CSS Document */

/* 动画 */

/* 加载页动画 */
@-webkit-keyframes scaledot{
            0%,80%,100%{-webkit-transform:scale(0.0);}
            40%{-webkit-transform:scale(1.0);}
}
@keyframes scaledot{
            0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0);}
            40%{transform:scale(1.0);-webkit-transform:scale(1.0);}
}

/*上下跳动*/
@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

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

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -2px, 0);
            transform: translate3d(0, -2px, 0);
  }

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

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

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

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -2px, 0);
            transform: translate3d(0, -2px, 0);
  }

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

.bounce1 {
  -webkit-animation: bounce 1s infinite;
          animation: bounce 1s infinite;
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
}
.bounce2 {
  -webkit-animation: bounce 1s .4s infinite;
          animation: bounce 1s .4s infinite;
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
}
.bounce3 {
  -webkit-animation: bounce 1s .8s infinite;
          animation: bounce 1s .8s infinite;
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
}



/* 弹出 快 */

@-webkit-keyframes zoomIn_k{
  0%{
    -webkit-transform:scale(0.2);
    transform:scale(0.2);
    }
  70%{
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    }
  85%{
    -webkit-transform:scale(0.9);
    transform:scale(0.9);
    }
  100%{
    -webkit-transform:scale(1);
    }
}

@keyframes zoomIn_k{
  0%{
    -webkit-transform:scale(0.2);
    transform:scale(0.2);
    }
  70%{
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    }
  85%{
    -webkit-transform:scale(0.9);
    transform:scale(0.9);
    }
  100%{
    -webkit-transform:scale(1);
    transform:scale(1);
    }
}

.zoomIn_k{
   -webkit-animation:zoomIn_k .5s  linear;
   -moz-animation:zoomIn_k .5s  linear;
   animation:zoomIn_k .5s  linear;
   }


/*上移动画*/
@-webkit-keyframes updown{
    0%{opacity:0;
        -webkit-transform:translateY(40px);
        transform:translateY(40px);
    }
     
    100%{opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
}

@keyframes updown{
    0%{opacity:0;
        -webkit-transform:translateY(40px);
        transform:translateY(40px);
    }
     
    100%{opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
}
.updown{
    -webkit-animation:updown 1s  ease both;
    animation:updown 1s  ease both;
  }

/*上下移动画-- 扫描*/
@-webkit-keyframes scan{
    0%{
        -webkit-transform:translateY(0%);
        transform:translateY(0%);
    }
     
    100%{
        -webkit-transform:translateY(9rem);
        transform:translateY(9rem);
    }
}

@keyframes scan{
    0%{
        -webkit-transform:translateY(0%);
        transform:translateY(0%);
    }
     
    100%{
        -webkit-transform:translateY(9rem);
        transform:translateY(9rem);
    }
}
.scan{
    -webkit-animation:scan 2.5s  ease both infinite alternate;
    animation:scan 2.5s  ease both infinite alternate;
  }

/*左飞动画*/
@-webkit-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-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% {
    -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, 0.610, 0.355, 1.000);
            transition-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% {
    -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;
  }
}

.bounceInLeft {
  -webkit-animation: bounceInLeft 1s;
          animation: bounceInLeft 1s;
}




/*右飞动画*/
@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-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% {
    -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, 0.610, 0.355, 1.000);
            transition-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% {
    -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;
  }
}

.bounceInRight {
  -webkit-animation: bounceInRight 1s;
          animation: bounceInRight 1s;
}



/*左飞 淡入 动画*/
@-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;
  }
}

.fadeInLeft {
  -webkit-animation: fadeInLeft 1.5s;
          animation: fadeInLeft 1.5s;
}


/*右飞 淡入 动画 */
@-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;
  }
}

@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: fadeInRight 1.5s ;
          animation: fadeInRight 1.5s;
}


/*闪动动画*/
@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0.5;
  }
}

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

  25%, 75% {
    opacity: 0.5;
  }
}

.flash {
  -webkit-animation: flash 2s infinite;
          animation: flash 2s infinite;
}
.flash2 {
  -webkit-animation: flash 2s 0.5s infinite;
          animation: flash 2s 0.5s infinite;
}


@-webkit-keyframes weiqi_1 {
  0%, 70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes weiqi_1 {
  0%, 70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.weiqi_1 {
  -webkit-animation: weiqi_1 2s infinite;
          animation: weiqi_1 2s infinite;
}

@-webkit-keyframes weiqi_2 {
  0%{
    opacity: 0;
  }
  40%, 50%, 70% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
  }
}

@keyframes weiqi_2 {
  0%{
    opacity: 0;
  }
  40%, 50%, 70% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
  }
}

.weiqi_2 {
  -webkit-animation: weiqi_2 2s infinite;
          animation: weiqi_2 2s infinite;
}




/* 放大缩小 */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  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.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

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

.pulse {
  -webkit-animation: pulse 1s infinite;
          animation: pulse 1s infinite;
}

/* 放大缩小 底盘*/

@-webkit-keyframes pulse_dp {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            opacity: 0.5;
  }

 50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
            opacity: 1;
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            opacity: 0.5;
  }

  /*100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }*/
}

@keyframes pulse_dp {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            opacity: 0.5;
  }

  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
            opacity: 1;
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            opacity: 0.5;
  }

/*  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }*/
}

.pulse_dp {
  -webkit-animation: pulse_dp 2s infinite;
          animation: pulse_dp 2s infinite;
}



/*淡入*/
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeIn {
  -webkit-animation: fadeIn 0.5s;
          animation: fadeIn 0.5s;
}

/*转动*/
@keyframes rotate
{
from {transform: rotate(0deg);}
to {transform: rotate(-4000deg);}
}

@-webkit-keyframes rotate /* Safari and Chrome */
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(-4000deg);}
}

.rotate{
   animation: rotate 30s  infinite;
   -webkit-animation: rotate 30s  infinite;
  
  }

/*转动2*/
@keyframes rotate2
{
from {transform: rotate(0deg);}
to {transform: rotate(5000deg);}
}

@-webkit-keyframes rotate2 /* Safari and Chrome */
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(5000deg);}
}

.rotate2{
   animation: rotate2 200s linear infinite;
   -webkit-animation: rotate2 200s linear infinite;
  
  }


/*左上移动画1*/
@-webkit-keyframes fadeInUp_1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(50%, 100%, 0);
            transform: translate3d(50%, 100%, 0);
  }

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

@keyframes fadeInUp_1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(50%, 100%, 0);
            transform: translate3d(50%, 100%, 0);
  }

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

.fadeInUp_1 {
  -webkit-animation: fadeInUp_1 1s;
          animation: fadeInUp_1 1s;
} 

 /*左上移动画2*/
@-webkit-keyframes fadeInUp_2 {
  0% {

    -webkit-transform: translate3d(50%, 100%, 0) scale3d(.1, .1, .1);
            transform: translate3d(50%, 100%, 0) scale3d(.1, .1, .1);
  }
  10% {

    -webkit-transform: translate3d(45%, 90%, 0) scale3d(.2, .2, .2);
            transform: translate3d(45%, 90%, 0) scale3d(.2, .2, .2);
  }
  20% {

    -webkit-transform: translate3d(40%, 80%, 0) scale3d(.3, .3, .3);
            transform: translate3d(40%, 80%, 0) scale3d(.3, .3, .3);
  }
  30% {

    -webkit-transform: translate3d(35%, 70%, 0) scale3d(.4, .4, .4);
            transform: translate3d(35%, 70%, 0) scale3d(.4, .4, .4);
  }
  40% {

    -webkit-transform: translate3d(30%, 60%, 0) scale3d(.5, .5, .5);
            transform: translate3d(30%, 60%, 0) scale3d(.5, .5, .5);
  }
  50% {

    -webkit-transform: translate3d(25%, 50%, 0) scale3d(.6,.6,.6);
            transform: translate3d(25%, 50%, 0) scale3d(.6,.6,.6);
  }
  60% {

    -webkit-transform: translate3d(20%, 40%, 0) scale3d(.7, .7, .7);
            transform: translate3d(20%, 40%, 0) scale3d(.7, .7, .7);
  }
  70% {

    -webkit-transform: translate3d(15%, 30%, 0) scale3d(.8, .8, .8);
            transform: translate3d(15%, 30%, 0) scale3d(.8, .8, .8);
  }
  80% {

    -webkit-transform: translate3d(10%, 20%, 0) scale3d(.9, .9, .9);
            transform: translate3d(10%, 20%, 0) scale3d(.9, .9, .9);
  }  
  90% {

    -webkit-transform: translate3d(5%, 10%, 0) scale3d(.9, .9, .9);
            transform: translate3d(5%, 10%, 0) scale3d(.9, .9, .9);
  }


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

@keyframes fadeInUp_2 {
  0% {

    -webkit-transform: translate3d(50%, 100%, 0) scale3d(.1, .1, .1);
            transform: translate3d(50%, 100%, 0) scale3d(.1, .1, .1);
  }
  10% {

    -webkit-transform: translate3d(45%, 90%, 0) scale3d(.2, .2, .2);
            transform: translate3d(45%, 90%, 0) scale3d(.2, .2, .2);
  }
  20% {

    -webkit-transform: translate3d(40%, 80%, 0) scale3d(.3, .3, .3);
            transform: translate3d(40%, 80%, 0) scale3d(.3, .3, .3);
  }
  30% {

    -webkit-transform: translate3d(35%, 70%, 0) scale3d(.4, .4, .4);
            transform: translate3d(35%, 70%, 0) scale3d(.4, .4, .4);
  }
  40% {

    -webkit-transform: translate3d(30%, 60%, 0) scale3d(.5, .5, .5);
            transform: translate3d(30%, 60%, 0) scale3d(.5, .5, .5);
  }
  50% {

    -webkit-transform: translate3d(25%, 50%, 0) scale3d(.6,.6,.6);
            transform: translate3d(25%, 50%, 0) scale3d(.6,.6,.6);
  }
  60% {

    -webkit-transform: translate3d(20%, 40%, 0) scale3d(.7, .7, .7);
            transform: translate3d(20%, 40%, 0) scale3d(.7, .7, .7);
  }
  70% {

    -webkit-transform: translate3d(15%, 30%, 0) scale3d(.8, .8, .8);
            transform: translate3d(15%, 30%, 0) scale3d(.8, .8, .8);
  }
  80% {

    -webkit-transform: translate3d(10%, 20%, 0) scale3d(.9, .9, .9);
            transform: translate3d(10%, 20%, 0) scale3d(.9, .9, .9);
  }  
  90% {

    -webkit-transform: translate3d(5%, 10%, 0) scale3d(.9, .9, .9);
            transform: translate3d(5%, 10%, 0) scale3d(.9, .9, .9);
  }

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

.fadeInUp_2 {
  -webkit-animation: fadeInUp_2 5s;
          animation: fadeInUp_2 5s;
}  


@-webkit-keyframes shangsheng {
  0% {
   opacity: 0.5;
    -webkit-transform: translate3d(50%, 100%, 0) scale3d(0, 0, 0);
            transform: translate3d(50%, 100%, 0) scale3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes shangsheng {
  0% {
   opacity: 0.5;
    -webkit-transform: translate3d(50%, 100%, 0) scale3d(0, 0, 0);
            transform: translate3d(50%, 100%, 0) scale3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.shangsheng {
  -webkit-animation: shangsheng 4s;
          animation: shangsheng 4s;
}


/*左右移动*/
@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-1px, 0, 0);
            transform: translate3d(-1px, 0, 0);
  }

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

@keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-1px, 0, 0);
            transform: translate3d(-1px, 0, 0);
  }

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

.shake {
  -webkit-animation: shake 15s infinite;
          animation: shake 15s infinite;
}
.shake2 {
  -webkit-animation: shake 15s 15s infinite;
          animation: shake 15s 1s infinite;
}

/*左右晃动*/
@-webkit-keyframes shakeLR {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-13px, 0, 0);
            transform: translate3d(-13px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}

@-moz-keyframes shakeLR {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-13px, 0, 0);
            transform: translate3d(-13px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}

@keyframes shakeLR {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-13px, 0, 0);
            transform: translate3d(-13px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}

.shakeLR {
  -webkit-animation: shakeLR .5s;
          animation: shakeLR .5s;
}


/*指示按钮动画 */
@keyframes moveIconUp {
  0% { -webkit-transform: translateY(50%); transform: translateY(50%); opacity:0;}
  50% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity:1;}
  100% { -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity:0;}
}

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

.moveIconUp {
  animation: moveIconUp ease 1.5s both infinite;
  -webkit-animation: moveIconUp ease 1.5s both infinite;
}

/*指示按钮动画 左右 */
@keyframes moveIconUpL {
  0% { -webkit-transform: translateX(50%); transform: translateX(50%); opacity:0;}
  50% { -webkit-transform: translateX(0%); transform: translateX(0%); opacity:1;}
  100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity:0;}
}

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

.moveIconUpL {
  animation: moveIconUpL ease 1.5s both infinite;
  -webkit-animation: moveIconUpL ease 1.5s both infinite;
}

/*从上面下来*/
@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 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, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 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;
  }
}

.bounceInDown {
  -webkit-animation: bounceInDown 1s;
          animation: bounceInDown 1s;
}


/*从左往右下移动*/
@-webkit-keyframes fadeInDown_3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
            transform: translate3d(-100%, -100%, 0);
  }

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

@keyframes fadeInDown_3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
            transform: translate3d(-100%, -100%, 0);
  }

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

.fadeInDown_3 {
  -webkit-animation: fadeInDown_3 1s;
          animation: fadeInDown_3 1s;
}


/*从左往右上移动*/
@-webkit-keyframes fadeInDown_4 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
            transform: translate3d(-100%, 100%, 0);
  }

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

@keyframes fadeInDown_4 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
            transform: translate3d(-100%, 100%, 0);
  }

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

.fadeInDown_4 {
  -webkit-animation: fadeInDown_4 1s;
          animation: fadeInDown_4 1s;
}


/*按下*/
@-webkit-keyframes clickOn {

  0% {
    opacity: 0;
    -webkit-transform: scale3d(2.5, 2.5, 2.5);
            transform: scale3d(2.5, 2.5, 2.5);
  }

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

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

  90% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

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

@keyframes clickOn {

  0% {
    opacity: 0;
    -webkit-transform: scale3d(2.5, 2.5, 2.5);
            transform: scale3d(2.5, 2.5, 2.5);
  }

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

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

  90% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

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

.clickOn {
  -webkit-animation: clickOn 2s infinite;
          animation: clickOn 2s infinite;
}


/*摆钟效果*/
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 6deg);
            transform: rotate3d(0, 0, 1, 6deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
            transform: rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 2deg);
            transform: rotate3d(0, 0, 1, 2deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -2deg);
            transform: rotate3d(0, 0, 1, -2deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 6deg);
            transform: rotate3d(0, 0, 1, 6deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
            transform: rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 2deg);
            transform: rotate3d(0, 0, 1, 2deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -2deg);
            transform: rotate3d(0, 0, 1, -2deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: bottom center;
      -ms-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-animation: swing 1s infinite;
          animation: swing 1s infinite;
}

/*上下浮动*/
@-webkit-keyframes fudong {
  0% {
    -webkit-transform: translate3d(0,2px,0);
            transform: translate3d(0,2px,0);
  }

  100% {
    -webkit-transform: translate3d(0,-2px,0);
            transform: translate3d(0,-2px,0);
  }
}

@keyframes fudong {
  0% {
    -webkit-transform: translate3d(0,2px,0);
            transform: translate3d(0,2px,0);
  }

  100% {
    -webkit-transform: translate3d(0,-2px,0);
            transform: translate3d(0,-2px,0);
  }
}

.fudong {
  -webkit-animation: fudong .8s infinite alternate;
          animation: fudong .8s infinite alternate;
}

.fudong2 {
  -webkit-animation: fudong .8s .7s infinite alternate;
          animation: fudong .8s .7s infinite alternate;
}

.fudong3 {
  -webkit-animation: fudong .8s .3s infinite alternate;
          animation: fudong .8s .3s infinite alternate;
}

/*水滴 动画*/
@-webkit-keyframes water {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0) scale3d(0.1,0.1, 0.1);
            transform: translate3d(0, 100%, 0) scale3d(0.1,0.1, 0.1);
  }
}

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

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0) scale3d(0.1,0.1, 0.1);
            transform: translate3d(0, 100%, 0) scale3d(0.1,0.1, 0.1);
  }
}

.water {
  -webkit-animation: water 1.8s both;
          animation: water 1.8s both;
}