will-change
The will-change property hints to the browser which properties are about to change so it can optimize ahead of time.
Syntax
will-change: auto | <property>...; /* e.g. transform, opacity */
Examples
.panel.is-animating {
will-change: transform, opacity;
}
Output
The browser promotes the panel to its own layer before animation for smoother transforms.
Notes
Use sparingly and only just before an animation; permanent or broad use wastes memory and can hurt performance. Add it via a class right before animating and remove it afterward. It is a hint, not a guarantee.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 36 |
| firefox | 36 |
| safari | 9.1 |
| edge | 79 |