过渡 & 动画
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-(<自定义属性>) | transition-timing-function: var(<自定义属性>); |
ease-[<值>] | transition-timing-function: <值>; |
示例
基本示例
使用 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-[<值>] 语法 来设置过渡时间函数基于完全自定义的值
<button class="ease-[cubic-bezier(0.95,0.05,0.795,0.035)] ..."> <!-- ... --></button>对于 CSS 变量，您还可以使用 ease-(<自定义属性>) 语法
<button class="ease-(--my-ease) ..."> <!-- ... --></button>这只是 ease-[var(<自定义属性>)] 的简写，它会自动为您添加 var() 函数。
响应式设计
前缀使用 transition-timing-function 实用工具 以及像 md: 这样的断点变体，以便仅在中等 屏幕尺寸及以上应用该实用工具
<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>在 主题文档.
