Fade in / Fade out

Element appears or disappears by changing opacity.

Duration 180ms

Easing ease-out

Delay 0ms

Opacity 0 -> 1

Code

.fade-in {
  --duration: 180ms;
  --easing: cubic-bezier(0.23, 1, 0.32, 1);
  --delay: 0ms;
  --opacity-from: 0;
  --opacity-to: 1;

  animation: fade-in var(--duration) var(--easing) var(--delay) both;
}

@keyframes fade-in {
  from { opacity: var(--opacity-from); }
  to { opacity: var(--opacity-to); }
}

Original vocabulary by Emil Kowalski. Built with his animation-vocabulary, improve-animations, and review-animations skills.