过渡 & 动画
用于控制 CSS 过渡延迟的实用工具。
| 类名 | 样式 |
|---|---|
delay-<number> | transition-delay: <number>毫秒; |
delay-(<custom-property>) | transition-delay: var(<custom-property>); |
delay-[<value>] | transition-delay: <value>; |
使用类似 delay-150 和 delay-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>在变体文档中了解有关使用变体的更多信息。