一個有效的 CSS cubic-bezier() 緩動函式宣告寫法為 cubic-bezier(x1, y1, x2, y2)，其中曲線永遠從進度點 (0, 0) 開始，並永遠在 (1, 1) 結束，而您所提供的四個數字則定義了兩個中間控制點，用以決定動畫值隨時間加速與減速的形狀。若要在瀏覽器中產生一個能正確執行動畫的 CSS cubic bezier，您需要四個有限的數字，並滿足 W3C CSS Easing Functions Level 1 規範中的一項嚴格規則:x1 與 x2 座標必須各自落在封閉的 0 到 1 範圍內，因為它們描述的是輸入時間的位置;而 y1 與 y2 描述的是輸出進度，可能會跨越更廣的範圍，以產生預期動作或 overshoot。要產生一個符合標準的宣告，實務上的方法是載入 CSS Cubic Bezier 產生器，從五個標準化的關鍵字預設值之一開始，接著調整四個控制項，同時觀看動作的即時預覽。
cubic-bezier() 函式是 CSS transition-timing-function 屬性與 CSS animation-timing-function 屬性所使用的時間曲線，因此單一產生的宣告即可驅動任何接受時間函式的 transition 或關鍵影格動畫。由於這個函式僅描述進度如何對應到時間，宣告本身非常簡短——一行、四個數字，不需要動畫引擎，也不需要關鍵影格。
CSS cubic-bezier() 函式的結構解析
每個 cubic-bezier() 緩動函式都是一條從 (0, 0) 到 (1, 1)、帶有兩個中間控制點的參數式曲線。曲線的 x 軸代表已耗用的輸入時間(以動畫總時長的比例計算),y 軸則代表動畫值目前的進度。例如，在 x = 0.5 處讀取曲線，即可得知動畫元素在經過一半時間時所在的位置。
| 座標 | 角色 | 必要範圍 | 超出範圍時的結果 |
|---|---|---|---|
| x1 | 第一個控制點的水平位置 | 0 到 1(包含兩端) | 宣告無效;CSS 會拒絕該值 |
| y1 | 第一個控制點的垂直拉力 | 有限值，通常為 −10 到 10 | 可在 0 以下產生預期動作，或在 1 以上產生 overshoot |
| x2 | 第二個控制點的水平位置 | 0 到 1(包含兩端) | 宣告無效;CSS 會拒絕該值 |
| y2 | 第二個控制點的垂直拉力 | 有限值，通常為 −10 到 10 | 可在 0 以下產生預期動作，或在 1 以上產生 overshoot |
兩個 x 座標是導致宣告無效最常見的原因。若 x1 或 x2 落在封閉的 0 到 1 範圍之外，整個 cubic-bezier() 值會被瀏覽器視為格式不正確，該屬性會回退為其初始值，即 ease。兩個 y 座標則沒有這樣的硬性上限，因此設計師經常使用低於 0 或高於 1 的 y 值來產生富有彈性、表現力強的時間曲線——前提是最終產生的動作看起來仍然是經過刻意安排的。
視覺化產生器 vs. 自行猜測數字:哪種效果較佳
手動調整四個浮點數，然後在腦中想像它們會如何彎曲曲線，既緩慢又容易出錯。視覺化產生器一次解決了三個具體問題:它將 x 輸入限制在有效的 CSS 範圍內，讓您無法貼上無效的值;它使用牛頓迭代加上 bounded bisection 解決「在某個時間比例下我們達到了多少進度」的反向問題;它會在任何程式碼離開頁面之前，在移動的元素上展示最終的動作。
CSS Cubic Bezier 產生器完全在瀏覽器中執行，因此不會將任何曲線值、控制座標或互動資料上傳至任何動畫服務。四個輸入欄位會在同一個畫面更新曲線、數值範例表以及正在執行的預覽，這讓您能快速比較預設緩動與自訂緩動的差異。
三步驟產生 CSS Cubic Bezier
- 選擇起始預設值或輸入自訂座標。點選五個關鍵字按鈕中的任何一個——Linear、Ease、Ease In、Ease Out 或 Ease In Out——即可載入由 W3C CSS Easing Functions Level 1 所定義的標準化四數字曲線，或直接將數值輸入到 x1、y1、x2 與 y2 欄位中。產生器會將 x 輸入限制在有效的 0 到 1 CSS 範圍內，並接受廣泛範圍的有限 y 值，讓您能在不破壞語法的情況下探索 overshoot。
- 檢視曲線圖、範例表與動作預覽。觀看繪製在方形圖表上的參數式曲線，讀取五個數值範例，這些範例顯示在 x = 0、0.25、0.5、0.75 與 1 時的 y 輸出，並點選 Run preview 來觀看一個圓形在 900 毫秒 transform transition 中於兩個位置之間緩動。數值表使用牛頓迭代再接著 bisection 來尋找產生每個指定 x 座標的曲線參數，然後求值 y——這是正確讀取 Bézier 曲線的方式，並能回答單靠曲線圖無法回答的問題。
- 複製完整的 CSS 宣告。當時間感覺正確時，點選 Copy CSS 將完整的 transition-timing-function: cubic-bezier(x1, y1, x2, y2); 一行(含分號)寫入剪貼簿。將其貼到您的樣式表中，並在您實際要發布的屬性、距離與持續時間上進行測試。
五個標準化關鍵字的對應關係
關鍵字按鈕輸出的並不是該關鍵字本身。每次按下都會載入該關鍵字背後的四個標準化控制座標，因此顯示出來的宣告永遠會揭露全部四個數字，讓您無需依賴隱藏的預設值，即可記錄、比較或微調。下表列出每個關鍵字以及 W3C 規範所定義的四數字曲線。
| CSS 關鍵字 | 等價的 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) | 兩端緩慢，中間快速 |
作為一個實際的讀取範例，請看 ease-in-out 宣告 cubic-bezier(0.42, 0, 0.58, 1)。在輸入時間 x = 0.5 時，求解器會找到 x 座標為 0.5 的曲線參數，接著求值 y。由於這個緩動是對稱的，結果會落在 y = 0.5——但曲線從 (0, 0) 到 (1, 1) 所走的路徑，正是讓 ease-in-out 具備中間加速、兩端減速之特色的原因。至於 linear 宣告 cubic-bezier(0, 0, 1, 1)，由於曲線就是恆等線，因此求解器在 x = 0.5 時理所當然會產生 y = 0.5。
讀取範例表與動作預覽
範例表會顯示五個 y 值，分別對應五個 x 位置 0、0.25、0.5、0.75 與 1。當中三個中間值是用來區分不同緩動的關鍵:根據定義，在 x = 0 與 x = 1 時，每條有效的 cubic-bezier() 曲線都會分別通過 y = 0 與 y = 1，因此表中只有中間部分會有變化。若中間的某個範例值落在 0 以下或 1 以上，表示曲線會產生預期動作或 overshoot——這對於表現力強的動作很有用，但值得在動態預覽上確認它不會讓使用者感到意外。
預覽是一個套用於單一圓形上的 900 毫秒 transform transition。重複點擊可讓您在同一個緩動下比較正向與反向動作。預覽展示的是時間感，而非實際的執行效能:當距離、持續時間、屬性、渲染成本、輸入裝置或周圍的動作改變時，真實元件的感受可能會有所不同。請將預覽視為形狀與節奏的健全性檢查，然後在實際的使用介面中測試最終的宣告。
貼上之前:驗證與無障礙檢查
一個宣告即使在技術上有效，在真實介面中仍可能感覺不對。在發布緩動之前，請進行以下四項快速檢查。
- 確認 x1 與 x2 保持在 0 到 1 的範圍內。產生器已強制執行此規則，但若您稍後在樣式表中手動編輯數字，像 1.2 這樣的值會默默地讓整個屬性失效。瀏覽器會回退為 ease，而不會大聲標記這個無效的輸入。
- 在預覽上檢查極端的 y 值。高於 1 的 overshoot 可能會將元素推過預定的靜止位置，這可能會暴露出被裁切的內容、將控制項推出容器外，或是讓動作看起來短暫地反向。低於 0 的預期動作則有相反方向的同樣風險。兩者都是有效的 CSS;兩者都不一定是錯誤，但兩者都值得做視覺檢查。
- 在實際的屬性與距離上測試緩動。一個 900 毫秒的小幅度 transform 預覽，並不等同於 200 毫秒的 hover 狀態或 2 秒的 modal 入場動畫。緩動的形狀是不變的;實際感受到的動作，則取決於您搭配使用的距離與持續時間。
- 尊重 reduced-motion 偏好設定。CSS Cubic Bezier 產生器只輸出時間函式，並不會決定動畫是否為必要。請將表現力強的緩動包在 @media (prefers-reduced-motion: no-preference) 區塊內，或搭配一個無動畫的 fallback，讓選擇關閉動畫的使用者仍能接收到狀態變更。
這個產生器也嚴格聚焦於時間函式本身。它不會產生關鍵影格、彈簧物理、linear() 停留清單、steps() 時間、持續時間、延遲、迭代次數，或是完整的 transition shorthand。這個範圍是刻意設定的:輸出越短、越可預期，就越容易稽核、在檔案之間複製，以及與樣式表的其餘部分一起進行版本控制。若想深入了解 x 與 y 為何遵守不同的規則，請參閱 Can y1 or y2 Leave the 0–1 Range in CSS cubic-bezier()?;若需要將產生的宣告套用至自訂動畫的指引，請參閱 How to Use Cubic Bezier CSS for Custom Easing。作為語法與關鍵字對應的第四個參考資料，MDN 上關於 cubic-bezier() 的頁面，提供了瀏覽器導向的範例與 W3C 規範並列。