/* Base */
.anim {
  opacity: 0;
  transition: opacity 800ms ease, transform 800ms ease;
}
.anim.show {
  opacity: 1;
}

/* Directions */
.fade-up { transform: translateY(40px); }
.fade-down { transform: translateY(-40px); }
.fade-left { transform: translateX(40px); }
.fade-right { transform: translateX(-40px); }

/* Zoom */
.zoom-in { transform: scale(0.8); }
.zoom-out { transform: scale(1.2); }

/* Rotate */
.rotate-in { transform: rotate(-10deg) scale(0.9); }

/* Active states normalize */
.anim.show.fade-up,
.anim.show.fade-down,
.anim.show.fade-left,
.anim.show.fade-right,
.anim.show.zoom-in,
.anim.show.zoom-out,
.anim.show.rotate-in {
  transform: none;
}

/* Durations */
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }
.duration-1000 { transition-duration: 1000ms; }

/* Delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-500 { transition-delay: 500ms; }

/* Optional easing */
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }