过渡与动画
控制 CSS 过渡缓动的工具类。
| Class | Styles |
|---|---|
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 ...">按钮 A</button><button class="duration-300 ease-out ...">按钮 B</button><button class="duration-300 ease-in-out ...">按钮 C</button>Use the ease-[<value>] syntax to set the 过渡时机函数 based on a completely custom value:
<button class="ease-[cubic-bezier(0.95,0.05,0.795,0.035)] ..."> <!-- ... --></button>For CSS variables, you can also use the ease-(<custom-property>) syntax:
<button class="ease-(--my-ease) ..."> <!-- ... --></button>This is just a shorthand for ease-[var(<custom-property>)] that adds the var() function for you automatically.
Prefix a transition-timing-function utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<button class="ease-out md:ease-in ..."> <!-- ... --></button>Learn more about using variants in the variants documentation.
Use the --ease-* theme variables to customize the 过渡时机函数 utilities in your project:
@theme { --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); }Now the ease-in-expo utility can be used in your markup:
<button class="ease-in-expo"> <!-- ... --></button>Learn more about customizing your theme in the theme documentation.