will-change

Setting how an element is expected to change in the browser.

Overview

Examples

Hint an upcoming transform

Use will-change:* sparingly to tell the browser that a property is likely to change soon.

<button class="will-change:transform transition:transform|150ms|ease-out transform:translateY(-2px):hover">    Hover</button>

@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="will-change:opacity transition:opacity|150ms|ease-out opacity:0 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:opacity@sm will-change:auto@print">...</div>