transition

Controlling animation speed when changing CSS properties.

Overview

Examples

Declare a complete transition

Use transition:* when the property, duration, and easing belong together. Separate the parts with | so the class maps to the native transition shorthand.

<button class="opacity:.72 transition:opacity|150ms|ease-out opacity:1:hover">    Save changes</button>

@layer utilities {    .transition\:opacity\|150ms\|ease-out {        transition: opacity 150ms ease-out    }}

Animate transforms explicitly

Keep the transitioned property narrow. A transform transition is cheaper to reason about than transition:all because layout, color, and shadow changes will not animate by accident.

<a class="inline-block transition:transform|200ms|ease-in-out transform:translateY(-2px):hover">    View report</a>

Split longhands when states differ

Use the longhand utilities when one part changes independently, such as disabling the duration for print while keeping the same property and easing.

<button class="transition-property:opacity transition-duration:150ms transition-timing-function:ease-out transition-duration:0ms@print">    Continue</button>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="transition:opacity|150ms|ease-out:hover transition:opacity|150ms|ease-out@sm transition:opacity|150ms|ease-out@dark transition:none@print">...</div>