Will-change tells the browser that specified properties are likely to change. It is a hint, not an instruction to make an animation fast or a promise that a new layer will be created.
Make this comfortable
CSS will-change: reserve a rendering hint for measured trouble
When to use it
An operations drawer slides into view during case review. Its transform transition might already run smoothly; measure it before adding a persistent hint. If tracing shows a real rendering issue, scope will-change to the drawer's imminent transition state and remove that state after the motion completes. The sample uses a state class applied by the interaction layer, which must also clean it up on cancellation. Do not put will-change transform on every card in a large list. A browser can allocate extra resources for hinted elements and keep them around longer than the animation, especially if the class never clears. Test an open, close, interrupted close, and reduced-motion path.
.review-drawer.is-preparing-motion { will-change: transform; }
.review-drawer { transition: transform 180ms ease-out; }
@media (prefers-reduced-motion: reduce) { .review-drawer { transition: none; } }Cost and verification
The intended benefit is avoiding work at the moment of motion, but extra layers and memory can outweigh it. Measure frame timing and memory on a realistic device; a desktop screenshot cannot prove the optimization. Adding the hint early enough may help, yet leaving it active indefinitely turns a temporary expense into a standing one. Test focus and reading order when the drawer moves; compositing speed does not establish interaction quality. Prefer a simple transform transition without a hint until evidence says otherwise. Do not use will-change as a general-purpose performance reset.
Common Mistakes
- Do not apply will-change to every repeated card.
- Do not leave a temporary hint active forever.
- Do not claim improved motion without before-and-after measurement.
Connected lessons
css
reference
web