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>;

示例

基础示例

使用 duration-150 和 duration-700 等工具类，以毫秒为单位设置元素的过渡时长：

duration-150

duration-300

duration-700

<!-- [!code classes: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>

支持减弱动态效果

如果用户已指定偏好减弱动态效果，可以使用 motion-safe 和 motion-reduce 变体有条件地应用动画和过渡：

<!-- [!code classes:motion-reduce:duration-0] -->
<button type="button" class="duration-300 motion-reduce:duration-0 ...">
  <!-- ... -->
</button>

使用自定义值

使用 duration-[<value>] 等工具类，根据完全自定义的值设置过渡时长：

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

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

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

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

响应式设计

使用 md: 等断点变体作为 transition-duration 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：

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

了解如何使用变体，请参阅变体文档。