will-change
The will-change CSS property gives hints to the browser about expected changes to an element's scroll position, contents, or style. These hints allow browsers to optimize for upcoming style changes.
Overview
The will-change CSS property gives hints to the browser about expected changes to an element's scroll position, contents, or style. These hints allow browsers to optimize for upcoming style changes.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 36 | 79 | 36 | 9.1 | 36 | 9.3 | |
auto | 36 | 79 | 36 | 9.1 | 36 | 9.3 |
contents | 36 | 79 | 36 | 9.1 | 36 | 9.3 |
scroll-position | 36 | 79 | 36 | 9.1 | 36 | 9.3 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
/* Optimize hover animations */
.card:hover {
will-change: transform;
}
.card:active {
transform: scale(0.98);
}
/* Apply and remove dynamically via JS */
.animating {
will-change: transform, opacity;
}Live demo
Use cases
Using will-change
The will-change CSS property gives hints to the browser about expected changes to an element's scroll position, contents, or style. These hints allow browsers to optimize for upcoming style changes.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features