will-change
Warns the browser that a property is about to change, so it can prepare in advance.
Syntax
will-change: property;Values
| Parameter | Type | Description |
|---|---|---|
| property | ident | What will change: `transform`, `opacity`. |
| auto | keyword | No hint (the default). |
Examples
A loading spinner with a hint:
<style>
@keyframes spin { to { rotate: 360deg; } }
.loader {
width: 40px; height: 40px;
border: 4px solid lightgray; border-top-color: royalblue; border-radius: 50%;
will-change: rotate;
animation: spin 1s linear infinite;
}
</style>
<div class="loader"></div>Notes
This is a last-resort tool for animations that stutter, not a speed-up for everything. Each hint costs memory, so do not set it on many elements or "just in case".
See also
- transform — Moves, rotates, scales or skews an element without affecting the layout around it.
- animation — Runs a `@keyframes` animation on an element.
- opacity — The transparency of the whole element together with its content.
- content-visibility — Lets the browser skip laying out and painting an element's content while it is off screen — a cheap speed-up for long pages.
In the tutorial
- Animations — CSS animations — the @keyframes rule, the animation property, repeats and direction, percentage keyframes, fill-mode and prefers-reduced-motion.