.reveal {
  opacity: 0;
}

.reveal.in-view {
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: forwards;
  animation-name: reveal-from-bottom;
}
.reveal-from-left.in-view { animation-name: reveal-from-left; }
.reveal-from-right.in-view { animation-name: reveal-from-right; }
.reveal-from-bottom.in-view { animation-name: reveal-from-bottom; }

.reveal.delay-1.in-view { animation-delay: 0.1s; }
.reveal.delay-2.in-view { animation-delay: 0.2s; }
.reveal.delay-3.in-view { animation-delay: 0.3s; }
.reveal.delay-4.in-view { animation-delay: 0.4s; }

@keyframes reveal-from-bottom {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-from-left {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes reveal-from-right {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}