will-change

Avatar of Robin Rendle
Robin Rendle on (Updated on )

Learn Development at Frontend Masters

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 as transform or opacity that we want will-change to 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

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

ChromeFirefoxIEEdgeSafari
3636No799.1

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
9290929.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.