.reveal-left,
.reveal-right,
.reveal-up,
.reveal-down {
  opacity: 0;
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.reveal-left {
  transform: translateX(-80px);
}

.reveal-right {
  transform: translateX(80px);
}

.reveal-up {
  transform: translateY(80px);
}

.reveal-down {
  transform: translateY(-80px);
}

.reveal-left.active,
.reveal-right.active,
.reveal-up.active,
.reveal-down.active {
  opacity: 1;
  transform: translate(0, 0);
}

.delay-1 {
  transition-delay: 0.1s;
}

.delay-2 {
  transition-delay: 0.2s;
}

.delay-3 {
  transition-delay: 0.3s;
}

.delay-4 {
  transition-delay: 0.4s;
}

.delay-5 {
  transition-delay: 0.5s;
}