transition-delay

Các tiện ích để kiểm soát độ trễ của CSS transition.

Class Styles

Class	Styles
`delay-<number>`	`transition-delay: <number>ms;`
`delay-(<custom-property>)`	`transition-delay: var(<custom-property>);`
`delay-[<value>]`	`transition-delay: <value>;`

delay-<number>

transition-delay: <number>ms;

delay-(<custom-property>)

transition-delay: var(<custom-property>);

delay-[<value>]

transition-delay: <value>;

Ví dụ

Ví dụ cơ bản

Sử dụng các tiện ích như delay-150 và delay-700 để đặt độ trễ transition của một phần tử theo mili giây:

Di chuột qua mỗi nút để thấy hành vi mong đợi

delay-150

delay-300

delay-700

<button class="transition delay-150 duration-300 ease-in-out ...">Button A</button><button class="transition delay-300 duration-300 ease-in-out ...">Button B</button><button class="transition delay-700 duration-300 ease-in-out ...">Button C</button>

Hỗ trợ reduced motion

Trong các tình huống người dùng chỉ định rằng họ muốn giảm chuyển động, bạn có thể áp dụng có điều kiện animation và transition bằng cách sử dụng các variant motion-safe và motion-reduce:

<button type="button" class="delay-300 motion-reduce:delay-0 ...">  <!-- ... --></button>

Sử dụng giá trị tùy chỉnh

Use the delay-[<value>] syntax to set the transition delay based on a completely custom value:

<button class="delay-[1s,250ms] ...">  <!-- ... --></button>

For CSS variables, you can also use the delay-(<custom-property>) syntax:

<button class="delay-(--my-delay) ...">  <!-- ... --></button>

This is just a shorthand for delay-[var(<custom-property>)] that adds the var() function for you automatically.

Responsive design

Prefix a transition-delay utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<button class="delay-150 md:delay-300 ...">  <!-- ... --></button>

Learn more about using variants in the variants documentation.