@mixin slide-motion($className, $keyframeName) {
  @include make-motion($className, $keyframeName);
  .#{$className}-enter-active, .#{$className}-appear {
    opacity: 0;
    animation-timing-function: $ease-in-out;
  }
  .#{$className}-leave-active {
    animation-timing-function: $ease-in-out;
  }
}

@include slide-motion(slide-up, hSlideUp);
@include slide-motion(slide-down, hSlideDown);
@include slide-motion(slide-left, hSlideLeft);
@include slide-motion(slide-right, hSlideRight);

@keyframes hSlideUpIn {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0.8);
  }

  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
}

@keyframes hSlideUpOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }

  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0.8);
  }
}

@keyframes hSlideDownIn {
  0% {
    opacity: 0;
    transform-origin: 100% 100%;
    transform: scaleY(0.8);
  }

  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scaleY(1);
  }
}

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

  100% {
    opacity: 0;
    transform-origin: 100% 100%;
    transform: scaleY(0.8);
  }
}

@keyframes hSlideLeftIn {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleX(0.8);
  }

  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleX(1);
  }
}

@keyframes hSlideLeftOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleX(1);
  }

  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleX(0.8);
  }
}

@keyframes hSlideRightIn {
  0% {
    opacity: 0;
    transform-origin: 100% 0%;
    transform: scaleX(0.8);
  }

  100% {
    opacity: 1;
    transform-origin: 100% 0%;
    transform: scaleX(1);
  }
}

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

  100% {
    opacity: 0;
    transform-origin: 100% 0%;
    transform: scaleX(0.8);
  }
}