will-change
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. 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:
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
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>
Values
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. |