CSS cubic-bezier 緩動曲線是由恰好四個數字 x1、y1、x2 和 y2 所定義，這四個數字描述了在固定起始點 (0, 0) 與固定結束點 (1, 1) 之間的參數曲線上，兩個中繼控制點的位置。這條曲線以水平軸表示輸入時間的進度，以垂直軸表示動畫值的輸出進度，因此每個經過時間的輸入比例，都會對應到動畫實際走了多遠的特定輸出比例。初學者在產生 CSS cubic bezier 之前，應該先認識這個形狀以及它的兩條嚴格規則:x1 和 x2 座標代表輸入時間，CSS 規定兩者都必須落在封閉的 0 到 1 範圍內;而 y1 和 y2 座標代表輸出進度，可以合理地超出這個範圍，以便在 0 以下產生 anticipation(預先反向動作)，或在 1 以上產生 overshoot(超出目標)。了解每個數字的意義、每個數字被允許做什麼，以及最終的時間函式實際控制了什麼，能讓你做出有意識的選擇，而不是盲目摸索直到畫面看起來順眼為止。
本指南的其餘部分將帶你逐一檢視這四個數字、關鍵字預設值、產生器的工作步驟、它刻意不會產生的內容，以及如何在一個真實的元件中確認你的緩動表現符合預期。
每個 CSS Cubic Bezier 背後的四個數字
一個有效的 cubic-bezier() 值包含四個數字，而且只能是四個數字。第一對 x1 和 y1 描述第一個控制點的位置。第二對 x2 和 y2 描述第二個控制點的位置。曲線的起始點永遠是 (0, 0)，代表零時間下的零進度;結束點永遠是 (1, 1)，代表完整時間下的完整進度。你不需要自己寫出這兩個錨點，CSS 規格會自動為你補上。
實際上的意義是:這四個可編輯的數字共同塑造出一條參數曲線，其整體特徵取決於四個值彼此的搭配，而非任何單一數值。當 x1 拉近 1 時，動畫會把大部分可見的動作提前到前段。當 y2 拉到 0 以下時，數值會先反向往回飄移再迅速向前衝。當 y2 推到 1 以上時，數值會越過目標位置再回穩。每個控制點的兩個座標雖然透過底層曲線幾何彼此相連，但瀏覽器套用於 x 和 y 的規則卻截然不同，這正是初學者接下來必須理解的內容。
為什麼 x 必須留在 0–1 之間，而 y 可以自由變動
W3C CSS Easing Functions Level 1(定義 cubic-bezier 的規格)明確規定:只要任一個 x 控制座標落在封閉的 0 到 1 範圍之外，該曲線即屬無效。原因在於功能性而非美觀:x 代表輸入時間。舉例來說，如果 x1 是 1.2，那麼到達該控制點的影響力時，所需的經過時間比例就會超過 100%，而在總時長已經固定的動畫中，這在物理上毫無意義。本產生器會直接強制執行這條規則，將 x 的輸入限制在有效範圍內，並拒絕任何底層計算無法處理為有效時間函式的數值。
y 座標的情況則截然不同。y 代表輸出進度，因此數值可以合理地超過目標的 100%，或低於零。y2 為 1.2 會產生 overshoot，意即動畫值會稍微越過目標位置再回穩;y2 為 -0.2 會產生 anticipation，意即數值會在真正開始往前之前短暫地往反方向移動。這兩種行為都是 cubic-bezier 能模擬設計師經常想要的彈簧式動態的方式，而且規格明確允許。本產生器接受從負十到十的有限 y 值，讓你有足夠空間嘗試強烈的 overshoot 與 anticipation，同時仍會拒絕會扭曲結果的失控輸入。
你會注意到，極端的 y 值會使參數曲線離開圖表的可視方框。這純粹是顯示上的選擇，並非對資料進行截斷:圖表保持穩定的 0 到 1 框線，讓一般時間曲線得以並排比較。範例表格與移動預覽始終採用實際計算出的緩動，因此即便圖表看起來像是被裁切了，overshoot 仍然是真實存在的。
五個關鍵字預設值及其意義
CSS 內建五個緩動關鍵字。每一個都對應到一組特定的控制座標，定義於 W3C CSS Easing Functions Level 1 並記載於 MDN。本產生器將這些關鍵字以一鍵預設的形式呈現，並將其標準化的控制點載入四個可編輯欄位中，讓你能閱讀、比較、修改，而不是只能接受隱藏的預設值。精確的對應關係列於下表。
| 關鍵字 | x1 | y1 | x2 | y2 | 行為 |
|---|---|---|---|---|---|
| linear | 0 | 0 | 1 | 1 | 從頭到尾維持等速。 |
| ease | 0.25 | 0.1 | 0.25 | 1 | 溫和加速、中段快速、結尾平緩。CSS transition 的預設值。 |
| ease-in | 0.42 | 0 | 1 | 1 | 起始緩慢，到結尾時達到全速。給人的感受是動作正在離開螢幕。 |
| ease-out | 0 | 0 | 0.58 | 1 | 起始即全速，結尾平緩。給人的感受是動作抵達螢幕。 |
| ease-in-out | 0.42 | 0 | 0.58 | 1 | 起步與結尾都緩慢，中段快速。給人的感受是動作穿越而過。 |
請注意，在產生器中選擇某個關鍵字並不會直接輸出該關鍵字。可見的宣告永遠會公開所有四個數字，例如 cubic-bezier(0.42, 0, 0.58, 1)，如此曲線便能在沒有隱藏預設值的情況下被記錄、比較與修改。Linear 是 cubic-bezier(0, 0, 1, 1) 的簡寫;產生器一律寫出四個數字的完整形式，以維持曲線的可審查性。
如何產生 CSS Cubic Bezier
產生器遵循一套三步驟的工作流程，帶你從一條空白曲線走到一個可用於正式 CSS 的、經過驗證的時間函式。
- 選擇起點。從五個 CSS 緩動關鍵字中挑一個，將其標準化的控制座標載入 x1、y1、x2 和 y2，或者如果你心中已經有目標曲線，也可以直接輸入這四個數字。
- 檢視圖表、範例與動態。觀察參數曲線圖，讀取 t = 0、0.25、0.5、0.75 和 1 五個輸入到輸出的對應範例，並切換 Run 預覽，觀察一個圓形在兩個位置之間移動，動畫採用 900 毫秒的 transform transition，由實際產生的緩動驅動。
- 複製宣告並進行測試。使用 Copy CSS 按鈕，將完整的 transition-timing-function 宣告(含結尾的分號)寫入剪貼簿。若瀏覽器政策拒絕存取剪貼簿，該宣告仍會保持可見與可選取，並且狀態不會顯示成功，因此該值仍可手動複製。接著把它貼進真實的屬性、距離、持續時間，以及周邊的元件中，確認時間的呈現方式與你的預期一致。
你可以自由地在各步驟之間反覆迭代。修改任一個數字，圖表、範例、預覽與複製的宣告會立即同步更新。只有在宣告被序列化為剪貼簿內容時，數字才會四捨五入到小數點後三位;底層計算則保留完整的 JavaScript 數值精度，確保曲線在多次編輯之間不會產生飄移。
產生器不會產生的內容
本工具專注於單一的 cubic-bezier 時間函式，使產出保持可預期且易於稽核。它不會產生 keyframes、彈簧物理、linear() 停駐點列表、steps()、duration 值、delay 值、iteration 次數，或完整的 transition 速寫。動畫屬性(transform、opacity、background-color 等)、距離、持續時間、延遲，以及任何 reduced-motion 行為，仍由你自行決定。
這個區分很重要，因為 cubic-bezier 僅描述時間。兩段動畫即使緩動與持續時間相同、但屬性不同，給人的感受也會不同。300 毫秒的 opacity 交叉淡化和 300 毫秒、移動相同距離的 transform 滑動，在曲線上雖然占據相同的形狀，因為眼睛解讀每種屬性的方式不同，讀起來仍會有差異。請將緩動視為其中一項要素，而非整份食譜，並圍繞它謹慎地挑選其他數值。
若需要聚焦於「方法選擇」而非數學本身的相關工作流程，請參考 選擇正確的方式來產生 CSS Cubic Bezier。若需要深入說明上述工作流程第三步所依賴的驗證階段，請參考 產生 CSS Cubic Bezier 之後驗證結果。
解讀範例表格與動態預覽
範例表格回答了一個光看控制點圖無法回答的問題:在特定的經過時間比例下，動畫值實際進展了多少?對於位於 0、0.25、0.5、0.75 與 1 的每個輸入，求解器會找出 x 座標等於所要求的輸入之曲線參數，然後在該參數下求 y 的值。它先使用有界的 Newton 迭代，當 Newton 會跨出安全範圍時，則改以 bisection 收尾。這個組合能避免一個常見的錯誤:誤把曲線參數 t 當作經過時間——只有在兩個 x 控制座標恰好都在 0 和 1 時，這個等價才會成立。
Run 預覽則將同一個緩動套用在一段真實的 CSS transition 上:一個圓形透過 900 毫秒的 transform transition，在兩個水平位置之間切換。重複點擊可讓你比較正向與反向的動態，而實際計算出的緩動會驅動時間呈現，不會受到圖表外觀的影響。若 overshoot 對你的設計很重要，請檢視移動中的元素與數值範例，而不是看到一個看似被裁切的圖表，就誤以為數值也被截斷了。
Test the Easing in Real Code and Respect Motion Preferences
The preview demonstrates timing, not production performance under every workload. A real component can feel different when distance, duration, property, rendering cost, input device, or surrounding motion changes. Paste the declaration into its final interface, the actual property, the actual distance, the actual duration, and judge the motion there.
CSS permits curves that are technically valid but unpleasant or confusing in real interfaces. Large overshoots can make controls appear to reverse direction, leave their container, or reveal content that was expected to remain clipped. A valid curve is not automatically accessible, performant, or appropriate. Keep important state changes understandable without motion, avoid rapid oscillation, and check focus and pointer behavior while an element is transitioning. For users who prefer reduced motion, the easing becomes irrelevant if you have already disabled the animation at the prefers-reduced-motion media query, so plan the disabled path before you ship the animated one.
When you are ready to build the curve itself, the CSS Cubic Bezier Generator handles the math, the validation, and the rounding in the browser, and nothing about your curve, your CSS, or your interactions is uploaded, stored, or sent to an animation service. The full specification at CSS Easing Functions Level 1 and the MDN reference at cubic-bezier() document the syntax, the validity rule, and the keyword mappings the generator implements.