Effects
will-change
Setting how an element is expected to change in the browser.
Overview
| Class | Declarations |
|---|---|
will-change:<value> | will-change: <value>;
|
Examples
Hint an upcoming transform
Use will-change:* sparingly to tell the browser that a property is likely to change soon.
<button class="transition:transform|150ms|ease-out will-change:transform transform:translateY(-2px):hover"> Hover</button>Generated CSS
@layer utilities { .will-change\:transform { will-change: transform }}Hint opacity changes
Use will-change:opacity for elements that fade frequently, such as popovers or temporary overlays.
<div class="opacity:0 transition:opacity|150ms|ease-out will-change:opacity opacity:1:hover"> Preview</div>Reset when the hint is no longer useful
Do not leave will-change on large parts of the page by default. Reset it with will-change:auto when the element returns to a static state.
<div class="will-change:transform will-change:auto:active"> Active only when needed</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="will-change:transform:hover will-change:auto@print will-change:opacity@sm">...</div>