过渡 & 动画
用于控制 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
<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>] 语法 来设置过渡 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-* 主题变量来自定义过渡 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>在 主题文档.