CSS Animation Performance: What the Browser Actually Does
Understand the browser rendering pipeline and which CSS properties can be animated efficiently. Learn why some animations are silky smooth while others cause jank, and how to fix performance problems.
Key Takeaways
- When CSS changes, the browser performs up to four steps: Style calculation → Layout → Paint → Composite.
- Animate only `transform` and `opacity` whenever possible.
- Movement**: `left/top` → `transform: translate()`
- Chrome DevTools Performance panel shows frame timing and identifies jank.
- The `will-change` property hints to the browser that an element will be animated, allowing it to optimize in advance.
CSS Animation Generator
The Rendering Pipeline
When CSS changes, the browser performs up to four steps: Style calculation → Layout → Paint → Composite. Each step is progressively more expensive. The key to smooth 60fps animation is triggering only compositing — the cheapest step.
Property Cost Tiers
| Tier | Properties | Pipeline Steps | Performance |
|---|---|---|---|
| Composite only | transform, opacity |
Composite | Excellent (GPU) |
| Paint + Composite | color, background, box-shadow |
Paint → Composite | Good |
| Layout + Paint | width, height, margin, padding |
Layout → Paint → Comp | Poor |
| Full pipeline | font-size, display |
Style → Layout → Paint → Comp | Very poor |
The Golden Rule
Animate only transform and opacity whenever possible. These properties run on the GPU compositor thread, independent of the main thread. Even if JavaScript is busy, compositor animations remain smooth.
Common Performance Fixes
- Movement:
left/top→transform: translate() - Sizing:
width/height→transform: scale() - Visibility:
display/visibility→opacitywithpointer-events - Color transitions: Acceptable but ensure
will-changehint
Debugging Animation Performance
Chrome DevTools Performance panel shows frame timing and identifies jank. The Rendering tab highlights paint regions and layer borders. Enable 'FPS meter' for real-time frame rate monitoring during animation development.
will-change Property
The will-change property hints to the browser that an element will be animated, allowing it to optimize in advance. Use sparingly — applying it to too many elements wastes GPU memory. Set it just before animation starts and remove it after completion.