@mixin motion-common($time) {
  animation-duration: $time;
  animation-fill-mode: both;
}

@mixin make-motion($className, $keyframeName, $time: 0.3s) {
  .#{$className}-enter-active,
  .#{$className}-appear {
    @include motion-common($time);

    animation-play-state: paused;
  }

  .#{$className}-leave-active {
    @include motion-common($time);

    animation-play-state: paused;
  }

  .#{$className}-enter-active,
  .#{$className}-appear {
    animation-name: #{$keyframeName}In;
    animation-play-state: running;
  }

  .#{$className}-leave-active {
    animation-name: #{$keyframeName}Out;
    animation-play-state: running;
  }
}

@import './fade.scss';
@import './zoom.scss';
@import './move.scss';
@import './slide.scss';
@import './loop.scss';
@import './variables.scss';