will-change
Setting how an element is expected to change in the browser.
Overview
| Class | Declarations |
|---|---|
will-change:auto | will-change: auto;
|
will-change:<value> | will-change: <value>;
|
Examples
Hint an upcoming transform
This visible native button declares an upcoming transform. Press and hold it, or focus it and hold Space, to apply the actual movement.
<!-- Transform hint · press to move --><div class="p-lg"> <div class="rel h:96px w:160px outline:1px|dashed|var(--color-line-muted)"> <button id="target" type="button" class="grid place-items:center h:96px w:160px p-sm b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 transform:none will-change:transform outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible transform:none@print transition:transform|var(--duration-fast)|ease-out@motion will-change:auto@print transform:translateY(-8px):active@screen"> Move preview </button> </div></div>Generated CSS
@layer utilities { .will-change\:transform { will-change: transform }}The readout shows the declared hint. It does not measure speed or prove layer promotion. Add hints only after measuring a real need; keeping them on many elements can consume resources.
Hint opacity changes
Press this visible button to lower its opacity. The hint names opacity; a separate active-state class performs the fade.
<!-- Opacity hint · press to fade --><div class="p-lg"> <div class="rel h:96px w:160px outline:1px|dashed|var(--color-line-muted)"> <button id="target" type="button" class="grid place-items:center h:96px w:160px p-sm b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 opacity:1 will-change:opacity outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible opacity:1@print transition:opacity|var(--duration-fast)|ease-out@motion will-change:auto@print opacity:.64:active@screen"> Preview overlay </button> </div></div>The button remains named and keyboard operable. Will-change does not animate or hide the element. Reduced motion removes the timed fade while preserving the native pressed state.
Reset when the hint is no longer useful
Hover or focus to prepare a transform hint before pressing. Move away and remove focus to return it to auto.
<!-- Auto → prepare → press → auto --><div class="p-lg"> <div class="rel h:96px w:160px outline:1px|dashed|var(--color-line-muted)"> <button id="target" type="button" class="grid place-items:center h:96px w:160px p-sm b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 transform:none will-change:auto outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible transform:none@print transition:transform|var(--duration-fast)|ease-out@motion will-change:auto@print will-change:transform:hover@screen will-change:transform:focus-visible@screen transform:translateY(-8px):active@screen"> Prepare and press </button> </div></div>Preparing before the change gives the browser time to act on the hint. Auto releases this explicit request when the interaction ends. Applications with longer scripted sequences should remove their hint after the sequence finishes.
Apply conditionally
Widen the actual viewport to sm to declare an opacity hint. Pressing the native button still controls the fade; changing the hint alone does not change its appearance.
<!-- Auto → opacity hint at sm --><div class="p-lg"> <div class="rel h:96px w:160px outline:1px|dashed|var(--color-line-muted)"> <button id="target" type="button" class="grid place-items:center h:96px w:160px p-sm b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 opacity:1 will-change:auto outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible opacity:1@print transition:opacity|var(--duration-fast)|ease-out@motion will-change:auto@print opacity:.64:active@screen will-change:opacity@screen@sm"> Press to preview </button> </div></div>Print returns the hint to auto. This viewport rule demonstrates conditional syntax; choose hint lifetimes from actual interaction needs, not screen size alone.