How the browser paints
Rendering runs through stages. Style, then layout to compute positions, then paint to fill pixels, then composite to combine layers on the GPU.
Animating geometry like width triggers layout and paint every frame, which is slow. Animating transform and opacity can be handled entirely by the compositor, skipping layout and paint.
Promoting a layer
The will change property tells the browser an element is about to animate, so it can promote the element to its own compositor layer ahead of time. This avoids a jump when the animation starts.
- Set will change transform on an element you are about to move.
- The browser allocates a layer and prepares it for cheap GPU compositing.
The cost
Each layer costs memory, and too many layers slow the browser down.
- Apply will change only just before animating, not permanently in a stylesheet.
- Remove the hint when the animation finishes.
- Treat it as a last resort hint, not a default performance boost.
Key idea
will change promotes an element to its own compositor layer for smooth GPU animation, but each layer costs memory so apply it sparingly and remove it after.