CSS @keyframes fade

CSS @keyframes fade: animate opacity the right way

A fade is the simplest CSS animation: opacity goes from 0 to 1 (fade in) or 1 to 0 (fade out) over a duration. Behind the scenes you declare a @keyframes rule, then bind it to an element via the animation shorthand. Opacity (alongside transform) is one of only two properties the browser can animate purely on the compositor — meaning it skips layout and paint, runs on the GPU, and stays smooth even on low-end devices.

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.element {
  animation: fadeIn 0.5s ease forwards;
}

Animation shorthand decoded

The full shorthand is animation: name duration timing-function delay iteration-count direction fill-mode play-state. The two values that trip people up are fill-mode and timing-function:

• fill-mode — forwards keeps the end state after the animation finishes (essential for fade-in), backwards applies the start state during the delay, both does both, default is none (reverts to original CSS — usually what beginners don't want).
• timing-function — ease is the default but feels lazy; ease-out is usually best for fades (starts fast, ends slow). cubic-bezier(0.4, 0, 0.2, 1) is the "standard" Material curve.
• iteration-count — infinite for pulsing, combined with direction: alternate for breathing.

Variations: fade-in-up, crossfade, stagger

Adding transform: translateY(20px) in from creates fadeInUp; translateX gives left/right variants. Crossfade animates two stacked elements simultaneously — one fading out, one fading in. Stagger applies the same animation to a list of children with incrementing animation-delay, producing a cascading reveal. Daniel Eden's Animate.css library ships hundreds of ready-made fade keyframes if you don't want to write your own.

Performance and accessibility

Stick to opacity and transform — both are GPU-composited. Animating width, height, top or left triggers layout on every frame and tanks performance. Hint the browser with will-change: opacity, but remove it after the animation finishes (it consumes GPU memory). Most importantly, respect @media (prefers-reduced-motion: reduce) — users with vestibular disorders set this OS-level flag and your CSS should disable or shorten the animation accordingly.

@media (prefers-reduced-motion: no-preference) {
  .element { animation: fadeIn 0.5s ease forwards; }
}

Modern alternatives: WAAPI and View Transitions

The Web Animations API (WAAPI) is the JavaScript equivalent — element.animate([{opacity:0},{opacity:1}], 500) — useful when you need precise control or to trigger animations from logic. The View Transitions API (Chrome 111+, 2023) animates between two DOM states (or two pages) with a single line, replacing dozens of manual keyframes for typical page transitions. For scroll-triggered fades, pair IntersectionObserver with a CSS class toggle so animations run only when the element enters the viewport.

FAQ

Is CSS animation faster than JavaScript? For opacity and transform, yes — they run on the compositor. JS-based libraries like GSAP are competitive when you animate properties that aren't composited or need synchronisation across many elements.

Can I animate SVG paths? Not via CSS @keyframes alone for the d attribute. Use SMIL, GSAP's MorphSVGPlugin or Snap.svg. SVG opacity, transform and stroke properties animate fine with CSS.

How do I loop forever? Add animation-iteration-count: infinite. Combine with animation-direction: alternate for a back-and-forth pulse.

Why is my element invisible after the animation? The default fill-mode is none, which reverts to the pre-animation CSS (opacity 1, or whatever you set). Add forwards to keep the end state.