Lzh on GitHub

transition-timing-function

用于控制 CSS 过渡的缓动效果的工具。

快速参考

类别样式
ease-lineartransition-timing-function: linear;
ease-intransition-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */
ease-outtransition-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */
ease-in-outtransition-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */
ease-initialtransition-timing-function: initial;
ease-(<custom-property>)transition-timing-function: var(<custom-property>);
ease-[<value>]transition-timing-function: <value>;

示例

基本示例

使用 ease-in 和 ease-out 等工具来控制元素的过渡缓动曲线：

悬停在每个按钮上查看预期行为

ease-in

ease-out

ease-in-out

<button class="duration-300 ease-in ...">Button A</button>
<button class="duration-300 ease-out ...">Button B</button>
<button class="duration-300 ease-in-out ...">Button C</button>

使用自定义值

使用 ease-[<value>] 语法可以根据完全自定义的值设置 transition timing function：

<button class="ease-[cubic-bezier(0.95,0.05,0.795,0.035)] ...">
  <!-- ... -->
</button>

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

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

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

响应式设计

为 transition-timing-function 工具添加 md: 等断点变体前缀，使其仅在中等及以上屏幕尺寸时应用：

<button class="ease-out md:ease-in ...">
  <!-- ... -->
</button>

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

自定义你的主题

使用 --ease-* 主题变量来定制项目中的 transition timing function 工具：

@theme {
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); 
}

现在 ease-in-expo 工具可以在你的标记中使用了：

<button class="ease-in-expo">
  <!-- ... -->
</button>

在 主题文档 中了解更多关于自定义主题的信息。