frontend-perf-animation-gpu-containment
Frontend Perf Animation GPU Containment
This skill defines the rules for shipping animations and isolation that stay off the main thread and out of layout / paint storms. The rendering pipeline is Style -> Layout -> Paint -> Composite; transitions and animations are cheap when they only hit Composite, expensive when they hit Layout or Paint per frame. This skill builds on [[frontend-core-architecture]] (where Performance sits in the platform) and is referenced by [[frontend-errors-animation-jank]] (the bug catalog).
Sources : MDN: contain (verified 2026-05-19), MDN: content-visibility (verified 2026-05-19), MDN: will-change (verified 2026-05-19), MDN: @property (verified 2026-05-19), web.dev: Animations guide (verified 2026-05-19).
Quick Reference
The compositor-only rule
ALWAYS animate ONLY the following properties for production interactions :
| Property | Pipeline stage |
|---|---|
transform (translate, scale, rotate, skew, matrix) |
Composite only. |
opacity |
Composite only. |
filter (e.g. blur, drop-shadow, brightness) |
Composite when the layer is already promoted; modern engines treat most filters as compositor-friendly. |
NEVER animate any of the following in a repeated or per-frame transition :