Transitions & Animation
用於控制 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 ...">Button A</button><button class="duration-300 ease-out ...">Button B</button><button class="duration-300 ease-in-out ...">Button C</button>使用 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() 函式。
在 transition-timing-function 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<button class="ease-out md:ease-in ..."> <!-- ... --></button>在變體文件中了解更多關於使用變體的資訊。
使用 --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>在主題文件中了解更多關於自訂主題的資訊。