1. 过渡 & 动画
  2. transition-delay

过渡 & 动画

transition-delay

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

样式
delay-<number>
transition-delay: <number>ms;
delay-(<custom-property>)
transition-delay: var(<custom-property>);
delay-[<value>]
transition-delay: <value>;

示例

基本示例

使用类似 delay-150delay-700 的实用工具来设置元素以毫秒为单位的过渡延迟

悬停每个按钮以查看预期行为

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>

使用自定义值

使用 delay-[<value>] 语法 来设置过渡延迟基于完全自定义的值

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

对于 CSS 变量,您还可以使用 delay-(<custom-property>) 语法

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

这只是 delay-[var(<custom-property>)] 的简写,它会自动为您添加 var() 函数。

响应式设计

前缀使用 transition-delay 实用工具 带有像 md: 这样的断点变体,以便仅在中等 屏幕尺寸及以上应用实用工具

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

变体文档中了解有关使用变体的更多信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策