過渡效果 & 動畫
transition-timing-function
用於控制 CSS 過渡效果的 easing 的實用工具。
| 類別 | 樣式 |
|---|---|
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 的工具來控制元素過渡效果的 easing 曲線
將滑鼠懸停在每個按鈕上以查看預期的行為
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>] 語法 來設定過渡時間函式基於完全自訂的值
<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-* 主題變數來自訂過渡時間函式 您專案中的工具
@theme { --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); }現在 ease-in-expo 工具可以在您的 markup 中使用
<button class="ease-in-expo"> <!-- ... --></button>在 主題文件.
