CSS Animation Performance Best Practices
The definitive checklist for smooth 60 fps CSS animations: which properties to animate, how to avoid layout thrashing, and when to use will-change.
Janky animations break the illusion of a polished UI. Most performance problems come down to a handful of avoidable mistakes. This checklist covers everything you need to hit a consistent 60 fps.
Animate only compositor-friendly properties
The browser compositing pipeline has a fast path for two CSS properties:transform and opacity. Animating these skips layout and paint entirely — the GPU handles them without touching the main thread.
Avoid animating width, height, top,left, margin, or padding. Each change forces a full layout recalculation for the affected subtree.
Use will-change sparingly
will-change: transform hints to the browser to promote the element to its own compositor layer before the animation starts, eliminating the promotion cost mid-animation. But every promoted layer consumes GPU memory — apply it only during the animation and remove it afterwards:
.card:hover { will-change: transform; }
.card { transition: transform 0.3s ease; }Prefer CSS transitions over JavaScript for simple motion
CSS transitions and keyframe animations run off the main thread. JavaScript-driven animations (even with requestAnimationFrame) compete with script execution. Use JS animation libraries only when you need sequencing or physics that CSS cannot express.
Avoid layout thrashing in JS animations
If you are driving animation from JS, read all layout properties (e.g.getBoundingClientRect) in a batch, then write all style changes in a separate batch. Interleaving reads and writes forces the browser to recalculate layout on each read.
Cap animation duration
Micro-interactions should complete in 100–300 ms. Entrance animations work best at 200–500 ms. Longer animations feel slow on repeat visits. Useprefers-reduced-motion to respect user accessibility preferences.
Test with DevTools performance profile
Record a performance trace in Chrome DevTools while the animation plays. Look for "Recalculate Style" or "Layout" entries in the flame chart — each one is a performance opportunity.