CSS will-change Property

Description

The CSS will-change property is used to hint to the browser about which properties of an element are likely to change in the future. This allows the browser to optimize the element's rendering ahead of time, potentially resulting in better performance.
For example, let's say you have a page with a button that will change color when it is hovered over. You can use will-change to tell the browser that the button's background-color property is likely to change soon. This will allow the browser to pre-calculate the new background color and have it ready to apply when the button is hovered over.
Another example is if you have a page with an element that will be animated. You can use will-change to tell the browser that the element's transform property is likely to change soon. This will allow the browser to optimize the animation rendering.
The will-change property can be used on any element, but it is most effective when used on elements that are likely to change frequently, such as buttons, animated elements, and elements that are scrolled into view.

Initial value

auto

Applies to

all elements

Inherited

no

Computed value

as specified

Animatable

discrete

JavaScript syntax

object.style.willChange

Syntax

will-change: auto | <animatable-feature>

Values

• autoThe browser will apply the optimizations it thinks are best.
• <animatable-feature>The <animatable-feature> can be one of the following values:
  scroll-position - Indicates that the scroll position of the element is likely to change.
  contents - Indicates that the contents of the element are likely to change.

Example

.button {
  will-change: background-color;
}

.animated-element {
  will-change: transform;
}

Browser Support

The following table will show you the current browser support for the CSS will-change property.

Desktop
79	36	36	24	9.1

Tablets / Mobile
36	36	24	9.3	3	37

Last updated by CSSPortal on: 31st December 2023