transition-delay

用于控制 CSS 过渡延迟的工具类。

快速参考

类	属性
delay-<number>	transition-delay: <number>ms;
delay-(<custom-property>)	transition-delay: var(<custom-property>);
delay-[<value>]	transition-delay: <value>;

示例

基础示例

使用 delay-150 和 delay-700 等工具类，以毫秒为单位设置元素的过渡延迟：

delay-150

delay-300

delay-700

<!-- [!code classes: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>

支持减弱动态效果

如果用户已指定偏好减弱动态效果，可以使用 motion-safe 和 motion-reduce 变体有条件地应用动画和过渡：

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

使用自定义值

使用 delay-[<value>] 等工具类，根据完全自定义的值设置过渡延迟：

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

对于 CSS 变量，也可以使用 delay-(<custom-property>) 语法：

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

这只是 delay-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

使用 md: 等断点变体作为 transition-delay 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：

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

了解如何使用变体，请参阅变体文档。