The will-change property improves the efficiency of CSS animations by telling the browser what properties and elements will change and potentially optimizing those actions.

This attribute can have four values:

Auto: implements standard browser optimization.

Scrollposition: indicates that the scrolling position of an element will be animated. The browser should prepare for the invisible part of the scrolling window content.

Contents: Indicates that the contents of an element will change and that browsers should not cache their contents.

Custom-ident: indicates that the developer wants to change the name of the specified property or animate it later, such as transform or opacity.

If you want to notify the browser of a transform change, you can write:

.element {
        will-change: transform;
}
Copy the code

We can also specify multiple values, separated by commas, for example:

.element {
        will-change: transform, opacity;
 }
 
Copy the code

Note:

1. Do not overuse will-change, otherwise it will be counterproductive to the page execution efficiency, the recommended practice is to turn will-change on when an element or attribute changes, and turn it off when the change is complete.

2. If your page has no performance issues, don’t add will-change to squeeze a little speed. Will-change is designed as an optimization of last resort to try to solve existing performance problems, and should not be used to prevent performance problems.