$animation-duration-base: 2s;
$ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
$ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);

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

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

@mixin make-motion(
  $className,
  $keyframeName,
  $duration: $animation-duration-base
) {
  .#{$className}-enter,
  .#{$className}-appear {
    @include motion-common($duration);
    animation-play-state: paused;
  }
  .#{$className}-leave {
    @include motion-common-leave($duration);
    animation-play-state: paused;
  }
  .#{$className}-enter.#{$className}-enter-active,
  .#{$className}-appear.#{$className}-appear-active {
    animation-name: #{$keyframeName}In;
    animation-play-state: running;
  }
  .#{$className}-leave.#{$className}-leave-active {
    animation-name: #{$keyframeName}Out;
    animation-play-state: running;
    pointer-events: none;
  }
}

@mixin zoom-motion(
  $className,
  $keyframeName,
  $duration: $animation-duration-base
) {
  @include make-motion($className, $keyframeName, $duration);
  .#{$className}-enter,
  .#{$className}-appear {
    opacity: 0;
    animation-timing-function: $ease-out-circ;
  }
  .#{$className}-leave {
    animation-timing-function: $ease-in-out-circ;
  }
}
// @include zoom-motion(zoom-up, antZoomUp);

@keyframes antMoveUpIn {
  0% {
    transform-origin: 0 0;
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform-origin: 0 0;
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes antMoveUpOut {
  0% {
    transform-origin: 0 0;
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform-origin: 0 0;
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes antZoomBigIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes antZoomBigOut {
  0% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}