/*动画类名 添加动画的元素需要添加*/
.animateEle {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: .2s;
          animation-delay: .2s;
  -webkit-animation-fill-mode: both !important;
          animation-fill-mode: both !important;
  -webkit-animation-iteration-count:1;
          animation-iteration-count:1;
}

/**
 * 进入动画
 */
/*上淡入*/
.appear_fade_down{
  -webkit-animation-name:appear_fade_down !important;
  animation-name:appear_fade_down !important;
}
@-webkit-keyframes appear_fade_down{
  0%{opacity:0;
  -webkit-transform:translateY(-80px)}
  100%{opacity:1;
  -webkit-transform:translateY(0)}
}
@keyframes appear_fade_down{
  0%{opacity:0;
  transform:translateY(-80px)}
  100%{opacity:1;
  transform:translateY(0)}
} 
/*下淡入*/
.appear_fade_up{
  -webkit-animation-name:appear_fade_up !important;
  animation-name:appear_fade_up !important;
}
@-webkit-keyframes appear_fade_up{
  0%{opacity:0;-webkit-transform:translateY(80px)}
  100%{opacity:1;-webkit-transform:translateY(0)}
}
@keyframes appear_fade_up{
  0%{opacity:0;transform:translateY(80px)}
  100%{opacity:1;transform:translateY(0)}
}
/*左淡入*/
.appear_fade_left{
  -webkit-animation-name:appear_fade_left !important;
  animation-name:appear_fade_left !important;
}
@-webkit-keyframes appear_fade_left{
  0%{opacity:0;-webkit-transform:translateX(80px)}
  100%{opacity:1;-webkit-transform:translateX(0)}
}
@keyframes appear_fade_left{
  0%{opacity:0;transform:translateX(80px)}
  100%{opacity:1;transform:translateX(0)}
}
/*右淡入*/
.appear_fade_right{
  -webkit-animation-name:appear_fade_right !important; 
  animation-name:appear_fade_right !important;
}
@-webkit-keyframes appear_fade_right{
  0%{opacity:0;
  -webkit-transform:translateX(-80px)}
  100%{opacity:1;
  -webkit-transform:translateX(0)}
}
@keyframes appear_fade_right{
  0%{opacity:0;
  transform:translateX(-80px)}
  100%{opacity:1;
  transform:translateX(0)}
}
/*中心淡入*/
.appear_fade_center{
  -webkit-animation-name:appear_fade_center !important;
  animation-name:appear_fade_center !important;
}
@-webkit-keyframes appear_fade_center{
  0%{opacity:0}
  100%{opacity:1}
}
@keyframes appear_fade_center{
  0%{opacity:0}
  100%{opacity:1}
} 

/*上弹入*/
.appear_bounce_down{
  -webkit-animation-name:appear_bounce_down !important;
  animation-name:appear_bounce_down !important;
}
@-webkit-keyframes appear_bounce_down{
  0%{opacity:0;-webkit-transform:translateY(-2000px)}
  60%{opacity:1;-webkit-transform:translateY(0px)}
  80%{-webkit-transform:translateY(-30px)}
  100%{-webkit-transform:translateY(0)}
}
@keyframes appear_bounce_down{
  0%{opacity:0;transform:translateY(-2000px)}
  60%{opacity:1;transform:translateY(0px)}
  80%{transform:translateY(-30px)}
  100%{transform:translateY(0)}
}
/*下弹入*/
.appear_bounce_up{
  -webkit-animation-name:appear_bounce_up !important;
  animation-name:appear_bounce_up !important;
}
@-webkit-keyframes appear_bounce_up{
  0%{opacity:0;
  -webkit-transform:translateY(2000px)}
  60%{opacity:1;
  -webkit-transform:translateY(-30px)}
  80%{-webkit-transform:translateY(10px)}
  100%{-webkit-transform:translateY(0)}
}
@keyframes appear_bounce_up{
  0%{opacity:0;transform:translateY(2000px)}
  60%{opacity:1;transform:translateY(-30px)}
  80%{transform:translateY(10px)}
  100%{transform:translateY(0)}
}
/*左弹入*/
.appear_bounce_left{
  -webkit-animation-name:appear_bounce_left !important;
  animation-name:appear_bounce_left !important;
}
@-webkit-keyframes appear_bounce_left{
  0%{opacity:0;
  -webkit-transform:translateX(2000px)}
  60%{opacity:1;
  -webkit-transform:translateX(-30px)}
  80%{-webkit-transform:translateX(10px)}
  100%{-webkit-transform:translateX(0)}
}
@keyframes appear_bounce_left{
  0%{opacity:0;transform:translateX(2000px)}
  60%{opacity:1;transform:translateX(-30px)}
  80%{transform:translateX(10px)}
  100%{transform:translateX(0)}
}
/*右弹入*/
.appear_bounce_right{
  -webkit-animation-name:appear_bounce_right !important;
  animation-name:appear_bounce_right !important;
}
@-webkit-keyframes appear_bounce_right{
  0%{opacity:0;-webkit-transform:translateX(-2000px)}
  60%{opacity:1;-webkit-transform:translateX(30px)}
  80%{-webkit-transform:translateX(-10px)}
  100%{-webkit-transform:translateX(0)}
}
@keyframes appear_bounce_right{
  0%{opacity:0;transform:translateX(-2000px)}
  60%{opacity:1;transform:translateX(30px)}
  80%{transform:translateX(-10px)}
  100%{transform:translateX(0)}
}
/*中心弹入*/
.appear_bounce_center{
  -webkit-animation-name:appear_bounce_center !important;
  animation-name:appear_bounce_center !important;
}
@-webkit-keyframes appear_bounce_center{
  0%{opacity:0;-webkit-transform:scale(.3)}
  50%{opacity:1;-webkit-transform:scale(1.05)}
  70%{-webkit-transform:scale(.9)}
  100%{-webkit-transform:scale(1)}
}
@keyframes appear_bounce_center{
  0%{opacity:0;transform:scale(.3)}
  50%{opacity:1;transform:scale(1.05)}
  70%{transform:scale(.9)}
  100%{transform:scale(1)}
}

/*向下平移*/
.appear_translate_down{
  -webkit-animation-name:appear_translate_down !important;
  animation-name:appear_translate_down !important;
}
@-webkit-keyframes appear_translate_down{
  0%{opacity:0;}
  1%{opacity:1;-webkit-transform: translateY(-210%);}
  100%{-webkit-transform: translateY(0);}
}
@keyframes appear_translate_down{
  0%{opacity:0;}
  1%{opacity:1;transform: translateY(-210%);}
  100%{transform: translateY(0);}
}
/*向上平移*/
.appear_translate_up{
  -webkit-animation-name:appear_translate_up !important;
  animation-name:appear_translate_up !important;
}
@-webkit-keyframes appear_translate_up{
  0%{opacity:0;}
  1%{opacity:1;-webkit-transform: translateY(210%);}
  100%{-webkit-transform: translateY(0);}
}
@keyframes appear_translate_up{
  0%{opacity:0;}
  1%{opacity:1;transform: translateY(210%);}
  100%{transform: translateY(0);}
}
/*向左平移*/
.appear_translate_left{
  -webkit-animation-name:appear_translate_left !important;
  animation-name:appear_translate_left !important;
}
@-webkit-keyframes appear_translate_left{
  0%{opacity:0;}
  1%{opacity:1;-webkit-transform: translateX(210%);}
  100%{-webkit-transform: translateX(0);}
}
@keyframes appear_translate_left{
  0%{opacity:0;}
  1%{opacity:1;transform: translateX(210%);}
  100%{transform: translateX(0);}
}
/*向右平移*/
.appear_translate_right{
  -webkit-animation-name:appear_translate_right !important;
  animation-name:appear_translate_right !important;
}
@-webkit-keyframes appear_translate_right{
  0%{opacity:0;}
  1%{opacity:1;-webkit-transform: translateX(-210%);}
  100%{-webkit-transform: translateX(0);}
}
@keyframes appear_translate_right{
  0%{opacity:0;}
  1%{opacity:1;transform: translateX(-210%);}
  100%{transform: translateX(0);}
}

/*中心旋转*/
.appear_rotate_center{
  -webkit-animation-name:appear_rotate_center !important;
  animation-name:appear_rotate_center !important;
}
@-webkit-keyframes appear_rotate_center{
  0%{-webkit-transform-origin:center center;-webkit-transform:rotate(-360deg);opacity:0}
  100%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}
}
@keyframes appear_rotate_center{
  0%{transform-origin:center center;transform:rotate(-360deg);opacity:0}
  100%{transform-origin:center center;transform:rotate(0);opacity:1}
}
/*向右旋转*/
.appear_rotate_right{
  -webkit-animation-name:appear_rotate_right !important;
  animation-name:appear_rotate_right !important;
}
@-webkit-keyframes appear_rotate_right{
  0%{-webkit-transform-origin:left bottom;
  -webkit-transform:rotate(-90deg);opacity:0}
  100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
}
@keyframes appear_rotate_right{
  0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}
  100%{transform-origin:left bottom;transform:rotate(0);opacity:1}
}
/*向左旋转*/
.appear_rotate_left{
  -webkit-animation-name:appear_rotate_left !important;
  animation-name:appear_rotate_left !important;
}
@-webkit-keyframes appear_rotate_left{
  0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}
  100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
}
@keyframes appear_rotate_left{
  0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}
  100%{transform-origin:right bottom;transform:rotate(0);opacity:1}
}
/*向上旋转*/
.appear_rotate_up{
  -webkit-animation-name:appear_rotate_up !important;
  animation-name:appear_rotate_up !important;
}
@-webkit-keyframes appear_rotate_up{
  0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}
  100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
}
@keyframes appear_rotate_up{
  0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}
  100%{transform-origin:left bottom;transform:rotate(0);opacity:1}
}
/*向下旋转*/
.appear_rotate_down{
  -webkit-animation-name:appear_rotate_down !important;
  animation-name:appear_rotate_down !important;
}
@-webkit-keyframes appear_rotate_down{
  0%  {-webkit-transform-origin:left top; -webkit-transform:rotate(-90deg); opacity:0; }
  100%{-webkit-transform-origin:left top; -webkit-transform:rotate(0); opacity:1; }
}
@keyframes appear_rotate_down{
  0%  {transform-origin:left top; transform:rotate(-90deg); opacity:0; }
  100%{transform-origin:left top; transform:rotate(0); opacity:1; }
}

/*光速向右*/
.appear_lightSpeed_right{
  -webkit-animation-name: appear_lightSpeed_right !important;
          animation-name: appear_lightSpeed_right !important;
}
@-webkit-keyframes appear_lightSpeed_right {
  0% {-webkit-transform: translate3d(-100%,0,0) skewX(30deg);opacity: 0}
  60% {-webkit-transform: skewX(-20deg);opacity: 1;}
  80% {-webkit-transform: skewX(5deg);opacity: 1;}
  100% {-webkit-transform: none;opacity: 1;}
}
@keyframes appear_lightSpeed_right{
  0% {transform: translate3d(-100%,0,0) skewX(30deg);opacity: 0;}
  60% {transform: skewX(-20deg);opacity: 1}
  80% {transform: skewX(5deg);opacity: 1}
  100% {transform: none;opacity: 1}
}
/*光速向左*/
.appear_lightSpeed_left{
  -webkit-animation-name: appear_lightSpeed_left !important;
          animation-name: appear_lightSpeed_left !important;
}
@-webkit-keyframes appear_lightSpeed_left {
  0% {-webkit-transform: translate3d(100%,0,0) skewX(-30deg);opacity: 0}
  60% {-webkit-transform: skewX(20deg);opacity: 1;}
  80% {-webkit-transform: skewX(-5deg);opacity: 1;}
  100% {-webkit-transform: none;opacity: 1;}
}
@keyframes appear_lightSpeed_left {
  0% {transform: translate3d(100%,0,0) skewX(-30deg);opacity: 0;}
  60% {transform: skewX(20deg);opacity: 1}
  80% {transform: skewX(-5deg);opacity: 1}
  100% {transform: none;opacity: 1}
}
/*光速向下*/
.appear_lightSpeed_down{
  -webkit-animation-name: appear_lightSpeed_down !important;
          animation-name: appear_lightSpeed_down !important;
}
@-webkit-keyframes appear_lightSpeed_down {
  0% {-webkit-transform: translate3d(0,100%,0) skewX(30deg);opacity: 0}
  60% {-webkit-transform: skewX(20deg);opacity: 1;}
  80% {-webkit-transform: skewX(-5deg);opacity: 1;}
  100% {-webkit-transform: none;opacity: 1;}
}
@keyframes appear_lightSpeed_down{
  0% {transform: translate3d(0,100%,0) skewX(30deg);opacity: 0;}
  60% {transform: skewX(-20deg);opacity: 1}
  80% {transform: skewX(5deg);opacity: 1}
  100% {transform: none;opacity: 1}
}
/*光速向上*/
.appear_lightSpeed_up{
  -webkit-animation-name: appear_lightSpeed_up !important;
          animation-name: appear_lightSpeed_up !important;
}
@-webkit-keyframes appear_lightSpeed_up {
  0% {-webkit-transform: translate3d(0,-100%,0) skewX(30deg);opacity: 0}
  60% {-webkit-transform: skewX(-20deg);opacity: 1;}
  80% {-webkit-transform: skewX(5deg);opacity: 1;}
  100% {-webkit-transform: none;opacity: 1;}
}
@keyframes appear_lightSpeed_up {
  0% {transform: translate3d(0,-100%,0) skewX(30deg);opacity: 0;}
  60% {transform: skewX(-20deg);opacity: 1}
  80% {transform: skewX(5deg);opacity: 1}
  100% {transform: none;opacity: 1}
}

/*向下飞入*/
.appear_fly_down {
  -webkit-animation-name: appear_fly_down !important;
          animation-name: appear_fly_down !important;
}
@-webkit-keyframes appear_fly_down {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -700px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -700px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes appear_fly_down {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -700px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -700px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
/*向上飞入*/
.appear_fly_up {
  -webkit-animation-name: appear_fly_up !important;
          animation-name: appear_fly_up !important;
}
@-webkit-keyframes appear_fly_up {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 700px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, 700px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes appear_fly_up {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 700px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, 700px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
/*向左飞入*/
.appear_fly_left {
  -webkit-animation-name: appear_fly_left !important;
          animation-name: appear_fly_left !important;
}
@-webkit-keyframes appear_fly_left {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-700px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(-700px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(60px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(60px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes appear_fly_left {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-700px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(-700px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(60px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(60px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
/*向右飞入*/
.appear_fly_right {
  -webkit-animation-name: appear_fly_right !important;
          animation-name: appear_fly_right !important;
}
@-webkit-keyframes appear_fly_right {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(700px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(700px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-60px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-60px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@keyframes appear_fly_right {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(700px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(700px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-60px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-60px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

/* 向左展开 */
.appear_unfold_left {
    -webkit-animation-name: appear_unfold_x !important;
    animation-name: appear_unfold_x !important;
    transform-origin: 100% 50% !important;
}
/* 向右展开 */
.appear_unfold_right {
    -webkit-animation-name: appear_unfold_x !important;
    animation-name: appear_unfold_x !important;
    transform-origin: 0 50% !important;
}
@-webkit-keyframes appear_unfold_x {
    0%{ opacity:0; }
    1% { -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); }
}
@keyframes appear_unfold_x {
    0%{ opacity:0; }
    1% { transform: scaleX(0.3); }
    40% { transform: scaleX(1.02); }
    60% { transform: scaleX(0.98); }
    80% { transform: scaleX(1.01); }
    100% { transform: scaleX(0.98); }
}
/* 向下展开 */
.appear_unfold_down {
    -webkit-animation-name: appear_unfold_y !important;
    animation-name: appear_unfold_y !important;
    transform-origin: 50% 0 !important;
}
/* 向上展开 */
.appear_unfold_up {
    -webkit-animation-name: appear_unfold_y !important;
    animation-name: appear_unfold_y !important;
    transform-origin: 50% 100% !important;
}
@-webkit-keyframes appear_unfold_y {
  0%{ opacity:0; }
  1% { transform: scaleY(0.3); }
  40% { transform: scaleY(1.02); }
  60% { transform: scaleY(0.98); }
  80% { transform: scaleY(1.01); }
  100% { transform: scaleY(0.98); }
}
@keyframes appear_unfold_y {
  0%{ opacity:0; }
  1% { transform: scaleY(0.3); }
  40% { transform: scaleY(1.02); }
  60% { transform: scaleY(0.98); }
  80% { transform: scaleY(1.01); }
  100% { transform: scaleY(0.98); }
}

/*向右翻滚*/
.appear_roll_right {
  -webkit-animation-name: appear_roll_right !important;
  animation-name: appear_roll_right !important;
}
@-webkit-keyframes appear_roll_right {
  0% {  
    opacity: 0;
    -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
    transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);    
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes appear_roll_right {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
    transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*向左翻滚*/
.appear_roll_left {
  -webkit-animation-name: appear_roll_left !important;
  animation-name: appear_roll_left !important;
}
@-webkit-keyframes appear_roll_left {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg);
    transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes appear_roll_left {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg);
    transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*向下翻滚*/
.appear_roll_down {
  -webkit-animation-name: appear_roll_down !important;
          animation-name: appear_roll_down !important;
}
@-webkit-keyframes appear_roll_down {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,-100%,0) rotate3d(0,0,1,-120deg);
            transform: translate3d(0,-100%,0) rotate3d(0,0,1,-120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes appear_roll_down {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,-100%,0) rotate3d(0,0,1,-120deg);
            transform: translate3d(0,-100%,0) rotate3d(0,0,1,-120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
/*向上翻滚*/
.appear_roll_up {
  -webkit-animation-name: appear_roll_up !important;
          animation-name: appear_roll_up !important;
}
@-webkit-keyframes appear_roll_up {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,100%,0) rotate3d(0,0,1,120deg);
            transform: translate3d(0,100%,0) rotate3d(0,0,1,120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes appear_roll_up {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,100%,0) rotate3d(0,0,1,120deg);
            transform: translate3d(0,100%,0) rotate3d(0,0,1,120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

/*大幅向内缩放*/
.appear_bigScale_in {
  -webkit-animation-name:appear_bigScale_in !important;
          animation-name:appear_bigScale_in !important;
}
@-webkit-keyframes appear_bigScale_in{
  0%{-webkit-transform:scale(20);opacity: 0}
  100%{-webkit-transform:scale(1);opacity: 1}
}
@keyframes appear_bigScale_in{
  0%{transform:scale(20);opacity: 0}
  100%{transform:scale(1);opacity: 1}
}
/*大幅向外缩放*/
.appear_bigScale_out {
  -webkit-animation-name:appear_bigScale_out !important;
          animation-name:appear_bigScale_out !important;
}
@-webkit-keyframes appear_bigScale_out{
  0%{-webkit-transform:scale(0);}
  100%{-webkit-transform:scale(1);}
}
@keyframes appear_bigScale_out{
  0%{transform:scale(0);}
  100%{transform:scale(1);}
}

/*小幅向内缩放*/
.appear_smallScale_in {
  -webkit-animation-name: appear_smallScale_in !important;
          animation-name: appear_smallScale_in !important;
  transform-origin: center center !important;
}
@keyframes appear_smallScale_in {
  0%{ transform:scale(1.382); opacity:0;}
  100%{ transform:none; opacity:1;}
}
@-webkit-keyframes appear_smallScale_in {
  0%{ -webkit-transform:scale(1.382); opacity:0; }
  100%{ -webkit-transform:none; opacity:1; }
}
/*小幅向外缩放*/
.appear_smallScale_out {
  -webkit-animation-name: appear_smallScale_out !important;
          animation-name: appear_smallScale_out !important;
  transform-origin: center center !important;
}
@keyframes appear_smallScale_out {
  0%{ transform:scale(.618); opacity:0; }
  100%{ transform:none; opacity:1; }
}
@-webkit-keyframes appear_smallScale_out {
  0%{ -webkit-transform:scale(.618); opacity:0; }
  100%{ -webkit-transform:none; opacity:1; }
}


/*Y轴翻转*/
.appear_flip_y{
  -webkit-animation-name:appear_flip_y !important;
          animation-name:appear_flip_y !important;
}
@-webkit-keyframes appear_flip_y{
  0%{-webkit-transform: translateZ(1000px) rotateY(90deg); opacity: 0;}
  40%{-webkit-transform: translateZ(1000px) rotateY(-20deg);}
  70%{-webkit-transform: translateZ(1000px) rotateY(10deg);}
  98%{-webkit-transform: translateZ(1000px);}
  99%{-webkit-transform: translateZ(0);}
  100%{ opacity: 1;}
}
@keyframes appear_flip_y{
  0%{transform: translateZ(1000px) rotateY(90deg); opacity: 0;}
  40%{transform: translateZ(1000px) rotateY(-20deg);}
  70%{transform: translateZ(1000px) rotateY(10deg);}
  98%{transform: translateZ(1000px);}
  99%{transform: translateZ(0);}
  100%{ opacity: 1;}
}
/*X轴翻转*/
.appear_flip_x{
  -webkit-animation-name:appear_flip_x !important;
          animation-name:appear_flip_x !important;
}
@-webkit-keyframes appear_flip_x{
  0%{-webkit-transform: translateZ(1000px) rotateX(90deg); opacity:0; }
  40%{-webkit-transform: translateZ(1000px) rotateX(-20deg); }
  70%{-webkit-transform: translateZ(1000px) rotateX(10deg); }
  98%{-webkit-transform: translateZ(1000px);}
  99%{-webkit-transform: translateZ(0);}
  100%{ opacity:1; }
}
@keyframes appear_flip_x{
  0%{transform: translateZ(1000px) rotateX(90deg); opacity:0; }
  40%{transform: translateZ(1000px) rotateX(-20deg); }
  70%{transform: translateZ(1000px) rotateX(10deg); }
  98%{transform: translateZ(1000px);}
  99%{transform: translateZ(0);}
  100%{ opacity:1; }
}

/*X轴伸缩*/
/*.appear_scale_x{
  -webkit-animation-name:appear_scale_x !important;
  animation-name:appear_scale_x !important;
  -webkit-backface-visibility: hidden;
}
@-webkit-keyframes appear_scale_x{
  0%{-webkit-transform:scaleX(0); opacity:0;}
  100%{-webkit-transform:scaleX(1); opacity:1;}
}
@keyframes appear_scale_x{
  0%{transform:scaleX(0); opacity:0;}
  100%{transform:scaleX(1); opacity:1;}
}*/
/*Y轴伸缩*/
/*.appear_scale_y{
  -webkit-animation-name:appear_scale_y !important;
  animation-name:appear_scale_y !important;
}
@-webkit-keyframes appear_scale_y{
  0%{-webkit-transform:scaleY(0); opacity:0;}
  100%{-webkit-transform:scaleY(1); opacity:1;}
}
@keyframes appear_scale_y{
  0%{transform:scaleY(0); opacity:0;}
  100%{transform:scaleY(1); opacity:1;}
}*/


/**
 * 展示动画
 */

/*摇动*/
.transit_swing {
  -webkit-transform-origin:center top !important;
          transform-origin:center top !important;
  -webkit-animation-name:transit_swing !important;
          animation-name:transit_swing !important;
  -webkit-animation-timing-function: linear !important;
          animation-timing-function: linear !important;
}
@-webkit-keyframes transit_swing{
  0%{-webkit-transform:rotateZ(0);opacity: 1}
  33%{-webkit-transform:rotateZ(20deg);}
  66%{-webkit-transform:rotateZ(-20deg);}
  100%{-webkit-transform:rotateZ(0);opacity: 1}
}
@keyframes transit_swing{
  0%{transform:rotateZ(0);opacity: 1}
  33%{transform:rotateZ(20deg);}
  66%{transform:rotateZ(-20deg);}
  100%{transform:rotateZ(0);opacity: 1}
}
/*跳动*/
.transit_jump {
  -webkit-animation-name:transit_jump !important;
  animation-name:transit_jump !important;
}
@-webkit-keyframes transit_jump{
  0%,20%,50%,80%,100%{opacity:1;-webkit-transform:translateY(0)}
  40%{-webkit-transform:translateY(-15px)}
  60%{-webkit-transform:translateY(-7px)}
}
@keyframes transit_jump{
  0%,20%,50%,80%,100%{opacity:1;transform:translateY(0)}
  40%{transform:translateY(-15px)}
  60%{transform:translateY(-7px)}
}
/*转动*/
.transit_rotate {
  -webkit-animation-name:transit_rotate !important;
          animation-name:transit_rotate !important;
  -webkit-animation-timing-function: linear !important;
          animation-timing-function: linear !important;
}
@-webkit-keyframes transit_rotate{
  0%{-webkit-transform: rotateZ(0);opacity: 1}
  100%{-webkit-transform: rotateZ(360deg);opacity: 1}
}
@keyframes transit_rotate{
  0%{transform: rotateZ(0);opacity: 1}
  100%{transform: rotateZ(360deg);opacity: 1}
}
/*呼吸灯*/
.transit_fade {
  -webkit-animation-name: transit_fade !important;
          animation-name: transit_fade !important;
  -webkit-animation-timing-function: linear !important;
          animation-timing-function: linear !important;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-direction:alternate; 
          animation-direction:alternate; 
}
@-webkit-keyframes transit_fade {
  0%{opacity:0}
  100%{opacity:1}
}
@keyframes transit_fade {
  0%{opacity:0}
  100%{opacity:1}
}
/*闪动*/
.transit_flash {
    -webkit-animation-name: transit_flash !important;
            animation-name: transit_flash !important;
}
@-webkit-keyframes transit_flash {
  0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}
@keyframes transit_flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}
/*抖动*/
.transit_shake {
  -webkit-animation-name: transit_shake !important;
          animation-name: transit_shake !important;
}
@-webkit-keyframes transit_shake {
  0%, 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
}
@keyframes transit_shake {
  0%, 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
}
/*乱抖动*/
.transit_jitter {
  -webkit-animation-name: transit_jitter !important;
          animation-name: transit_jitter !important;
}
@-webkit-keyframes transit_jitter {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(.85, .85, .85) rotate3d(0, 0, 1, -10deg);
            transform: scale3d(.85, .85, .85) rotate3d(0, 0, 1, -10deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.25, 1.25, 1.25) rotate3d(0, 0, 1, 10deg);
            transform: scale3d(1.25, 1.25, 1.25) rotate3d(0, 0, 1, 10deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.25, 1.25, 1.25) rotate3d(0, 0, 1, -10deg);
            transform: scale3d(1.25, 1.25, 1.25) rotate3d(0, 0, 1, -10deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes transit_jitter {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(.85, .85, .85) rotate3d(0, 0, 1, -10deg);
            transform: scale3d(.85, .85, .85) rotate3d(0, 0, 1, -10deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.25, 1.25, 1.25) rotate3d(0, 0, 1, 10deg);
            transform: scale3d(1.25, 1.25, 1.25) rotate3d(0, 0, 1, 10deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.25, 1.25, 1.25) rotate3d(0, 0, 1, -10deg);
            transform: scale3d(1.25, 1.25, 1.25) rotate3d(0, 0, 1, -10deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
/* 翻转 */
.transit_flip {
  -webkit-animation-name: transit_flip !important;
          animation-name: transit_flip !important;
}
@-webkit-keyframes transit_flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,-360deg);
    -webkit-animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
    -webkit-animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
    -webkit-animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(.95,.95,.95);
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
  }
}
@keyframes transit_flip {
  0% {
    transform: perspective(400px) rotate3d(0,1,0,-360deg);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) scale3d(.95,.95,.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(400px);
    animation-timing-function: ease-in;
  }
}
/* 果冻 */
.transit_jelly {
  -webkit-animation-name: transit_jelly !important;
          animation-name: transit_jelly !important;
}
@-webkit-keyframes transit_jelly {
  0% { -webkit-transform: scale3d(1,1,1); }
  30% { -webkit-transform: scale3d(1.25,.75,1); }
  40% { -webkit-transform: scale3d(0.75,1.25,1); }
  50% { -webkit-transform: scale3d(1.15,.85,1); }
  65% { -webkit-transform: scale3d(.95,1.05,1); }
  75% { -webkit-transform: scale3d(1.05,.95,1); }
  100% { -webkit-transform: scale3d(1,1,1); }
}
@keyframes transit_jelly {
  0% { transform: scale3d(1,1,1); }
  30% { transform: scale3d(1.25,.75,1); }
  40% { transform: scale3d(0.75,1.25,1); }
  50% { transform: scale3d(1.15,.85,1); }
  65% { transform: scale3d(.95,1.05,1); }
  75% { transform: scale3d(1.05,.95,1); }
  100% { transform: scale3d(1,1,1); }
}



/**
 * 消失动画
 */

/* 淡出 */
/* 上淡出 */
.disappear_fade_up {
  -webkit-animation-name: disappear_fade_up !important;
          animation-name: disappear_fade_up !important;
}
@keyframes disappear_fade_up {
  0%{opacity:1;transform:translateY(0); }
  99%{opacity:0;transform:translateY(-80px); }
  100%{opacity:0;transform:translateY(0); }
}
@-webkit-keyframes disappear_fade_up {
  0%{opacity:1;-webkit-transform:translateY(0); }
  99%{opacity:0;-webkit-transform:translateY(-80px); }
  100%{opacity:0;-webkit-transform:translateY(0); }
}
/*下淡出*/
.disappear_fade_down {
  -webkit-animation-name: disappear_fade_down !important;
          animation-name: disappear_fade_down !important;
}
@keyframes disappear_fade_down {
  0%{opacity:1;transform:translateY(0); }
  99%{opacity:0;transform:translateY(80px); }
  100%{opacity:0;transform:translateY(0); }
}
@-webkit-keyframes disappear_fade_down {
  0%{opacity:1;-webkit-transform:translateY(0); }
  99%{opacity:0;-webkit-transform:translateY(80px); }
  100%{opacity:0;-webkit-transform:translateY(0); }
}
/*左淡出*/
.disappear_fade_left {
  -webkit-animation-name: disappear_fade_left !important;
          animation-name: disappear_fade_left !important;
}
@keyframes disappear_fade_left {
  0%{ opacity:1;transform:translateX(0); }
  99%{ opacity:0;transform:translateX(-80px); }
  100%{ opacity:0;transform:translateX(0); }
}
@-webkit-keyframes disappear_fade_left {
  0%{ opacity:1;-webkit-transform:translateX(0); }
  99%{ opacity:0;-webkit-transform:translateX(-80px); }
  100%{ opacity:0;-webkit-transform:translateX(0); }
}
/*右淡出*/
.disappear_fade_right{
  -webkit-animation-name: disappear_fade_right !important;
          animation-name: disappear_fade_right !important;
}
@keyframes disappear_fade_right {
  0%{ opacity:1;transform:translateX(0); }
  99%{ opacity:0;transform:translateX(80px); }
  100%{ opacity:0;transform:translateX(0); }
}
@-webkit-keyframes disappear_fade_right {
  0%{ opacity:1;-webkit-transform:translateX(0); }
  99%{ opacity:0;-webkit-transform:translateX(80px); }
  100%{ opacity:0;-webkit-transform:translateX(0); }
}
/*中心淡出*/
.disappear_fade_center{
  -webkit-animation-name: disappear_fade_center !important;
          animation-name: disappear_fade_center !important;
}
@-webkit-keyframes disappear_fade_center {
  0%{ opacity:1; }
  100%{ opacity:0; }
}
@keyframes disappear_fade_center {
  0%{ opacity:1; }
  100%{ opacity:0; }
}


/* 弹出 */
/* 向上弹出 */
.disappear_bounce_up{
  -webkit-animation-name: disappear_bounce_up !important;
          animation-name: disappear_bounce_up !important;
}
@-webkit-keyframes disappear_bounce_up {
  0%{ -webkit-transform:translateY(0); }
  20%{ -webkit-transform:translateY(-30px); }
  40%{ opacity:1;-webkit-transform:translateY(0px); }
  99%{ opacity:0;-webkit-transform:translateY(-200px); }
  100%{ opacity:0;-webkit-transform:translateY(0); }
}
@keyframes disappear_bounce_up {
  0%{ transform:translateY(0); }
  20%{ transform:translateY(-30px); }
  40%{ opacity:1;transform:translateY(0); }
  99%{ opacity:0;transform:translateY(-200px); }
  100%{ opacity:0;transform:translateY(0); }
}
/*向下弹出*/
.disappear_bounce_down {
  -webkit-animation-name: disappear_bounce_down !important;
          animation-name: disappear_bounce_down !important;
}
@-webkit-keyframes disappear_bounce_down {
  0%{ -webkit-transform:translateY(0); }
  20%{ -webkit-transform:translateY(30px); }
  40%{ opacity:1;-webkit-transform:translateY(0); }
  99%{ opacity:0;-webkit-transform:translateY(200px); }
  100%{ opacity:0;-webkit-transform:translateY(0); }
}
@keyframes disappear_bounce_down {
  0%{ transform:translateY(0); }
  20%{ transform:translateY(30px); }
  40%{ opacity:1;transform:translateY(0); }
  99%{ opacity:0;transform:translateY(200px); }
  100%{ opacity:0;transform:translateY(0); }
}
/*向左弹出*/
.disappear_bounce_left {
  -webkit-animation-name: disappear_bounce_left !important;
          animation-name: disappear_bounce_left !important;
}
@-webkit-keyframes disappear_bounce_left {
  0%{ -webkit-transform:translateX(0); }
  20%{ -webkit-transform:translateX(-30px); }
  40%{ opacity:1;-webkit-transform:translateX(0); }
  99%{ opacity:0;-webkit-transform:translateX(-200px); }
  100%{ opacity:0;-webkit-transform:translateX(0); }
}
@keyframes disappear_bounce_left {
  0%{ transform:translateX(0); }
  20%{ transform:translateX(-30px); }
  40%{ opacity:1;transform:translateX(0); }
  99%{ opacity:0;transform:translateX(-200px); }
  100%{ opacity:0;transform:translateX(0); }
}
/*向右弹出*/
.disappear_bounce_right {
  -webkit-animation-name: disappear_bounce_right !important;
          animation-name: disappear_bounce_right !important;
}
@-webkit-keyframes disappear_bounce_right {
  0%{ -webkit-transform:translateX(0); }
  20%{ -webkit-transform:translateX(30px); }
  40%{ opacity:1;-webkit-transform:translateX(0); }
  99%{ opacity:0;-webkit-transform:translateX(200px); }
  100%{ opacity:0;-webkit-transform:translateX(0); }
}
@keyframes disappear_bounce_right {
  0%{ transform:translateX(0); }
  20%{ transform:translateX(30px); }
  40%{ opacity:1;transform:translateX(0); }
  99%{ opacity:0;transform:translateX(200px); }
  100%{ opacity:0;transform:translateX0); }
}
/*中心弹出*/
.disappear_bounce_center{
  -webkit-animation-name:disappear_bounce_center !important;
          animation-name:disappear_bounce_center !important;
}
@-webkit-keyframes disappear_bounce_center{
  0%{ -webkit-transform:scale(1); }
  30%{ -webkit-transform:scale(.9); }
  50%{ opacity:1;-webkit-transform:scale(1.05); }
  99%{ opacity:0;-webkit-transform:scale(.3); }
  100%{ opacity:0;-webkit-transform:none; }
}
@keyframes disappear_bounce_center{
  0%{ transform:scale(1); }
  30%{ transform:scale(.9); }
  50%{ opacity:1;transform:scale(1.05); }
  99%{ opacity:0;transform:scale(.3); }
  100%{ opacity:0;transform:none; }
}

/* 移出 */
/* 向上移出 */
.disappear_translate_up{
  -webkit-animation-name: disappear_translate_up !important;
          animation-name: disappear_translate_up !important;
}
@-webkit-keyframes disappear_translate_up {
  0%{opacity:1;-webkit-transform:translateY(0);}
  99%{opacity:0;-webkit-transform:translateY(-200px);}
  100%{opacity:0;-webkit-transform:translateY(0);}
}
@keyframes disappear_translate_up {
  0%{opacity:1;transform:translateY(0);}
  99%{opacity:0;transform:translateY(-200px);}
  100%{opacity:0;transform:translateY(0);}
}
/* 向下移出 */
.disappear_translate_down{
  -webkit-animation-name: disappear_translate_down !important;
          animation-name: disappear_translate_down !important;
}
@-webkit-keyframes disappear_translate_down {
  0%{opacity:1;-webkit-transform:translateY(0);}
  99%{opacity:0;-webkit-transform:translateY(200px);}
  100%{opacity:0;-webkit-transform:translateY(0);}
}
@keyframes disappear_translate_down {
  0%{opacity:1;transform:translateY(0);}
  99%{opacity:0;transform:translateY(200px);}
  100%{opacity:0;transform:translateY0);}
}
/* 向左移出 */
.disappear_translate_left{
  -webkit-animation-name: disappear_translate_left !important;
          animation-name: disappear_translate_left !important;
}
@-webkit-keyframes disappear_translate_left {
  0%{opacity:1;-webkit-transform:translateX(0);}
  99%{opacity:0;-webkit-transform:translateX(-200px);}
  100%{opacity:0;-webkit-transform:translateX(0);}
}
@keyframes disappear_translate_left {
  0%{opacity:1;transform:translateX(0);}
  99%{opacity:0;transform:translateX(-200px);}
  100%{opacity:0;transform:translateX(0);}
}
/* 向右移出 */
.disappear_translate_right{
  -webkit-animation-name: disappear_translate_right !important;
  animation-name: disappear_translate_right !important;
}
@-webkit-keyframes disappear_translate_right {
  0%{opacity:1;-webkit-transform:translateX(0);}
  99%{opacity:0;-webkit-transform:translateX(200px);}
  100%{opacity:0;-webkit-transform:translateX(0);}
}
@keyframes disappear_translate_right {
  0%{opacity:1;transform:translateX(0);}
  99%{opacity:0;transform:translateX(200px);}
  100%{opacity:0;transform:translateX(0);}
}

/* 光速消失 */
/* 光速向右 */
.disappear_lightSpeed_right {
  -webkit-animation-name: disappear_lightSpeed_right !important;
          animation-name: disappear_lightSpeed_right !important;
}
@-webkit-keyframes disappear_lightSpeed_right {
  0% {opacity:1;}
  20%{-webkit-transform: translate3d(-50%,0,0) skewX(20deg); opacity: 1;}
  100% {-webkit-transform: translate3d(100%,0,0) skewX(-30deg); opacity:0;}
}
@keyframes disappear_lightSpeed_right {
  0% {opacity:1;}
  20% {transform: translate3d(-50%,0,0) skewX(20deg); opacity: 1;}
  100% {transform: translate3d(100%,0,0) skewX(-30deg); opacity:0;}
}
/* 光速向左 */
.disappear_lightSpeed_left {
    -webkit-animation-name: disappear_lightSpeed_left !important;
            animation-name: disappear_lightSpeed_left !important;
}
@-webkit-keyframes disappear_lightSpeed_left {
  0% {opacity:1;}
  20% {-webkit-transform: translate3d(50%,0,0) skewX(-20deg); opacity: 1;}
  100% {-webkit-transform: translate3d(-100%,0,0) skewX(30deg); opacity:0;}
}
@keyframes disappear_lightSpeed_left {
  0% {opacity:1;}
  20% {transform: translate3d(50%,0,0) skewX(-20deg); opacity: 1;}
  100% {transform: translate3d(-100%,0,0) skewX(30deg); opacity:0;}
}
/* 光速向下 */
.disappear_lightSpeed_down {
  -webkit-animation-name: disappear_lightSpeed_down !important;
          animation-name: disappear_lightSpeed_down !important;
}
@-webkit-keyframes disappear_lightSpeed_down {
  0% {opacity:1;}
  20% {-webkit-transform:translate3d(0,-50%,0) skewY(-20deg); opacity:1;}
  100% {-webkit-transform:translate3d(0,100%,0) skewY(30deg); opacity:0;}
}
@keyframes disappear_lightSpeed_down {
  0% {opacity:1;}
  20% {transform:translate3d(0,-50%,0) skewY(-20deg); opacity:1;}
  100% {transform:translate3d(0,100%,0) skewY(30deg); opacity:0;}
}
/* 光速向下 */
.disappear_lightSpeed_up {
  -webkit-animation-name: disappear_lightSpeed_up !important;
          animation-name: disappear_lightSpeed_up !important;
}
@-webkit-keyframes disappear_lightSpeed_up {
  0% {opacity:1;}
  20% {-webkit-transform:translate3d(0,50%,0) skewY(20deg); opacity:1;}
  100% {-webkit-transform:translate3d(0,-100%,0) skewY(-30deg); opacity:0;}
}
@keyframes disappear_lightSpeed_up {
  0% {opacity:1;}
  20% {transform:translate3d(0,50%,0) skewY(20deg); opacity:1;}
  100% {transform:translate3d(0,-100%,0) skewY(-30deg); opacity:0;}
}

/*翻滚消失*/
/* 向右翻滚 */
.disappear_roll_right {
  -webkit-animation-name: disappear_roll_right !important;
          animation-name: disappear_roll_right !important;
}
@-webkit-keyframes disappear_roll_right {
  0%  { opacity:1; }
  99% { opacity:0; -webkit-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg); }
  100%{ opacity:0; -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0); }
}
@keyframes disappear_roll_right {
  0%  { opacity:1; }
  99% { opacity:0; transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg); }
  100%{ opacity:0; transform: translate3d(0,0,0) rotate3d(0,0,0); }
}
/* 向左翻滚 */
.disappear_roll_left {
  -webkit-animation-name: disappear_roll_left !important;
          animation-name: disappear_roll_left !important;
}
@-webkit-keyframes disappear_roll_left {
  0%  { opacity:1; }
  99% { opacity:0; -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg); }
  100%{ opacity:0; -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0); }
}
@keyframes disappear_roll_left {
  0%  { opacity:1; }
  99% { opacity:0; transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg); }
  100%{ opacity:0; transform: translate3d(0,0,0) rotate3d(0,0,0); }
}
/* 向下翻滚 */
.disappear_roll_down {
  -webkit-animation-name: disappear_roll_down !important;
          animation-name: disappear_roll_down !important;
}
@-webkit-keyframes disappear_roll_down {
  0%  { opacity:1; }
  99% { opacity:0; -webkit-transform: translate3d(0,100%,0) rotate3d(0,0,1,120deg); }
  100%{ opacity:0; -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0); }
}
@keyframes disappear_roll_down {
  0%  { opacity:1; }
  99% { opacity:0; transform: translate3d(0,100%,0) rotate3d(0,0,1,120deg); }
  100%{ opacity:0; transform: translate3d(0,0,0) rotate3d(0,0,0); }
}
/* 向上翻滚 */
.disappear_roll_up {
  -webkit-animation-name: disappear_roll_up !important;
          animation-name: disappear_roll_up !important;
}
@-webkit-keyframes disappear_roll_up {
  0%  { opacity:1; }
  99% { opacity:0; -webkit-transform: translate3d(0,-100%,0) rotate3d(0,0,1,-120deg); }
  100%{ opacity:0; -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0); }
}
@keyframes disappear_roll_up {
  0%  { opacity:1; }
  99% { opacity:0; transform: translate3d(0,-100%,0) rotate3d(0,0,1,-120deg); }
  100%{ opacity:0; transform: translate3d(0,0,0) rotate3d(0,0,0); }
}

/* 缩放消失 */
/* 向内缩放 */
.disappear_scale_in{
  -webkit-animation-name:disappear_scale_in !important;
          animation-name:disappear_scale_in !important;
}
@-webkit-keyframes disappear_scale_in{
  0%{opacity:1;-webkit-transform:scale(1);}
  99%{opacity:0;-webkit-transform:scale(0);}
  100%{opacity:0;-webkit-transform:scale(1);}
}
@keyframes disappear_scale_in{
  0%{opacity:1;transform:scale(1);}
  99%{opacity:0;transform:scale(0);}
  100%{opacity:0;transform:scale(1);}
}
/* 向外缩放 */
.disappear_scale_out{
  -webkit-animation-name:disappear_scale_out !important;
          animation-name:disappear_scale_out !important;
}
@-webkit-keyframes disappear_scale_out{
  0%{opacity:1;-webkit-transform:scale(1);}
  99%{opacity:0;-webkit-transform:scale(5);}
  100%{opacity:0;-webkit-transform:scale(1);}
}
@keyframes disappear_scale_out{
  0%{opacity:1;transform:scale(1);}
  99%{opacity:0;transform:scale(5);}
  100%{opacity:0;transform:scale(1);}
}

/* X翻转消失 */
.disappear_flip_x{
  -webkit-animation-name:disappear_flip_x !important;
          animation-name:disappear_flip_x !important;
}
@-webkit-keyframes disappear_flip_x{
  0%{-webkit-transform: translateZ(1000px) rotateX(0deg); opacity:1;}
/*  30%{-webkit-transform: translateZ(1000px); }
  60%{-webkit-transform: translateZ(1000px); }*/
  99%{-webkit-transform: translateZ(1000px) rotateX(90deg); opacity:0;}
  100%{-webkit-transform: translateZ(0) rotateX(90deg); opacity:0;}
}
@keyframes disappear_flip_x{
  0%{transform: translateZ(1000px) rotateX(0deg); opacity:1;}
/*  30%{transform: translateZ(1000px); opacity:1;}
  60%{transform: translateZ(1000px); opacity:1;}*/
  99%{transform: translateZ(1000px) rotateX(90deg); opacity:0;}
  100%{transform: translateZ(0) rotateX(90deg); opacity:0;}
}
/* Y翻转消失 */
.disappear_flip_y{
  -webkit-animation-name:disappear_flip_y !important;
          animation-name:disappear_flip_y !important;
}
@-webkit-keyframes disappear_flip_y{
  0%{-webkit-transform: translateZ(1000px) rotateY(0deg); opacity:1;}
  99%{-webkit-transform: translateZ(1000px) rotateY(90deg); opacity:0}
  100%{-webkit-transform: translateZ(0) rotateY(90deg); opacity:0}
}
@keyframes disappear_flip_y{
  0%{transform: translateZ(1000px) rotateY(0deg); opacity:1;}
  99%{transform: translateZ(1000px) rotateY(90deg); opacity:0;}
  100%{transform: translateZ(0) rotateY(90deg); opacity:0;}
}

/* 掉落消失 */
/* 向右掉落 */
.disappear_fall_right {
  -webkit-animation-name: disappear_fall_right !important;
          animation-name: disappear_fall_right !important;
}
@-webkit-keyframes disappear_fall_right {
  0% {
    -webkit-transform-origin: top right;
    -webkit-animation-timing-function: ease-in-out
  }
  20%,60% {
    -webkit-transform: rotateZ(-80deg);
    -webkit-transform-origin: top right;
    -webkit-animation-timing-function: ease-in-out
  }
  40%,80% {
    -webkit-transform: rotateZ(-60deg);
    -webkit-transform-origin: top right;
    -webkit-animation-timing-function: ease-in-out;
    opacity: 1
  }
  99% {
    -webkit-transform: translate3d(0,700px,0);
    opacity: 0
  }
  100%{
    -webkit-transfrom: translate3d(0,0,0);
    opacity: 0;
  }
}
@keyframes disappear_fall_right {
  0% {
    transform-origin: top right;
    animation-timing-function: ease-in-out
  }
  20%,60% {
    transform: rotateZ(-80deg);
    transform-origin: top right;
    animation-timing-function: ease-in-out
  }
  40%,80% {
    transform: rotateZ(-60deg);
    transform-origin: top right;
    animation-timing-function: ease-in-out;
    opacity: 1
  }
  99% {
    transform: translate3d(0,700px,0);
    opacity: 0;
  }
  100%{
    transfrom: translate3d(0,0,0);
    opacity: 0;
  }
}
/* 向左掉落 */
.disappear_fall_left {
  -webkit-animation-name: disappear_fall_left !important;
          animation-name: disappear_fall_left !important;
}
@-webkit-keyframes disappear_fall_left {
  0% {
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out
  }
  20%,60% {
    -webkit-transform: rotateZ(80deg);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out
  }
  40%,80% {
    -webkit-transform: rotateZ(60deg);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    opacity: 1
  }
  99% {
    -webkit-transform: translate3d(0,700px,0);
    opacity: 0
  }
  100%{
    -webkit-transfrom: translate3d(0,0,0);
    opacity: 0;
  }
}
@keyframes disappear_fall_left {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out
  }
  20%,60% {
    transform: rotateZ(80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out
  }
  40%,80% {
    transform: rotateZ(60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1
  }
  99% {
    transform: translate3d(0,700px,0);
    opacity: 0;
  }
  100%{
    transfrom: translate3d(0,0,0);
    opacity: 0;
  }
}