过渡和动画
transition-delay
用于控制 CSS 过渡延迟的工具。
| 类 | 样式 |
|---|---|
delay-<number> | transition-delay: <number>ms; |
delay-(<custom-property>) | transition-delay: var(<custom-property>); |
delay-[<value>] | transition-delay: <value>; |
示例(Examples)
基本示例(Basic example)
使用类似 delay-150 和 delay-700 的工具以毫秒为单位设置元素的过渡延迟：
🌐 Use utilities like delay-150 and delay-700 to set the transition delay of an element in milliseconds:
将鼠标悬停在每个按钮上以查看预期行为
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>支持减少运动(Supporting reduced motion)
对于用户指定偏好减少动画的情况，你可以使用 motion-safe 和 motion-reduce 变体有条件地应用动画和过渡效果：
🌐 For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the motion-safe and motion-reduce variants:
<button type="button" class="delay-300 motion-reduce:delay-0 ..."> <!-- ... --></button>使用自定义值(Using a custom value)
使用 delay-[<value>] 语法 根据完全自定义的值设置 transition delay：
<button class="delay-[1s,250ms] ..."> <!-- ... --></button>对于 CSS 变量，还可以使用 delay-(<custom-property>) 语法：
<button class="delay-(--my-delay) ..."> <!-- ... --></button>这只是简写，用于 delay-[var(<custom-property>)] 它会自动为你添加 var() 函数。
响应式设计(Responsive design)
在 transition-delay 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<button class="delay-150 md:delay-300 ..."> <!-- ... --></button>请参阅 变体文档 详细了解如何使用变体。