CSS cubic-bezier 緩動曲線是由四個控制數值所定義 —— x1、y1、x2、y2 —— 置於兩個固定端點 (0, 0) 與 (1, 1) 之間,而 W3C CSS Easing Functions Level 1 規範將這兩個 x 座標視為輸入時間的百分比,必須維持在 0 到 1 之間,至於兩個 y 座標則描述輸出進度,可以落在該範圍之外,以產生預期之外或過衝的效果。要比較產生 CSS cubic-bezier 時間函式的各種方法,意味著權衡每種方法能讓你看見曲線本身、數值進度取樣,以及當緩動套用至真實屬性時你實際感受到的動作。最直接的比較會歸結為四個實際問題:你能否看見曲線形狀、你能否在已知的輸入百分比處取樣進度、預覽是否在真實元素上使用實際產生的緩動,以及你能否複製一個符合標準的宣告而無需猜測或進行心算。一個專用的互動式產生器能一次滿足這四點,而手動編寫或從速查表複製通常只能滿足其中一兩點。本文接下來會將這些方法並列比較,並逐步介紹能夠縮小「看起來對的曲線」與「在正式環境中表現穩定的宣告」之間落差的工作流程。
CSS cubic-bezier 時間函式實際控制的是什麼
CSS 評估 cubic-bezier 緩動的方式,是將輸入時間視為 x 座標、將動畫進度視為 y 座標,然後沿著參數式曲線從 (0, 0) 走到 (1, 1)。你所寫的四個數字並不會移動這些端點,只是塑造兩者之間的路徑。根據 W3C CSS Easing Functions Level 1,x1 與 x2 描述輸入時間的位置,因此兩者都必須落在封閉區間 [0, 1] 之內,否則該宣告即為無效。y1 與 y2 描述輸出進度,而規範允許它們低於 0 或高於 1 —— 這就是曲線產生「預期之外」效果(動作先回拉再向前)或「過衝」效果(動作超過最終值後再回穩)的方式。
同一份規範中定義的五個標準化關鍵字會展開為數值型的 cubic-bezier 宣告,而不是被當作獨立的個案處理。MDN 的 cubic-bezier() 參考文件記載了相同的對應關係。即使你只需要一個普通的 ease-in-out,引擎仍然會將你的關鍵字解析為本文稍後列出的四個數字,而該解析結果正是每種產生方法最終都必須交付的東西。
產生 CSS cubic-bezier 的五種常見方法
你可以透過五種相當常見的路徑來得到一條 cubic-bezier 宣告。
- 在你的樣式表中手動編輯這四個數字。你直接在 CSS 中輸入 cubic-bezier(0.25, 0.1, 0.25, 1),當動作感覺不對時調整它,然後重新載入頁面。這是最少工具、最多嘗試錯誤的路徑。
- 從關鍵字速查表複製數值。參考頁面列出 linear、ease、ease-in、ease-out 和 ease-in-out 的標準對應,然後你把這些數字貼進程式碼。當你只需要標準預設時,這很快。
- 在瀏覽器 DevTools 中錄製動作。以 Chromium 為基礎的 DevTools 讓你在動畫面板中拖曳控制把手,然後讀取產生的數字。形狀是可見的,但你通常無法在已知輸入百分比處看見進度取樣。
- 從緩動曲線函式庫借用數字。社群網站發布像是 ease-in-out-quart 和 ease-out-back 等熱門曲線。你會得到一個社群測試過的數值,但你仍然無法在不自行計算的情況下,於任意輸入處取樣進度。
- 使用專用的互動式產生器。像是 CSS Cubic Bezier Generator 這樣的工具,會顯示曲線、四個控制數字、五個輸入百分比處的進度取樣,以及在真實元素上執行實際緩動字串的預覽。該工具背後的工作流程會在下方逐步介紹,而對相同方法的更深入說明,可參閱 How to Use Cubic Bezier CSS for Custom Easing。
這些方法如何並列比較
| 方法 | 曲線可見 | 以數值方式取樣進度 | 預覽實際緩動 | 輸出符合標準 |
|---|---|---|---|---|
| 在程式碼中手動編輯 | 否 | 否 | 只能透過重新載入頁面 | 需要手動檢查 |
| 關鍵字速查表 | 有時 | 否 | 否 | 是(標準化數值) |
| DevTools 動畫面板 | 是 | 有限 | 有限 | 是 |
| 緩動曲線函式庫 | 有時 | 否 | 否 | 是(社群維護) |
| 互動式產生器 | 是 | 是(五個固定輸入) | 是(真實元素、真實緩動) | 是(在工具中驗證) |
最右邊那一欄比其他欄位更為重要。一個讓你自由移動控制把手、卻從不檢查 x1 或 x2 是否出有效區間的產生器,更接近手動編輯,而不是一個尊重標準的工具。驗證與數值取樣屬於同一層:在宣告離開頁面之前,數學必須確認該曲線是妥善定義的。
產生一條曲線並與關鍵字預設進行比較
- 開啟 CSS Cubic Bezier Generator,從五個關鍵字按鈕中擇一 —— linear、ease、ease-in、ease-out 或 ease-in-out。這四個控制數字會從 W3C CSS Easing Functions Level 1 的參考數值載入,而非來自關鍵字本身,因此可見的宣告永遠會暴露出所有四個數字。
- 讀取圖表與取樣表。圖表會在固定的零到一方塊中繪製參數式曲線,而取樣表則列出當 x 為 0、0.25、0.5、0.75 與 1 時所達到的 y 值。這些就是用來與你所建立的自訂曲線進行比較的數字。
- 點擊 Run preview 觀看一個圓形在 900 毫秒內於兩個水平位置之間切換,並在真實的 transform 過渡上套用準確產生的緩動。再點一次可在同一緩動下比較正向與反向動作。
- 直接調整 x1、y1、x2 與 y2。介面會將 x 輸入限制在有效的 CSS 範圍內,接受從負十到十之間的有限 y 值,並在 x 落在 [0, 1] 之外時拒絕產生輸出。圖表、取樣表與預會立即更新。
- 檢視一個刻意極端化的 y 值,例如 y2 = 1.4,並讀取取樣表以在信任該曲線之前先確認過衝。圖表對一般時間曲線會維持穩定的零到一框架,因此過衝可能延伸至可見方塊之外;請信任取樣與預覽,而不是圖表邊界。
- 一旦曲線符合你想要的時間,複製該宣告,然後將它貼進真實的過渡中,連同它將執行的屬性、距離與持續時間一併設定。產生器只會輸出 transition-timing-function,因此持續時間、延遲、屬性與減少動畫行為仍須由你負責。
為什麼取樣是在輸入百分比處讀取,而不是在曲線參數 t 處讀取
在讀取緩動曲線時,一個常見的錯誤是去看曲線參數 t 等於 0.5 時的 y 值,並假設那就是在經過 50% 時間時所達到的進度。CSS 時間機制並非如此運作:x 是經過的輸入進度,因此在 50% 處的取樣,是指在讓 x 等於 0.5 的那個曲線參數 t 上所達到的 y 值。對於像 ease-in-out 這類對稱的關鍵字預設,結果相近,但對於控制點偏斜的曲線,差異可能在取樣表中顯而易見。
CSS Cubic Bezier Generator 透過求解反函數來處理這個區別:對於每個要求的輸入 (0、0.25、0.5、0.75、1),它會找到 x 座標等於該輸入的曲線參數 t,然後在該 t 處求取 y 值。內部的求解器使用有界牛頓迭代,並在需要時退回到二分搜尋法,這避免了即使在控制點使兩者不同時,仍將 t 視為經過時間的常見捷徑。這也是為什麼同一個工具在其 FAQ 中提醒,50% 處的取樣並不總是 t 等於 0.5 時的曲線值 —— 「x 是輸入時間」這項限制要求的是反函數求解,而非直接查表。
每種方法在什麼情況下會失效
手動編輯會默默地失敗。你把 y2 從 0.9 改成 1.1,期待出現一點輕微的過衝,但動畫現在耗時比過渡持續時間所暗示的還要長,因為曲線在 1 以上停留了更多時間。這裡沒有圖表、沒有表格,也沒有預覽能告訴你原因。
當你需要速查表所列內容之外的東西時,速查表就會失效。一個將五個關鍵字對應到五組數字的參考表,無法告訴你在自訂曲線中 x = 0.5 時會發生什麼,也無法協助你建構一條 y1 為 0.42、y2 為 0.58 的利 ease-in-out 曲線。
當你需要可攜的輸出時,DevTools 面板就會失效。你錄製的形狀存在於 DevTools 工作階段之中,把數字複製回編輯器所需的步驟,比從一個隨時保持宣告可見的產生器一鍵複製還要多。
當你需要驗證它們的數值在非關鍵字輸入處會產生什麼結果時,緩動函式庫就會失效。那些已發布的曲線僅由其作者測試,但你沒有辦法在不必重新推導數學的情況下,讀取任意 t 處的進度。
當你把互動式產生器的圖表視為過衝的權威依據時,它就會失效。圖表框架固定在 [0, 1],以便能乾淨地比較一般的時間曲線,而一個刻意極端化的 y 值可能會延伸至該方塊之外,圖表並不會因此裁切曲線。請務必在取樣表或執行中的預覽中確認過衝,而不是假設圖表被裁切就代表該值被箝制在範圍內 —— 這正是相關指南 Can y1 or y2 Leave the 0–1 Range in CSS cubic-bezier()? 對 y 座標有效性所提出的同一個論點。
快速參考 —— 標準化關鍵字預設
| 關鍵字 | 依 W3C CSS Easing Functions Level 1 的控制點 | 感受 |
|---|---|---|
| linear | cubic-bezier(0, 0, 1, 1) | 等速,沒有加速度 |
| ease | cubic-bezier(0.25, 0.1, 0.25, 1) | 輕微的 ease-in 後回穩,為預設值 |
| 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) | 對稱的加速後減速 |
以這份參考資料作為比較的基準。當一條自訂曲線感覺接近 ease-in-out 時,你應該能讀取它的四個數字,並看出它與上方標準化那一列相差多遠 —— 這正是該產生器設計所要支援的比較。