/* Base */
.fade-in,
.fade-up,
.fade-left,
.fade-right{
  opacity: 0;
  transition: opacity 1s ease-out, transform 1s ease-out;
  will-change: transform, opacity;
}

/* Simple fade-in */
.fade-in.visible {
  opacity: 1;
}

/* Fade-up */
.fade-up {
  transform: translateY(40px);
}
.fade-up.visible {
  transform: translateY(0);
  opacity: 1;
}

/* Fade-left */
.fade-left {
  transform: translateX(-60px);
}
.fade-left.visible {
  transform: translateX(0);
  opacity: 1;
}

/* Fade-right */
.fade-right {
  transform: translateX(60px);
}
.fade-right.visible {
  transform: translateX(0);
  opacity: 1;
}