transition-duration

示例

基本示例

使用类似 duration-150 和 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>

使用自定义值

使用 duration-[<value>] 语法 来设置过渡持续时间基于完全自定义的值

<button class="duration-[1s,15s] ...">
  <!-- ... -->
</button>

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

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

这只是 duration-[var(<custom-property>)] 的简写形式，它会自动为你添加 var() 函数。

响应式设计

前缀将 transition-duration 实用工具类 与断点变体（如 md:）一起使用，以便仅在中等 屏幕尺寸及以上尺寸应用该实用工具类

<button class="duration-0 md:duration-150 ...">
  <!-- ... -->
</button>

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