CSS will-change Property

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. But do not apply the will-change property to too many elements. It cannot be one of the following values: unset, initial, inherit, will-change, auto, scroll-position, or contents.

The will-change shouldn’t be used unless an element is known or expected to change in the near future.

The will-change also influences the visual appearance of elements.

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

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

<!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>

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.




Related articles