will-change Reference
What is will-change?
The will-change CSS property hints to the browser which element properties are likely to change, so it can prepare optimizations in advance — usually by creating a new compositor layer.
Properties That Benefit
| Property | Benefit | Notes |
|---|---|---|
transform | High | Promotes to compositor layer, enables GPU acceleration |
opacity | High | Same as transform — handled on compositor thread |
filter | Medium-High | GPU-accelerated in most browsers |
clip-path | Medium | Can benefit from layer promotion |
top/left/bottom/right | None | Causes layout — use transform instead |
width/height | None | Causes layout reflow — no GPU benefit |
background-color | Low | Paint operation — minimal benefit |
contents | Special | Hints broad changes coming; browser chooses optimizations |
Do / Don't
✓ DO
Apply just before animation starts (via JS)
Remove after animation ends
Use on specific, frequently animated elements
Test with DevTools to verify benefit
Remove after animation ends
Use on specific, frequently animated elements
Test with DevTools to verify benefit
✗ DON'T
Apply to everything — wastes memory
Use as a default performance fix
Apply on the body or html element
Keep it permanently if animation is rare
Use as a default performance fix
Apply on the body or html element
Keep it permanently if animation is rare
Code Examples
/* Static CSS — only for elements that animate constantly */
.spinner {
will-change: transform;
animation: spin 1s linear infinite;
}
/* Dynamic (preferred) — add/remove around animation */
.card:hover { will-change: transform; }
.card { transition: transform 0.3s ease; }
// JS: prepare before animation, clean up after
element.style.willChange = 'transform, opacity';
element.addEventListener('transitionend', () => {
element.style.willChange = 'auto';
}, { once: true });