How the browser composites
Rendering happens in stages: layout, paint, and composite. The compositor can move and blend layers on the GPU without repainting them. Properties like transform and opacity can animate on this fast path.
The will change property tells the browser ahead of time which properties you plan to animate, so it can promote the element to its own compositor layer and prepare the GPU.
Use it sparingly
Promotion is not free. Each layer consumes memory, and too many layers can slow the page or exhaust GPU memory.
- Apply will change just before an animation, not permanently in a stylesheet.
- Remove it once the animation finishes so the browser can reclaim the layer.
- Prefer animating transform and opacity, which skip layout and paint entirely.
Used as a targeted, temporary hint, it makes animations smoother. Used everywhere, it backfires.
Key idea
will change promotes an element to a GPU compositor layer for cheap transform and opacity animation, but overuse wastes memory.