@import 'fade';
@import 'page';
@import 'rotate';
@import 'slide-up';
@import 'slide-right';
@import 'slide-down';
@import 'slide-left';

/* transition: name | duration | timing function | delay */
/* animation: duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */

// animation-direction:normal|reverse动画反向播放。|alternate动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。|alternate-reverse|initial|inherit从父元素继承该属性。;
// animation-fill-mode: none|forwards在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。|backwards|both|initial|inherit;
// animation-play-state: paused暂停|running播放;
// animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|cubic-bezier(0.1, 0.7, 1.0, 0.1);
// .ani-demo {
//   animation-duration: 1s;
//   animation-timing-function: ease;
//   animation-delay: 0;
//   animation-direction: alternate;
//   animation-fill-mode: both;
//   animation-play-state:running;
//   animation-name: slide-down-enter;
//   animation-iteration-count: infinite;
// }
// @keyframes demo {
//   0% {
//     transform: translate3d(-100%, 0, 0);
//   }
//   50% {
//     transform: translate3d(50%, 0, 0);
//   }
//   100% {
//     transform: translate3d(100%, 0, 0);
//   }
// }
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  animation-delay: 1s;
}

.animated.delay-2s {
  animation-delay: 2s;
}

.animated.delay-3s {
  animation-delay: 3s;
}

.animated.delay-4s {
  animation-delay: 4s;
}

.animated.delay-5s {
  animation-delay: 5s;
}

.animated.fast {
  animation-duration: 800ms;
}

.animated.faster {
  animation-duration: 500ms;
}

.animated.slow {
  animation-duration: 2s;
}

.animated.slower {
  animation-duration: 3s;
}

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}