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
Edge Chrome Firefox Opera Safari
793636249.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
3636249.3337

Last updated by CSSPortal on: 31st December 2023