GPU Accelerated Properties¶
Opacity, Rotate, Scale, Skew, and Translate are compositor-accelerated (GPU-backed) — the browser composites them on separate layers, keeping the main thread free for your application logic.
How It Works¶
When you animate these properties, the browser promotes the element to its own compositing layer. Interpolation can then happen independently of the main thread, which means:
- No layout recalculation — the element's position in the document flow doesn't change
- No repaint — the browser doesn't need to redraw pixels
- Smooth 60fps — animation frames are handled by the GPU even if the main thread is busy
Reality Check
Browser heuristics, device constraints, and scene complexity can affect layer promotion and compositing behavior.
Which Properties Are GPU Accelerated?¶
| Property | CSS Property |
|---|---|
| Opacity | opacity |
| Rotate | transform: rotate() |
| Scale | transform: scale() |
| Skew | transform: skew() |
| Translate | transform: translate() |
📖 See Animations and Performance (MDN) for more on animation performance and frame rate.
📖 See Stick to Compositor-Only Properties (web.dev) for why compositor-only properties are fast.
Next Steps¶
Check out each GPU Accelerated property, starting with Opacity.
Non-GPU Accelerated Properties.