CSS will-change Property

The will-change property gives the browser a hint about how an element is expected to change in the near future. Optimizations should be set up before the change occurs.

The will-change property was originally proposed as will-animate before being renamed.

The will-change property allows browsers to optimize an element’s layout, paint, or multiple CSS properties. However, specifying many properties will not improve performance.

The values must be comma-separated. The will-change property can have the following values: auto, <custom-ident>, initial, inherit, or unset.

WARNING

This property should be used with caution. Different browsers handle this property differently, and overusing it may cause the browser to ignore it. Overuse can also force unnecessary compositing layers, increasing memory usage and degrading performance.

Proper usage of the will-change property:

The will-change property should not be applied to too many elements. Overuse can slow down page load speed and consume excessive resources.
When using the will-change property, it’s better to add and remove it via script before and after the change occurs.
The will-change property should not be used for premature optimization. There is no need to add will-change to elements if a page is performing well. This property should be used as a last resort to address existing performance issues.
The browser needs time to apply optimizations. The will-change property is intended to inform the browser about properties expected to change ahead of time.
The will-change property can affect an element’s visual display when it is used with values that create a stacking context.

Initial Value	auto
Applies to	All elements.
Inherited	No.
Animatable	No.
Version	CSS Transitions Module Level 1
DOM Syntax	`object.style.willChange = "transform";`

Note: In JavaScript, the property name uses camelCase (willChange), while the CSS property uses hyphens (will-change).

Syntax

CSS will-change values

css

will-change: auto | <custom-ident> | initial | inherit | unset;

Example of the will-change property:

CSS will-change code example

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .circle {
        width: 50px;
        height: 50px;
        transform: translate(50px, 0px);
        border-radius: 30px;
      }
      .circle.blue {
        background: #1c87c9;
        will-change: transform;
      }
      .circle.green {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Will-change property example</h2>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <script>
      const circles = document.getElementsByClassName("circle blue");
      function update(t) {
        for (let i = 0; i < circles.length; i++) {
          const xpos = Math.sin(t / 1000 + 1000 * i) * 50 + 50;
          circles[i].style.transform = "translate(" + xpos + "px, 0px)";
        }
        window.requestAnimationFrame(update);
      }
      update();
    </script>
  </body>
</html>

Values

Value	Description
auto	Standard browser optimization should be applied.
`<custom-ident>`	Specifies the CSS property expected to change or animate on the element in the near future. If the property is a shorthand, the changes will expand to all its longhand properties.
initial	Makes the property use its default value.
inherit	Inherits the property from its parent element.
unset	Resets the property to its inherited value or initial value, depending on the property.

CSS will-change Property ​

Proper usage of the will-change property: ​

Syntax ​

Example of the will-change property: ​

Values ​

Practice ​

CSS will-change Property

Proper usage of the will-change property:

Syntax

Example of the will-change property:

Values

Practice