The render pipeline
A browser turns changes into pixels through style, layout, paint, and composite. Animating a property that triggers layout forces the browser to recompute geometry every frame, which is the slowest path.
- Changing width or top triggers layout then paint then composite
- Changing color triggers paint then composite
- Changing transform or opacity can run on the compositor alone
Cheap properties
Transform and opacity can be animated by the compositor thread without touching layout or paint, so they hold a smooth sixty or more frames per second even when the main thread is busy.
Pipeline cost
Practical rules
- Prefer transform and opacity for movement and fades
- Use the will change hint sparingly to promote a layer, then remove it
- Keep work off the main thread so input stays responsive
- Respect the reduced motion preference for users who want less animation
Key idea
Animate transform and opacity so the compositor handles motion without layout or paint, and avoid animating geometry properties that force a costly recompute every frame.