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

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

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

¥Use utilities like ease-in and ease-out to control the easing curve of an element's transition:

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

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>

使用自定义值(Using a custom value)

¥Using a custom value

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

响应式设计(Responsive design)

¥Responsive design

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

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

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

自定义主题(Customizing your theme)

¥Customizing your theme

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

在此详细了解如何自定义主题：主题文档。