當五個內建緩動關鍵字 — linear、ease、ease-in、ease-out 和 ease-in-out — 無法符合介面實際所需的動態時,你就應該產生 CSS cubic bezier;當你想微調的是時間本身,而不是動畫的持續時間、距離或屬性時,也應該這麼做。Cubic bezier 曲線定義了動畫值在轉場過程中從零到一的進展速度,CSS 以 cubic-bezier(x1, y1, x2, y2) 函式中的四個控制座標來表示。瀏覽器繪製曲線、沿著水平軸取樣經過的時間,並以曲線的垂直輸出作為動畫已完成比例。預設關鍵字幾乎能涵蓋大部分介面,因此決定產生自訂曲線通常有明確理由:更銳利的進入、更柔和的收尾、刻意的 overshoot,或是任何預設都無法重現的品牌特定感受。若無上述理由,單獨使用關鍵字通常就已足夠,完全不需要產生步驟。
何時內建關鍵字已足夠
CSS 定義了五個緩動關鍵字,每個都對應到 W3C CSS Easing Functions Level 1 規範中一組標準化的控制點。由於這些對應關係已經標準化,任何瀏覽器在渲染相同關鍵字時都會產生相同的動態。這種一致性是一項特性,而不是限制:可預測的時間設定,正是讓設計系統能在元件、斷點和協作者之間順利擴展而不產生意外的原因。如果你的介面使用預設關鍵字就能呈現理想效果,保持原樣可讓樣式表易於閱讀,並讓動畫行為與其他使用相同關鍵字的網站完全一致。
關鍵字也能省去自訂曲線帶來的維護成本。自訂的 cubic-bezier 值需要讓未來的協作者在安心修改前先理解它;而關鍵字本身即具備自我說明的能力。在決定是否要產生之前,先檢視你實際製作動畫的介面元素。工具提示、淡入、簡單的顯示、滑鼠懸停上移,以及大部分的彈出視窗,都能毫無問題地套用其中一個關鍵字。只有當關鍵字明顯無法滿足你的動態目標時,才採用自訂曲線,而不是因為自訂感覺比較精緻。
值得產生自訂曲線的理由
當介面中浮現出少數幾種動態問題時,自訂 cubic bezier 緩動才算真正有它的價值。以下情況下,產生自訂曲線是正確的下一步,而不是過早的最佳化。
- 品牌特定感受。設計系統中定義的動態語言,需要比 ease-in-out 能表達的更多 — 更俐落的點擊感、更柔和的靜止感,或是你能描述但無法用關鍵字達成的特定加速曲線。
- 更銳利的進入或更柔和的收尾。按鈕、開關和通知通常需要快速的起始和柔和的結束,或反過來,而標準關鍵字無法精準達到這樣的比例。
- 刻意的 overshoot 或 anticipation。俏皮的 UI 元素 — 會彈跳的確認勾選、超過靜止位置的卡片 — 仰賴超出零到一範圍的 y 值。五個關鍵字都無法做到這點。
- 消除「機械化」感受。長轉場使用對稱緩動會顯得呆板。略為不對稱的自訂曲線能讓相同的轉場顯得經過設計,而不是套用預設。
- 以 CSS 取代簡單的時間調整函式庫。當某個函式庫只用來微調 CSS 轉場的緩動時,自訂的 cubic-bezier 值可以完全移除這個相依性。
五個關鍵字與曲線的對應關係
當你打開「CSS Cubic Bezier 產生器」時,其預設按鈕會載入 W3C CSS Easing Functions Level 1 規範中的標準化控制點,而不是直接輸出關鍵字本身。產生器會在輸出中公開全部四個數字,讓數值得以被記錄、比較與修改,而不會隱藏預設值。下表列出可供參考的標準化對應。
| 關鍵字 | 等效的 cubic-bezier() | 動態特性 |
|---|---|---|
| linear | cubic-bezier(0, 0, 1, 1) | 從頭到尾維持等速 |
| ease | cubic-bezier(0.25, 0.1, 0.25, 1) | 預設值;溫和加速,長時間減速 |
| ease-in | cubic-bezier(0.42, 0, 1, 1) | 緩慢起始,接近結尾時加速 |
| ease-out | cubic-bezier(0, 0, 0.58, 1) | 快速起始,接近結尾時減速 |
| ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) | 起頭和結尾緩慢,中段最快 |
來源:W3C CSS Easing Functions Level 1。如果這些曲線形狀已符合你的需求,使用關鍵字就是正確答案;只有當你想要的形狀與上表每一列都不相符時,自訂曲線才具有附加價值。
如何產生 CSS Cubic Bezier
一旦確定預設關鍵字不合適,CSS Cubic Bezier 產生器便會在瀏覽器中把四個控制座標轉換為符合標準的 transition-timing-function 宣告,且不會上傳或儲存你的數值。
- 打開產生器,從五個預設關鍵字按鈕其中之一開始,或如果你心中已有目標數值,則將四個座標欄位留空。
- 拖曳圖形上的控制把手,或直接輸入 x1、y1、x2 和 y2。請將 x1 和 x2 維持在 0 到 1 之間 — CSS 將其他數值視為無效,並捨棄整個宣告。
- 在調整過程中參考輸入對輸出的取樣表。它會告訴你在經過時間為 0、0.25、0.5、0.75 和 1 時實際達成的進度,這是曲線圖本身無法提供的解答。
- 切換 Run 預覽,使用你精確的緩動字串觀看圓形在兩個位置之間以 900 ms 進行轉場。重複點擊以比較正向與反向的動態。
- 複製完整的 transition-timing-function 宣告,並將其貼到樣式表,與你已選定的屬性、持續時間、延遲,以及任何 reduced-motion 處理方式放在一起。
如需深入逐步說明,以及每個階段應注意的事項,請參閱「產生 CSS cubic bezier 後檢查結果」指南。
決定瀏覽器是否接受曲線的有效性規則
CSS 對於何者構成有效的 cubic-bezier 值非常嚴格,產生器在輸入層就強制套用相同的規則,讓你在複製之前就能看到無效輸入被拒絕。
- x1 和 x2 必須維持在 [0, 1] 之內。它們描述輸入時間的位置。若其中之一落在封閉的零到一範圍之外,整個 cubic-bezier() 宣告即無效,屬性會退回預設緩動。
- y1 和 y2 可以超出 [0, 1]。它們描述輸出進度,低於零的值會產生 anticipation,高於一的值會產生 overshoot。產生器的介面接受 −10 到 10 之間的有限 y 值,並在產生輸出前於瀏覽器中進行驗證。
- 曲線永遠從 (0, 0) 開始,在 (1, 1) 結束。只有兩個中間控制點可編輯,這也是為何四座標格式自 CSS Transitions Level 1 起便保持穩定。
- 計算保留在瀏覽器中。任何曲線、CSS 或互動資料都不會被上傳、儲存或傳送至動畫服務,因此你產生的值可離線重現。
這些規則記錄於 W3C CSS Easing Functions Level 1 規範,以及 MDN 的cubic-bezier() 參考頁面。
無障礙與 Reduced-Motion 考量
有效的曲線不一定合適。過大的 overshoot 可能讓控制項看似反向移動、離開其容器,或顯示原本應保持裁切的內容,而這些副作用都可能讓使用者感到困惑,或在元素轉場期間干擾焦點與指標行為。跨多個週期的快速振盪會使問題更加嚴重。W3C 規範僅定義語法上的有效性;它並不決定某條曲線是否人性化。
務必在最終介面中(而不僅是在產生器的預覽中)測試複製後的宣告,並在動畫非必要時尊重 prefers-reduced-motion。預覽僅展示單一屬性在單一持續時間下的時間表現;實際元件在距離、持續時間、屬性、渲染成本、輸入裝置或周圍動態改變時,感受可能截然不同。若狀態變更需要在沒有動態的情況下仍可理解,請先確保非動態狀態已能傳達結果,再將曲線疊加上去。
何時使用其他工具才是更好的選擇
CSS Cubic Bezier 產生器僅輸出 transition-timing-function。它不會產生 spring 物理、linear() 停止點列表、steps()、持續時間、延遲、迭代次數,或完整的 transition 簡寫。使用產生器的決定應同時搭配快速檢查,確認這些相鄰功能都不是你實際所需。
- 需要完整的 transition 簡寫。手動撰寫簡寫。產生器刻意僅止於時間函式,以便其餘宣告保持可預測且易於稽核。
- 需要 spring 物理效果。Spring 動態是基於能量而非時間,且會在動畫被中斷時調整。CSS cubic-bezier 是確定性的、基於時間的。請選擇 JavaScript 動畫函式庫。
- 需要多步驟動畫。使用 CSS @keyframes,並在每個關鍵影格中宣告多個 animation-timing-function。
- 需要階梯式動態或停止點列表。直接使用 steps() 或 linear() — 這些是不同的緩動函式,並非 cubic-bezier 值。
複製宣告後,最後一步是在實際元件中驗證其表現是否符合預期。產生器會顯示曲線形狀與 900 ms 預覽,但對使用者而言,正式環境的時間表現才是唯一重要的事,而這項測試永遠發生在實際出貨的元件之中。