CSS Mastery

Field Guide / intermediate

CSS animation performance: move pixels without moving layout

The safest UI animations change transform and opacity, but production motion also needs layout, accessibility, and timing discipline.

By Andrew J Hughes

Animation bugs usually come from asking motion to change layout. If every frame changes width, height, top, left, margin, or grid tracks, the browser has to recalculate layout while the user is watching.

For most interface motion, start with transform and opacity. Then ask whether the motion is necessary, interruptible, and respectful of user preferences.

Animate the visual layer

.menu {
  transform: translateY(-0.5rem);
  opacity: 0;
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.menu[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
}

This changes how the menu is painted without recalculating the surrounding layout every frame.

Do not animate from auto

Animating height: 0 to height: auto is not directly interpolable. Common workarounds include max-height hacks, grid row tricks, or JavaScript-measured heights. Each has tradeoffs. For disclosure content, consider whether instant open is better than fragile motion.

If the animation is purely decorative, prefer the simpler interaction.

Respect reduced motion

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: 1ms;
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}

This is not about removing all polish. It is about preventing motion from becoming a barrier.

Reserve will-change

will-change can help the browser prepare for animation, but it is not a performance seasoning to sprinkle everywhere. Leaving it on many elements can increase memory pressure. Add it close to the interaction if profiling shows a real benefit.

The production checklist

Before shipping motion, test keyboard interaction, reduced motion, slow devices, and interrupted states. Hover-only animation is not enough. A menu, drawer, or toast must still make sense when opened by keyboard, closed quickly, or skipped by a user who prefers less motion.

References