/*动画库*/
/*内置时间*/
.a-time003 {
  animation-duration: 0.3s;
  -webkit-animation-duration: 0.3s;
}
.a-time005 {
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
}
.a-time007 {
  animation-duration: 0.7s;
  -webkit-animation-duration: 0.7s;
}
.a-time009 {
  animation-duration: 0.9s;
  -webkit-animation-duration: 0.9s;
}
.a-time1 {
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
}
.a-time013 {
  animation-duration: 1.3s;
  -webkit-animation-duration: 1.3s;
}
.a-time015 {
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
}
.a-time017 {
  animation-duration: 1.7s;
  -webkit-animation-duration: 1.7s;
}
.a-time019 {
  animation-duration: 1.9s;
  -webkit-animation-duration: 1.9s;
}
.a-time2 {
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
}
.a-time023 {
  animation-duration: 2.3s;
  -webkit-animation-duration: 2.3s;
}
.a-time025 {
  animation-duration: 2.5s;
  -webkit-animation-duration: 2.5s;
}
.a-time027 {
  animation-duration: 2.7s;
  -webkit-animation-duration: 2.7s;
}
.a-time029 {
  animation-duration: 2.9s;
  -webkit-animation-duration: 2.9s;
}
.a-time3 {
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
}
.a-time033 {
  animation-duration: 3.3s;
  -webkit-animation-duration: 3.3s;
}
.a-time035 {
  animation-duration: 3.5s;
  -webkit-animation-duration: 3.5s;
}
.a-time037 {
  animation-duration: 3.7s;
  -webkit-animation-duration: 3.7s;
}
.a-time039 {
  animation-duration: 3.9s;
  -webkit-animation-duration: 3.9s;
}
.a-time4 {
  animation-duration: 4s;
  -webkit-animation-duration: 4s;
}
.a-time043 {
  animation-duration: 4.3s;
  -webkit-animation-duration: 4.3s;
}
.a-time045 {
  animation-duration: 4.5s;
  -webkit-animation-duration: 4.5s;
}
.a-time047 {
  animation-duration: 4.7s;
  -webkit-animation-duration: 4.7s;
}
.a-time049 {
  animation-duration: 4.9s;
  -webkit-animation-duration: 4.9s;
}
.a-time5 {
  animation-duration: 5s;
  -webkit-animation-duration: 5s;
}
.a-time053 {
  animation-duration: 5.3s;
  -webkit-animation-duration: 5.3s;
}
.a-time055 {
  animation-duration: 5.5s;
  -webkit-animation-duration: 5.5s;
}
.a-time057 {
  animation-duration: 5.7s;
  -webkit-animation-duration: 5.7s;
}
.a-time059 {
  animation-duration: 5.9s;
  -webkit-animation-duration: 5.9s;
}
.a-time6 {
  animation-duration: 6s;
  -webkit-animation-duration: 6s;
}
.a-time063 {
  animation-duration: 6.3s;
  -webkit-animation-duration: 6.3s;
}
.a-time065 {
  animation-duration: 6.5s;
  -webkit-animation-duration: 6.5s;
}
.a-time067 {
  animation-duration: 6.7s;
  -webkit-animation-duration: 6.7s;
}
.a-time069 {
  animation-duration: 6.9s;
  -webkit-animation-duration: 6.9s;
}
.a-time7 {
  animation-duration: 7s;
  -webkit-animation-duration: 7s;
}
.a-time073 {
  animation-duration: 7.3s;
  -webkit-animation-duration: 7.3s;
}
.a-time075 {
  animation-duration: 7.5s;
  -webkit-animation-duration: 7.5s;
}
.a-time077 {
  animation-duration: 7.7s;
  -webkit-animation-duration: 7.7s;
}
.a-time079 {
  animation-duration: 7.9s;
  -webkit-animation-duration: 7.9s;
}
.a-time8 {
  animation-duration: 8s;
  -webkit-animation-duration: 8s;
}
.a-time083 {
  animation-duration: 8.3s;
  -webkit-animation-duration: 8.3s;
}
.a-time085 {
  animation-duration: 8.5s;
  -webkit-animation-duration: 8.5s;
}
.a-time087 {
  animation-duration: 8.7s;
  -webkit-animation-duration: 8.7s;
}
.a-time089 {
  animation-duration: 8.9s;
  -webkit-animation-duration: 8.9s;
}
.a-time9 {
  animation-duration: 9s;
  -webkit-animation-duration: 9s;
}
.a-time093 {
  animation-duration: 9.3s;
  -webkit-animation-duration: 9.3s;
}
.a-time095 {
  animation-duration: 9.5s;
  -webkit-animation-duration: 9.5s;
}
.a-time097 {
  animation-duration: 9.7s;
  -webkit-animation-duration: 9.7s;
}
.a-time099 {
  animation-duration: 9.9s;
  -webkit-animation-duration: 9.9s;
}
.a-time10 {
  animation-duration: 10s;
  -webkit-animation-duration: 10s;
}
.a-time103 {
  animation-duration: 10.3s;
  -webkit-animation-duration: 10.3s;
}
.a-time105 {
  animation-duration: 10.5s;
  -webkit-animation-duration: 10.5s;
}
.a-time107 {
  animation-duration: 10.7s;
  -webkit-animation-duration: 10.7s;
}
.a-time109 {
  animation-duration: 10.9s;
  -webkit-animation-duration: 10.9s;
}
.a-time11 {
  animation-duration: 11s;
  -webkit-animation-duration: 11s;
}
.a-time113 {
  animation-duration: 11.3s;
  -webkit-animation-duration: 11.3s;
}
.a-time115 {
  animation-duration: 11.5s;
  -webkit-animation-duration: 11.5s;
}
.a-time117 {
  animation-duration: 11.7s;
  -webkit-animation-duration: 11.7s;
}
.a-time119 {
  animation-duration: 11.9s;
  -webkit-animation-duration: 11.9s;
}
.a-time12 {
  animation-duration: 12s;
  -webkit-animation-duration: 12s;
}
.a-time123 {
  animation-duration: 12.3s;
  -webkit-animation-duration: 12.3s;
}
.a-time125 {
  animation-duration: 12.5s;
  -webkit-animation-duration: 12.5s;
}
.a-time127 {
  animation-duration: 12.7s;
  -webkit-animation-duration: 12.7s;
}
.a-time129 {
  animation-duration: 12.9s;
  -webkit-animation-duration: 12.9s;
}
.a-time13 {
  animation-duration: 13s;
  -webkit-animation-duration: 13s;
}
.a-time133 {
  animation-duration: 13.3s;
  -webkit-animation-duration: 13.3s;
}
.a-time135 {
  animation-duration: 13.5s;
  -webkit-animation-duration: 13.5s;
}
.a-time137 {
  animation-duration: 13.7s;
  -webkit-animation-duration: 13.7s;
}
.a-time139 {
  animation-duration: 13.9s;
  -webkit-animation-duration: 13.9s;
}
.a-time14 {
  animation-duration: 14s;
  -webkit-animation-duration: 14s;
}
.a-time143 {
  animation-duration: 15.3s;
  -webkit-animation-duration: 15.3s;
}
.a-time145 {
  animation-duration: 15.5s;
  -webkit-animation-duration: 15.5s;
}
.a-time147 {
  animation-duration: 15.7s;
  -webkit-animation-duration: 15.7s;
}
.a-time149 {
  animation-duration: 15.9s;
  -webkit-animation-duration: 15.9s;
}
.a-time15 {
  animation-duration: 15s;
  -webkit-animation-duration: 15s;
}
.a-time153 {
  animation-duration: 15.3s;
  -webkit-animation-duration: 15.3s;
}
.a-time155 {
  animation-duration: 15.5s;
  -webkit-animation-duration: 15.5s;
}
.a-time157 {
  animation-duration: 15.7s;
  -webkit-animation-duration: 15.7s;
}
.a-time159 {
  animation-duration: 15.9s;
  -webkit-animation-duration: 15.9s;
}
/*内置延迟时间*/
.a-delay003 {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}
.a-delay005 {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.a-delay007 {
  animation-delay: 0.7s;
  -webkit-animation-delay: 0.7s;
}
.a-delay008 {
  animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
}
.a-delay009 {
  animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
}
.a-delay1 {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}
.a-delay013 {
  animation-delay: 1.3s;
  -webkit-animation-delay: 1.3s;
}
.a-delay015 {
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
}
.a-delay017 {
  animation-delay: 1.7s;
  -webkit-animation-delay: 1.7s;
}
.a-delay019 {
  animation-delay: 1.9s;
  -webkit-animation-delay: 1.9s;
}
.a-delay2 {
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
}
.a-delay023 {
  animation-delay: 2.3s;
  -webkit-animation-delay: 2.3s;
}
.a-delay025 {
  animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
}
.a-delay027 {
  animation-delay: 2.7s;
  -webkit-animation-delay: 2.7s;
}
.a-delay029 {
  animation-delay: 2.9s;
  -webkit-animation-delay: 2.9s;
}
.a-delay3 {
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
}
.a-delay033 {
  animation-delay: 3.3s;
  -webkit-animation-delay: 3.3s;
}
.a-delay035 {
  animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
}
.a-delay037 {
  animation-delay: 3.7s;
  -webkit-animation-delay: 3.7s;
}
.a-delay039 {
  animation-delay: 3.9s;
  -webkit-animation-delay: 3.9s;
}
.a-delay4 {
  animation-delay: 4s;
  -webkit-animation-delay: 4s;
}
.a-delay043 {
  animation-delay: 4.3s;
  -webkit-animation-delay: 4.3s;
}
.a-delay045 {
  animation-delay: 4.5s;
  -webkit-animation-delay: 4.5s;
}
.a-delay047 {
  animation-delay: 4.7s;
  -webkit-animation-delay: 4.7s;
}
.a-delay049 {
  animation-delay: 4.9s;
  -webkit-animation-delay: 4.9s;
}
.a-delay5 {
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
}
.a-delay053 {
  animation-delay: 5.3s;
  -webkit-animation-delay: 5.3s;
}
.a-delay055 {
  animation-delay: 5.5s;
  -webkit-animation-delay: 5.5s;
}
.a-delay057 {
  animation-delay: 5.7s;
  -webkit-animation-delay: 5.7s;
}
.a-delay059 {
  animation-delay: 5.9s;
  -webkit-animation-delay: 5.9s;
}
.a-delay6 {
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
}
.a-delay063 {
  animation-delay: 5.3s;
  -webkit-animation-delay: 5.3s;
}
.a-delay065 {
  animation-delay: 5.5s;
  -webkit-animation-delay: 5.5s;
}
.a-delay067 {
  animation-delay: 5.7s;
  -webkit-animation-delay: 5.7s;
}
.a-delay069 {
  animation-delay: 5.9s;
  -webkit-animation-delay: 5.9s;
}
.a-delay7 {
  animation-delay: 7s;
  -webkit-animation-delay: 7s;
}
.a-delay073 {
  animation-delay: 7.3s;
  -webkit-animation-delay: 7.3s;
}
.a-delay075 {
  animation-delay: 7.5s;
  -webkit-animation-delay: 7.5s;
}
.a-delay077 {
  animation-delay: 7.7s;
  -webkit-animation-delay: 7.7s;
}
.a-delay079 {
  animation-delay: 7.9s;
  -webkit-animation-delay: 7.9s;
}
.a-delay8 {
  animation-delay: 8s;
  -webkit-animation-delay: 8s;
}
.a-delay083 {
  animation-delay: 8.3s;
  -webkit-animation-delay: 8.3s;
}
.a-delay085 {
  animation-delay: 8.5s;
  -webkit-animation-delay: 8.5s;
}
.a-delay087 {
  animation-delay: 8.7s;
  -webkit-animation-delay: 8.7s;
}
.a-delay089 {
  animation-delay: 8.9s;
  -webkit-animation-delay: 8.9s;
}
.a-delay9 {
  animation-delay: 9s;
  -webkit-animation-delay: 9s;
}
.a-delay093 {
  animation-delay: 9.3s;
  -webkit-animation-delay: 9.3s;
}
.a-delay095 {
  animation-delay: 9.5s;
  -webkit-animation-delay: 9.5s;
}
.a-delay097 {
  animation-delay: 9.7s;
  -webkit-animation-delay: 9.7s;
}
.a-delay099 {
  animation-delay: 9.9s;
  -webkit-animation-delay: 9.9s;
}
.a-delay10 {
  animation-delay: 10s;
  -webkit-animation-delay: 10s;
}
.a-delay103 {
  animation-delay: 10.3s;
  -webkit-animation-delay: 10.3s;
}
.a-delay105 {
  animation-delay: 10.5s;
  -webkit-animation-delay: 10.5s;
}
.a-delay107 {
  animation-delay: 10.7s;
  -webkit-animation-delay: 10.7s;
}
.a-delay109 {
  animation-delay: 10.9s;
  -webkit-animation-delay: 10.9s;
}
.a-delay11 {
  animation-delay: 11s;
  -webkit-animation-delay: 11s;
}
.a-delay113 {
  animation-delay: 11.3s;
  -webkit-animation-delay: 11.3s;
}
.a-delay115 {
  animation-delay: 11.5s;
  -webkit-animation-delay: 11.5s;
}
.a-delay117 {
  animation-delay: 11.7s;
  -webkit-animation-delay: 11.7s;
}
.a-delay119 {
  animation-delay: 11.9s;
  -webkit-animation-delay: 11.9s;
}
.a-delay12 {
  animation-delay: 12s;
  -webkit-animation-delay: 12s;
}
.a-delay123 {
  animation-delay: 12.3s;
  -webkit-animation-delay: 12.3s;
}
.a-delay125 {
  animation-delay: 12.5s;
  -webkit-animation-delay: 12.5s;
}
.a-delay127 {
  animation-delay: 12.7s;
  -webkit-animation-delay: 12.7s;
}
.a-delay129 {
  animation-delay: 12.9s;
  -webkit-animation-delay: 12.9s;
}
.a-delay13 {
  animation-delay: 13s;
  -webkit-animation-delay: 13s;
}
.a-delay133 {
  animation-delay: 13.3s;
  -webkit-animation-delay: 13.3s;
}
.a-delay135 {
  animation-delay: 13.5s;
  -webkit-animation-delay: 13.5s;
}
.a-delay137 {
  animation-delay: 13.7s;
  -webkit-animation-delay: 13.7s;
}
.a-delay139 {
  animation-delay: 13.9s;
  -webkit-animation-delay: 13.9s;
}
.a-delay14 {
  animation-delay: 14s;
  -webkit-animation-delay: 14s;
}
.a-delay143 {
  animation-delay: 14.3s;
  -webkit-animation-delay: 14.3s;
}
.a-delay145 {
  animation-delay: 14.5s;
  -webkit-animation-delay: 14.5s;
}
.a-delay147 {
  animation-delay: 14.7s;
  -webkit-animation-delay: 14.7s;
}
.a-delay149 {
  animation-delay: 14.9s;
  -webkit-animation-delay: 14.9s;
}
.a-delay15 {
  animation-delay: 15s;
  -webkit-animation-delay: 15s;
}
.a-delay153 {
  animation-delay: 15.3s;
  -webkit-animation-delay: 15.3s;
}
.a-delay155 {
  animation-delay: 15.5s;
  -webkit-animation-delay: 15.5s;
}
.a-delay157 {
  animation-delay: 15.7s;
  -webkit-animation-delay: 15.7s;
}
.a-delay159 {
  animation-delay: 15.9s;
  -webkit-animation-delay: 15.9s;
}
/*常用配置*/
/*永久播放+反向+匀速*/
.a-yjfx {
  /*永久播放*/
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  /*动画曲线*/
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  /*反向播放*/
  animation-direction: alternate;
  -webkit-animation-direction: alternate;
}
/*永久播放+匀速*/
.a-yj {
  /*永久播放*/
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  /*动画曲线*/
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}
/*动画效果*/
/*从上往下渐显*/
.showInTop {
  animation-name: showInTop;
  -webkit-animation-name: showInTop;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes showInTop {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate(0, -50%);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(0, 0);
  }
}
@-moz-keyframes showInTop {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-transform: translate(0, -50%);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(0, 0);
  }
}
@-o-keyframes showInTop {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -o-transform: translate(0, -50%);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(0, 0);
  }
}
@-ms-keyframes showInTop {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-transform: translate(0, -50%);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(0, 0);
  }
}
@keyframes showInTop {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    transform: translate(0, -50%);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(0, 0);
  }
}
/*从下往上渐显*/
.showInBottom {
  animation-name: showInBottom;
  -webkit-animation-name: showInBottom;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes showInBottom {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate(0, 40%);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(0, 0);
  }
}
@-moz-keyframes showInBottom {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-transform: translate(0, 40%);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(0, 0);
  }
}
@-o-keyframes showInBottom {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -o-transform: translate(0, 40%);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(0, 0);
  }
}
@-ms-keyframes showInBottom {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-transform: translate(0, 40%);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(0, 0);
  }
}
@keyframes showInBottom {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    transform: translate(0, 40%);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(0, 0);
  }
}
/*从下往上渐显*/
.showTop {
  animation-name: showTop;
  -webkit-animation-name: showTop;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes showTop {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(0, -100%);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(0, 0);
  }
}
@-moz-keyframes showTop {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(0, -100%);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(0, 0);
  }
}
@-o-keyframes showTop {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(0, -100%);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(0, 0);
  }
}
@-ms-keyframes showTop {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(0, -100%);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(0, 0);
  }
}
@keyframes showTop {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(0, -100%);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(0, 0);
  }
}
/*从左往右渐显*/
.showInLeft {
  animation-name: showInLeft;
  -webkit-animation-name: showInLeft;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes showInLeft {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate(-10%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(0, 0);
  }
}
@-moz-keyframes showInLeft {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-transform: translate(-10%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(0, 0);
  }
}
@-o-keyframes showInLeft {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -o-transform: translate(-10%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(0, 0);
  }
}
@-ms-keyframes showInLeft {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-transform: translate(-10%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(0, 0);
  }
}
@keyframes showInLeft {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    transform: translate(-10%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(0, 0);
  }
}
/*从左往右显示*/
.showLeft {
  animation-name: showLeft;
  -webkit-animation-name: showLeft;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes showLeft {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(-100%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(0, 0);
  }
}
@-moz-keyframes showLeft {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(-100%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(0, 0);
  }
}
@-o-keyframes showLeft {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(-100%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(0, 0);
  }
}
@-ms-keyframes showLeft {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(-100%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(0, 0);
  }
}
@keyframes showLeft {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(-100%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(0, 0);
  }
}
/*从右往左渐显*/
.showInRight {
  animation-name: showInRight;
  -webkit-animation-name: showInRight;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes showInRight {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate(10%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(0, 0);
  }
}
@-moz-keyframes showInRight {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-transform: translate(10%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(0, 0);
  }
}
@-o-keyframes showInRight {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -o-transform: translate(10%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(0, 0);
  }
}
@-ms-keyframes showInRight {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-transform: translate(10%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(0, 0);
  }
}
@keyframes showInRight {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    transform: translate(10%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(0, 0);
  }
}
/*从右往左显示*/
.showRight {
  animation-name: showRight;
  -webkit-animation-name: showRight;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes showRight {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(100%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(0, 0);
  }
}
@-moz-keyframes showRight {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(100%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(0, 0);
  }
}
@-o-keyframes showRight {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(100%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(0, 0);
  }
}
@-ms-keyframes showRight {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(100%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(0, 0);
  }
}
@keyframes showRight {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(100%, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(0, 0);
  }
}
/*渐显*/
.fadeIn {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
/*由小变大*/
.zoomIn {
  animation-name: zoomIn;
  -webkit-animation-name: zoomIn;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scale(0, 0);
  }
  80% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@-moz-keyframes zoomIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-transform: scale(0, 0);
  }
  80% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@-o-keyframes zoomIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -o-transform: scale(0, 0);
  }
  80% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@-ms-keyframes zoomIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-transform: scale(0, 0);
  }
  80% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    transform: scale(0, 0);
  }
  80% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
/*由大变小*/
.inZoom {
  animation-name: inZoom;
  -webkit-animation-name: inZoom;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes inZoom {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scale(3, 3);
  }
  80% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@-moz-keyframes inZoom {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-transform: scale(3, 3);
  }
  80% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@-o-keyframes inZoom {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -o-transform: scale(3, 3);
  }
  80% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@-ms-keyframes inZoom {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-transform: scale(3, 3);
  }
  80% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@keyframes inZoom {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    transform: scale(3, 3);
  }
  80% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
/*上下*/
.shangxia {
  animation-name: shangxia;
  -webkit-animation-name: shangxia;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes shangxia {
  0% {
    -webkit-transform: translate(0, 0%);
  }
  100% {
    -webkit-transform: translate(0, -20%);
  }
}
@-moz-keyframes shangxia {
  0% {
    -moz-transform: translate(0, 0%);
  }
  100% {
    -moz-transform: translate(0, -20%);
  }
}
@-o-keyframes shangxia {
  0% {
    -o-transform: translate(0, 0%);
  }
  100% {
    -o-transform: translate(0, -20%);
  }
}
@-ms-keyframes shangxia {
  0% {
    -ms-transform: translate(0, 0%);
  }
  100% {
    -ms-transform: translate(0, -20%);
  }
}
@keyframes shangxia {
  0% {
    transform: translate(0, 0%);
  }
  100% {
    transform: translate(0, -20%);
  }
}
/*顺时针转圈*/
.zhuanquan {
  animation-name: zhuanquan;
  -webkit-animation-name: zhuanquan;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes zhuanquan {
  0% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes zhuanquan {
  0% {
    -moz-transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes zhuanquan {
  0% {
    -o-transform: rotate(0);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}
@-ms-keyframes zhuanquan {
  0% {
    -ms-transform: rotate(0);
  }
  100% {
    -ms-transform: rotate(360deg);
  }
}
@keyframes zhuanquan {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*逆时针转圈*/
.zhuanquan-ni {
  animation-name: zhuanquan-ni;
  -webkit-animation-name: zhuanquan-ni;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes zhuanquan-ni {
  0% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@-moz-keyframes zhuanquan-ni {
  0% {
    -moz-transform: rotate(360deg);
  }
  100% {
    -moz-transform: rotate(0deg);
  }
}
@-o-keyframes zhuanquan-ni {
  0% {
    -o-transform: rotate(360deg);
  }
  100% {
    -o-transform: rotate(0deg);
  }
}
@-ms-keyframes zhuanquan-ni {
  0% {
    -ms-transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(0deg);
  }
}
@keyframes zhuanquan-ni {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/*弹跳*/
.bounce {
  animation-name: bounce;
  -webkit-animation-name: bounce;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: center bottom;
  -webkit-animation-fill-mode: center bottom;
}
@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
  }
}
@-moz-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -moz-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -moz-transform: translate3d(0, -30px, 0);
  }
  70% {
    -moz-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -moz-transform: translate3d(0, -15px, 0);
  }
  90% {
    -moz-transform: translate3d(0, -4px, 0);
  }
}
@-o-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -o-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -o-transform: translate3d(0, -30px, 0);
  }
  70% {
    -o-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -o-transform: translate3d(0, -15px, 0);
  }
  90% {
    -o-transform: translate3d(0, -4px, 0);
  }
}
@-ms-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -ms-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -ms-transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -ms-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -ms-transform: translate3d(0, -30px, 0);
  }
  70% {
    -ms-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -ms-transform: translate3d(0, -15px, 0);
  }
  90% {
    -ms-transform: translate3d(0, -4px, 0);
  }
}
@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
/*橡皮筋*/
.rubberBand {
  animation-name: rubberBand;
  -webkit-animation-name: rubberBand;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
  }
}
@-moz-keyframes rubberBand {
  from {
    -moz-transform: scale3d(1, 1, 1);
  }
  30% {
    -moz-transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -moz-transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -moz-transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -moz-transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -moz-transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -moz-transform: scale3d(1, 1, 1);
  }
}
@-o-keyframes rubberBand {
  from {
    -o-transform: scale3d(1, 1, 1);
  }
  30% {
    -o-transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -o-transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -o-transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -o-transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -o-transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -o-transform: scale3d(1, 1, 1);
  }
}
@-ms-keyframes rubberBand {
  from {
    -ms-transform: scale3d(1, 1, 1);
  }
  30% {
    -ms-transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -ms-transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -ms-transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -ms-transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -ms-transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -ms-transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
/*摇晃*/
.shake {
  animation-name: shake;
  -webkit-animation-name: shake;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
  }
}
@-moz-keyframes shake {
  from,
  to {
    -moz-transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -moz-transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -moz-transform: translate3d(10px, 0, 0);
  }
}
@-o-keyframes shake {
  from,
  to {
    -o-transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -o-transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -o-transform: translate3d(10px, 0, 0);
  }
}
@-ms-keyframes shake {
  from,
  to {
    -ms-transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -ms-transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -ms-transform: translate3d(10px, 0, 0);
  }
}
@keyframes shake {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translate3d(10px, 0, 0);
  }
}
/*右上到左下*/
.meteor {
  animation-name: meteor;
  -webkit-animation-name: meteor;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes meteor {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
  }
  0% {
    -webkit-transform: translate(100%, -200%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  10% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  50% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  80% {
    -webkit-transform: translate(-180%, 200%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    -webkit-transform: translate(-180%, 200%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@-moz-keyframes meteor {
  from,
  to {
    -moz-transform: translate3d(0, 0, 0);
  }
  0% {
    -moz-transform: translate(100%, -200%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  10% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  50% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  80% {
    -moz-transform: translate(-180%, 200%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    -moz-transform: translate(-180%, 200%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@-o-keyframes meteor {
  from,
  to {
    -o-transform: translate3d(0, 0, 0);
  }
  0% {
    -o-transform: translate(100%, -200%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  10% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  50% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  80% {
    -o-transform: translate(-180%, 200%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    -o-transform: translate(-180%, 200%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@-ms-keyframes meteor {
  from,
  to {
    -ms-transform: translate3d(0, 0, 0);
  }
  0% {
    -ms-transform: translate(100%, -200%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  10% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  50% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  80% {
    -ms-transform: translate(-180%, 200%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    -ms-transform: translate(-180%, 200%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@keyframes meteor {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }
  0% {
    transform: translate(100%, -200%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  10% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  50% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  80% {
    transform: translate(-180%, 200%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    transform: translate(-180%, 200%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
/*退场动画*/
/*从左往右退出*/
.outRight {
  animation-name: outRight;
  -webkit-animation-name: outRight;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes outRight {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(100%, 0);
  }
}
@-moz-keyframes outRight {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(100%, 0);
  }
}
@-o-keyframes outRight {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(100%, 0);
  }
}
@-ms-keyframes outRight {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(100%, 0);
  }
}
@keyframes outRight {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(100%, 0);
  }
}
/*从右往左退出*/
.outLeft {
  animation-name: outLeft;
  -webkit-animation-name: outLeft;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes outLeft {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(-100%, 0);
  }
}
@-moz-keyframes outLeft {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(-100%, 0);
  }
}
@-o-keyframes outLeft {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(-100%, 0);
  }
}
@-ms-keyframes outLeft {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(-100%, 0);
  }
}
@keyframes outLeft {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(-100%, 0);
  }
}
/*从下往上退出*/
.outTop {
  animation-name: outTop;
  -webkit-animation-name: outTop;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes outTop {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(0, -100%);
  }
}
@-moz-keyframes outTop {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(0, -100%);
  }
}
@-o-keyframes outTop {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(0, -100%);
  }
}
@-ms-keyframes outTop {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(0, -100%);
  }
}
@keyframes outTop {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(0, -100%);
  }
}
/*从上往下退出*/
.outBottom {
  animation-name: outBottom;
  -webkit-animation-name: outBottom;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes outBottom {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(0, 100%);
  }
}
@-moz-keyframes outBottom {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(0, 100%);
  }
}
@-o-keyframes outBottom {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(0, 100%);
  }
}
@-ms-keyframes outBottom {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(0, 100%);
  }
}
@keyframes outBottom {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(0, 100%);
  }
}
/*从上往下渐隐*/
.hideToBottom {
  animation-name: hideToBottom;
  -webkit-animation-name: hideToBottom;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes hideToBottom {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate(0, 40%);
  }
}
@-moz-keyframes hideToBottom {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-transform: translate(0, 40%);
  }
}
@-o-keyframes hideToBottom {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -o-transform: translate(0, 40%);
  }
}
@-ms-keyframes hideToBottom {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-transform: translate(0, 40%);
  }
}
@keyframes hideToBottom {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    transform: translate(0, 40%);
  }
}
/*渐隐*/
.fadeOut {
  animation-name: fadeOut;
  -webkit-animation-name: fadeOut;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@-o-keyframes fadeOut {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@-ms-keyframes fadeOut {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
}