The will-change property in CSS optimizes animations by letting the browser know which properties and elements are just about to be manipulated, potentially increasing the performance of that particular operation.
Syntax
will-change: <animateable-feature> = scroll-position | contents | <custom-ident>- Initial value:
auto - Applies to: all elements
- Inherited: no
- Percentages: n/a
- Computed value: specific valued
- Animation type: not animatable
Values
This property has four values:
auto: standard browser optimizations will be applied.scroll-position: indicates that the element’s scroll position will be animated sometime in the near future so the browser will prepare for content which is not visible in the scroll window of an element.contents: the contents of an element is expected to change so the browser will not cache this element’s content.<custom-ident>: any user-defined property such astransformoropacitythat we wantwill-changeto be applied to.
Using the property
We can inform the browser that a change is about to take place to the transform property like so:
.element {
will-change: transform;
}Or if we want to declare multiple values we can use a comma-separated list such as:
.element {
will-change: transform, opacity;
}It’s important not to overuse the will-change property however since it might, in fact, cause the page to be less performant (note that there is not an all value for this property for a good reason). As a result, MDN recommends that the property be used as a last resort for existing performance issues rather than ones you anticipate could happen. And, when using it, it’s recommended to toggle will-change just before an element or property changes and then toggle it off again shortly after the process is finished.
Other resources
- Sara Soueidan’s detailed walkthrough
will-changeon MDNwill-changeon W3C- “What nobody tells you about will-change” by Thierry Koblentz
Browser support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 36 | 36 | No | 79 | 9.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 123 | 124 | 123 | 9.3 |
Specification
will-change is defined in the CSS Will Change Module Level 1 specification, which is currently in Editor’s Draft status. This means the information provided here and in the specification could change before it reaches candidate recommendation.
Thanks mate; helpful article.
So…is there any indication that this is still a thing, and actually helps performance?
It is still a thing, I’ve used it a couple times to deal with fixed position backgrounds causing the page to appear laggy, but it’s a very niche thing that is rarely needed, it only helps performance if there is already a Major issue
I’m developing some animations using CSS, and there are some points were more than one of them start at the same time, letting the whole thing to be not very smooth. So I was looking for something to help about this issue, and I landed on this article.
I have tried to use this rule, but unfortunately it doesn’t seem to improve the animation flow.
Interestingly Google seems to recommend using this more than the MDN docs and their article on it https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance does not refer to it as a “last resort”. Suggests it might be more helpful in Chrome.
Note that moz docs say: “Important: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.”
What about
will-change: opacity, contents? Would this work?Yep! Comma-separating values is totally legit. The spec has some excellent tips on using the property, one of which is to be mindful of using it across too many properties and elements.
Hi everyone!
I know this article it’s a bit old, but has anyone experienced that when the
will-changeproperty is applied to an element on Chrome it gets a bit blurry?Try to this solution,
and
we will not a css for change?