CSS will-change Property

❮ Prev Next ❯

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

The will-change property was first named will-animate.

The will-change property allows browsers to change an element’s scroll position, contents or more than one CSS property values. However, many properties will not have any effect.

The values must be comma-separated. The will-change property can have the following values: unset, initial, inherit, will-change, auto, scroll-position, or contents.

This property should be used with caution. Different browsers use this property differently and overusing it may ignore the property.

Proper usage of the will-change property:

The will-change property should not be applied to too many elements. Its overuse can slow down the page load speed. In such a case, a lot of resources can be consumed.
When using the will-change property it’s better to use script code before and after the change occurs.
The will-change property should not be applied to elements to make a premature optimization. There isn’t any need to add will-change to elements if a page is performing well. This property is expected to be used as a last option for handling the existing problems of performance.
The browser should be given some time for optimizations. The will-change property is intended to inform about the properties that are expected to change ahead of time.
The will-change property can affect an element’s visual display when it is used with values creating a stacking context.

Initial Value	auto
Applies to	All elements.
Inherited	No.
Animatable	No.
Version	CSS1
DOM Syntax	object.style.willChange = "scroll-position";

Syntax

will-change: auto | scroll-position | contents | <custom-ident> | initial | inherit;

Example of the will-change property:

<!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>
      var circles = document.getElementsByClassName("circle blue");
      function update(t) {
        for (var i = 0; i < circles.length; i++) {
          var xpos = Math.sin(t / 1000 + 1000 * i) * 50 + 50;
          circles[i].style.transform = "translate(" + xpos + "px, 0px)";
        }
        window.requestAnimationFrame(update);
      }
      update();
    </script>
  </body>
</html>

Try it Yourself »

Values

Value	Description
auto	Standard browser optimization should be applied.
scroll-position	Specifies that the element’s scroll position will be animated in the future.
contents	Specifies that the element’s content will be animated in the future.
<custom-ident>	Expected to change or animate the property with the given name on the element in the near future.If the property is shorthand the changes will expand to all the longhand properties.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.