@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: translate3d(-83%, 0, 0);
    transform: translate3d(-83%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideIn {
  -webkit-animation: slideIn 200ms both;
  animation: slideIn 200ms both;
}
/**
 * 向左滑出    
 * */
@-webkit-keyframes slideLeftOut {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-83%, 0, 0);
    transform: translate3d(-83%, 0, 0);
  }
}
.slideLeftOut {
  -webkit-animation: slideLeftOut 200ms both;
  animation: slideLeftOut 200ms both;
}
/*淡出*/
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation: fadeOut 200ms both;
  animation: fadeOut 200ms both;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation: fadeIn 200ms both;
  animation: fadeIn 200ms both;
}
@-webkit-keyframes slideUpOut {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}
@keyframes slideUpOut {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}
.slideUpOut {
  -webkit-animation: slideUpOut 200ms both;
  animation: slideUpOut 200ms both;
}
@-webkit-keyframes slideUpIn {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideUpIn {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideUpIn {
  -webkit-animation: slideUpIn 200ms both;
  animation: slideUpIn 200ms both;
}
@-webkit-keyframes d_slideUpOut {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0);
    opacity: 0;
  }
}
@keyframes d_slideUpOut {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0);
    opacity: 0;
  }
}
.d_slideUpOut {
  -webkit-animation: d_slideUpOut 200ms both;
  animation: d_slideUpOut 200ms both;
}
@-webkit-keyframes d_slideUpIn {
  0% {
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes d_slideUpIn {
  0% {
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.d_slideUpIn {
  -webkit-animation: d_slideUpIn 200ms both;
  animation: d_slideUpIn 200ms both;
}

/*index页专属动画*/
@-webkit-keyframes slideInOut {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10% {
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0);
  }
  100%{
  	 -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInOut {
   0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
 	5% {
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0);
  }
  100%{
  	 -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInOut {
  -webkit-animation: slideInOut 200ms both;
  animation: slideInOut 200ms both;
}

@-webkit-keyframes slideInOut {
   0% {
    opacity: 1;
  }
  5% {
    opacity: 0;
  }
  100%{
  	opacity: 1;
  }
}
@keyframes fadeInOut {
   0% {
    opacity: 1;
  }
  5% {
    opacity: 0;
  }
  100%{
  	opacity: 1;
  }
}
.fadeInOut {
  -webkit-animation: fadeInOut 200ms both;
  animation: fadeInOut 200ms both;
}