.reveal {
  opacity: 0;
  transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.reveal.up {
  transform: translateY(40px);
}
.reveal.left {
  transform: translateX(-60px);
}
.reveal.right {
  transform: translateX(60px);
}
.reveal.visible {
  opacity: 1;
}
.reveal.up.visible {
  transform: translateY(0);
}
.reveal.left.visible {
  transform: translateX(0);
}
.reveal.right.visible {
  transform: translateX(0);
}