.slide-from-left,
.slide-from-right,
.slide-from-top,
.slide-from-bottom {
  opacity: 0;
  transition: opacity 500ms, transform 500ms;
  transition-delay: 50ms;
}

.slide-from-left.visible,
.slide-from-right.visible,
.slide-from-bottom.visible,
.slide-from-top.visible {
  opacity: 1;
}

.slide-from-left {
  transform: translateX(-100%);
}
.slide-from-right {
  transform: translateX(100%);
}
.slide-from-bottom {
  transform: translateY(100%);
}
.slide-from-top {
  transform: translateY(-100%);
}

.slide-from-left.visible,
.slide-from-right.visible {
  transform: translateX(0);
}
.slide-from-bottom.visible,
.slide-from-top.visible {
  transform: translateY(0);
}