/* 离场动画需要加上!important */

/* 淡入 */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1;}
}
.fade-in {
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}
.fade-in-quick {
  animation-name: fadeIn;
  animation-duration: 0.3s;
  animation-fill-mode: both;
}
/* 淡出 */
@keyframes fadeOut {
  0% { opacity: 1;}
  100% { opacity: 0;}
}
.fade-out {
  animation-name: fadeOut !important;
  animation-duration: 0.5s !important;
  animation-fill-mode: both !important;
}
.fade-out-quick {
  animation-name: fadeOut !important;
  animation-duration: 0.3s !important;
  animation-fill-mode: both !important;
}
/* 阴影 */
@keyframes shadowOn {
  0% { box-shadow: 0 0 0;}
  100% { box-shadow: 0 0 10px #bbb;}
}
.shadow-on {
  animation-name: shadowOn ;
  animation-duration: 0.5s ;
  animation-fill-mode: both ;
}
/*抖动*/
@keyframes shake-rotate {
  0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
  20% { -webkit-transform: translate(0px, 0px) rotate(-5.5deg); }
  60% { -webkit-transform: translate(0px, 0px) rotate(3.5deg); }
  80% { -webkit-transform: translate(0px, 0px) rotate(-2.5deg); }
  98% { -webkit-transform: translate(0px, 0px) rotate(-3.5deg); }
}
.shake-rotate {
  animation: shake-rotate 0.1s infinite alternate;
}
/*竖直翻转*/
@keyframes flipInY {
  from {transform: perspective(400px) rotate3d(0, 1, 0, 90deg);animation-timing-function: ease-in;opacity: 0;}
  40% {transform: perspective(400px) rotate3d(0, 1, 0, -20deg);animation-timing-function: ease-in;}
  60% {transform: perspective(400px) rotate3d(0, 1, 0, 10deg);opacity: 1;}
  80% {transform: perspective(400px) rotate3d(0, 1, 0, -5deg);}
  to {transform: perspective(400px);}
}
/*页面切换动效*/
.slide-fade-in-down {
  animation-name: slideInDown;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}
.slide-fade-in-down-quick {
  animation-name: slideInDown;
  animation-duration: 0.3s;
  animation-fill-mode: both;
}
@keyframes slideInDown {
  0% { transform: translate3d(0,-10px,0); opacity: 0; }
  100% { transform: translate3d(0,0,0); opacity: 1;}
}
@keyframes slideInDown {
  0% { transform: translate3d(0,-10px,0); opacity: 0; }
  100% { transform: translate3d(0,0,0); opacity: 1;}
}
.slide-fade-in-up {
  animation-name: slideInUp !important;
  animation-duration: 0.5s !important;
  animation-fill-mode: both !important;
}
.slide-fade-in-up-quick {
  animation-name: slideInUp;
  animation-duration: 0.3s;
  animation-fill-mode: both;
}
@keyframes slideInUp {
  0% { transform: translate3d(0,10px,0); opacity: 0; }
  100% { transform: translate3d(0,0,0); opacity: 1;}
}
@keyframes slideOutUp {
  0% { transform: translate3d(0,0,0); opacity: 1; }
  100% { transform: translate3d(0,-10px,0); opacity: 0;}
}
.slide-fade-out-up {
  animation-name: slideOutUp !important;
  animation-duration: 0.5s !important;
  animation-fill-mode: both !important;
}
.scale-in {
  animation-name: scaleIn;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}
@keyframes scaleIn {
  0% { transform: scale(.1) }
  100% { transform: scale(1) }
}
.scale-in-out {
  animation-name: scaleInOut;
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes scaleInOut {
  0% { transform: scale(.1) }
  50% { transform: scale(1.2) }
  100% { transform: scale(1) }
}
@keyframes scaleOutIn {
  0% { transform: scale(1) }
  50% { transform: scale(1.2) }
  100% { transform: scale(1) }
}
@keyframes rotating{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}