CSS Animation Performance: What to Animate and What to Avoid
Not all CSS properties are equal when it comes to animation performance. Animating the wrong property can drop frame rates to single digits. Learn which properties trigger GPU acceleration and which to avoid.
Key Takeaways
- Browsers render pages in four stages: Style calculation, Layout, Paint, and Composite.
- Animate only `transform` and `opacity`.
- The CSS `will-change` property tells the browser to prepare a GPU layer for an element before the animation starts.
- Use Chrome DevTools Performance panel to record animations.
CSS Animation Generator
The Rendering Pipeline
Browsers render pages in four stages: Style calculation, Layout, Paint, and Composite. Animating a property that triggers an earlier stage forces all subsequent stages to re-run every frame.
Property Tiers
| Tier | Triggers | Properties | Performance |
|---|---|---|---|
| Composite-only | Composite | transform, opacity |
Excellent (GPU) |
| Paint | Paint + Composite | color, background, box-shadow |
Moderate |
| Layout | Layout + Paint + Composite | width, height, margin, padding |
Poor |
The Golden Rule
Animate only transform and opacity. These two properties are handled entirely on the GPU compositor thread, meaning they do not block the main thread and maintain 60fps even on budget mobile devices.
Replacing Layout Animations
Instead of animating width from 0 to 100%, use transform: scaleX(0) to scaleX(1). Instead of animating top or left, use transform: translateX() or translateY(). The visual result is identical but performance improves dramatically.
Will-Change Hint
The CSS will-change property tells the browser to prepare a GPU layer for an element before the animation starts. Use it sparingly — one or two elements per page at most. Overuse creates excessive GPU memory consumption.
.card { will-change: transform; }
.card:hover { transform: translateY(-4px); }
Measuring Performance
Use Chrome DevTools Performance panel to record animations. Look for green bars (paint) and purple bars (layout) in the flame chart. An animation that only shows yellow (scripting) and green-composite bars is well-optimized. Enable the FPS counter overlay to spot frame drops in real time.