transition-timing-function

用于控制 CSS 过渡缓动曲线的工具类。

快速参考

类	属性
ease-linear	transition-timing-function: linear;
ease-in	transition-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */
ease-out	transition-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */
ease-in-out	transition-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */
ease-initial	transition-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

<!-- [!code classes: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>] 等工具类，根据完全自定义的值设置过渡时序函数：

<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() 函数。

响应式设计

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

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

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

自定义主题

使用 --ease-* 主题变量来自定义项目中的过渡时序函数工具类：

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

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

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

了解如何自定义主题，请参阅主题文档。