// speed动画

@import './../mixins/makeanim.scss';

@mixin speed-anim($className, $keyframeName) {
  @include make-anim($className, $keyframeName);

  .#{$className}-enter,
  .#{$className}-appear {
    opacity: 0;
    animation-timing-function: $ease-out-circ;
  }

  .#{$className}-leave {
    animation-timing-function: $ease-in-circ;
  }
}

@include speed-anim(speed, amosSpeed);

@keyframes amosSpeedIn {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0) skewX(-30deg);
  }

  60% {
    opacity: 1;
    transform: skewX(20deg);
  }

  80% {
    opacity: 1;
    transform: skewX(-5deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes amosSpeedOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) skewX(30deg);
  }
}