transition-duration

Ví dụ

Ví dụ cơ bản

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

<button class="transition duration-150 ease-in-out ...">Button A</button><button class="transition duration-300 ease-in-out ...">Button B</button><button class="transition duration-700 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="duration-300 motion-reduce:duration-0 ...">  <!-- ... --></button>

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

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

<button class="duration-[1s,15s] ...">  <!-- ... --></button>

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

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

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

Responsive design

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

<button class="duration-0 md:duration-150 ...">  <!-- ... --></button>

Learn more about using variants in the variants documentation.