Lzh on GitHub

transition-duration

用于控制 CSS 过渡持续时间的工具类。

快速参考

类名样式
duration-<number>transition-duration: <number>ms;
duration-initialtransition-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

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

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