Definition
The will-change CSS property is used to inform the browser in advance about an element’s upcoming changes in order to optimize rendering and performance. It allows you to indicate to the browser which properties or aspects of an element are likely to change, enabling the browser to prepare for those changes and apply appropriate optimizations.
The will-change property accepts one or more values:
- A specific CSS property name, such as
transform,opacity, orscroll-position, indicates that the element is likely to undergo changes in that particular property. - The
autovalue is used to indicate that the element’s changes are not known in advance or cannot be specified explicitly.
Here’s an example:
.box {
will-change: transform, opacity;
}
In this example, the .box class sets the will-change property to transform, opacity, informing the browser that the element is likely to undergo changes in the transform and opacity properties.
It’s important to note that the will-change property should be used judiciously and only when you have a clear understanding of the specific properties that are expected to change. Overusing or applying will-change unnecessarily to multiple elements can potentially have negative effects on performance.
The will-change property is commonly used in scenarios where elements will undergo complex animations or transitions. By indicating which properties are likely to change, the browser can allocate resources and optimize rendering accordingly, resulting in smoother animations and improved performance.
It’s important to use will-change sparingly and only when necessary, as browsers are designed to handle most changes efficiently without explicit hints. It’s recommended to measure and evaluate the performance impact when using will-change to ensure the expected benefits are achieved.