/* slideUp */
@keyframes slideUp-enter {
  from {
    transform: translate3d(0, 100px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideUp-enter {
  animation: slideUp-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@keyframes slideUp-leave {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100px, 0);
  }
}
.slideUp-leave {
  animation: slideUp-leave both;
}

/* slideDown */
@keyframes slideDown-enter {
  from {
    transform: translate3d(0, -100px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideDown-enter {
  animation: slideDown-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@keyframes slideDown-leave {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -100px, 0);
  }
}
.slideDown-leave {
  animation: slideDown-leave both;
}

/* slideLeft */
@keyframes slideLeft-enter {
  from {
    transform: translate3d(150px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideLeft-enter {
  animation: slideLeft-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@keyframes slideLeft-leave {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(150px, 0, 0);
  }
}
.slideLeft-leave {
  animation: slideLeft-leave both;
}

/* slideRight */
@keyframes slideRight-enter {
  from {
    transform: translate3d(-150px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideRight-enter {
  animation: slideRight-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@keyframes slideRight-leave {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-150px, 0, 0);
  }
}
.slideRight-leave {
  animation: slideRight-leave both;
}