transition-duration

示例(Examples)

基本示例(Basic example)

使用类似 duration-150 和 duration-700 的工具以毫秒为单位设置元素的过渡持续时间：

🌐 Use utilities like duration-150 and duration-700 to set the transition duration of an element in milliseconds:

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

支持减少运动(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="duration-300 motion-reduce:duration-0 ...">  <!-- ... --></button>

使用自定义值(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)

在 transition-duration 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

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