过渡和动画
transition-duration
用于控制 CSS 过渡持续时间的工具。
| 类 | 样式 |
|---|---|
duration-<number> | transition-duration: <number>ms; |
duration-initial | transition-duration: initial; |
duration-(<custom-property>) | transition-duration: var(<custom-property>); |
duration-[<value>] | transition-duration: <value>; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 duration-150 和 duration-700 等工具以毫秒为单位设置元素的过渡持续时间：
¥Use utilities like duration-150 and duration-700 to set the transition duration of an element in milliseconds:
悬停在每个按钮上以查看预期行为
duration-150
duration-300
duration-700
<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>使用自定义值(Using a custom value)
¥Using a custom value
使用 duration-[<value>] 语法 根据完全自定义的值设置 transition duration：
<button class="duration-[1s,15s] ..."> <!-- ... --></button>对于 CSS 变量，还可以使用 duration-(<custom-property>) 语法：
<button class="duration-(--my-duration) ..."> <!-- ... --></button>这只是简写，用于 duration-[var(<custom-property>)] 它会自动为你添加 var() 函数。
响应式设计(Responsive design)
¥Responsive design
在 transition-duration 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<button class="duration-0 md:duration-150 ..."> <!-- ... --></button>请参阅 变体文档 详细了解如何使用变体。