CSS cubic-bezier 緩動曲線是由四個數字所定義——x1、y1、x2 和 y2——而幾乎所有在產生這類曲線時發生的錯誤，都源自對這些數字實際控制內容的誤解。兩個 x 值描述輸入時間，且必須保持在 0 到 1 的封閉區間內，因為 CSS 會拒絕任何 x 座標落在該範圍之外的 cubic-bezier() 值。兩個 y 值描述輸出進度，可接受範圍從負十到正十，這正是產生動畫開始前蓄勢(anticipation)或結束後越界(overshoot)效果的來源。再加上固定的起點 (0, 0) 與終點 (1, 1)，就構成了計時函式的完整文法：一條將經過時間佔比對應到動畫進度的參數曲線。一旦這四條規則釐清，多數常見的產生錯誤就不再神秘，變得可預期。剩下的工作，就是確認曲線在圖表、範例表格、動畫預覽，以及你實際要出貨的元件中都能正確呈現。
破壞 CSS Cubic Bezier 的常見錯誤
破壞 cubic-bezier 的錯誤可歸納為一小組，每一項都對應到 W3C CSS Easing Functions Level 1 規範中的特定規則。
第一個錯誤是 x 超出範圍。許多工具和教學讓你把控制把手拖到螢幕上任何位置，曲線看起來仍然合理。但 CSS 不看合理性——它只會解析這個值，瀏覽器會直接丟掉任何 x1 或 x2 落在 [0, 1] 之外的結果。動畫接著會以線性方式執行，或者依引擎不同，退回到預設的 ease。無論哪種情況，你設計的曲線都已經消失。
第二個錯誤是參數與時間的混淆陷阱。cubic-bezier 曲線是參數式曲線，並不是經過時間的函數。曲線參數 t 從 0 跑到 1，但在 t = 0.5 時的 x 座標極少等於 0.5，除非刻意安排控制點讓它成立。若把圖表的水平軸當成「已進行時間」來讀，就會在動畫值的實際位置問題上默默被騙。
第三個錯誤是使用了關鍵字卻沒有檢查背後的數字。Linear、ease、ease-in、ease-out 與 ease-in-out 全部對應到 CSS 規範定義的特定控制點。挑一個關鍵字、貼進正式環境，卻不檢查實際數值，意味著同事無法從原始碼重現這條曲線。一旦規範改版，或關鍵字被以非預期方式解析，計時就會跑掉。
第四個錯誤是當 y 超出 1 時仍輕信圖表。正方形框線繪製的是參數曲線，刻意設定的極端 y 值會延伸到可見區域之外。乍看之下你可能以為曲線只是被裁切在方框內；然而動態預覽仍然使用實際數值，所以元素的確會真的越界。
第五個錯誤是把 cubic-bezier() 當作 transition 的速寫。它其實只是一個屬性：transition-timing-function。持續時間、延遲、屬性與迭代次數仍須另外設定，這個值只貢獻整體動畫中的一個環節。
CSS Cubic Bezier 產生器如何預防這些錯誤
CSS Cubic Bezier 產生器正是圍繞這些規則所打造，因此它會自動攔截多數錯誤。x 輸入被限制在有效的 CSS 範圍內，有限的 y 值從負十到正十之間都可接受。這個介面不會產生任何 CSS 會因座標無效而拒絕的值。
關鍵字預設值採用 W3C 規範定義的標準化控制點，而 MDN 的 cubic-bezier 參考文件也獨立記載了同樣內容。選擇預設值並不會把關鍵字回寫到宣告中——可見的輸出永遠會完整暴露四個數字，並四捨五入到小數三位。這讓數值可被記錄、可被比較、可被修改，而不會藏有隱性預設。計算過程中數字保留完整的 JavaScript 精度；只有在宣告序列化輸出時才會進行四捨五入。
在閱讀或交接程式碼時，把關鍵字對控制點的對照表隨手備一份會很實用。
| 關鍵字 | 標準 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) |
在 y 值方面，介面接受越界(overshoot)與蓄勢(anticipation)，但圖表仍維持穩定的 0 到 1 框線以便比較一般性的計時曲線，因此刻意設定的極端 y 值會延伸到可見的方形區域之外。範例表格與動畫預覽仍然使用實際計算出的緩動結果。如果越界效果很重要，請檢視實際動起來元素與數值範例，而非誤以為圖表被裁切就代表數值被限制住了。
三步驟產生一條有效的 Cubic Bezier 曲線
- 挑一個預設值或設定四個數字。如果這條曲線是用於一般 UI 動態，先選用標準的緩動關鍵字；如果你已經知道想要的外型，也可以直接輸入 x1、y1、x2 與 y2。五個預設分別是 linear、ease、ease-in、ease-out 與 ease-in-out，每一個都從 W3C 規範載入對應的標準化控制點。如果你選擇預設，可見的宣告仍會顯示完整的四個數字而非關鍵字本身，這樣你就能準確記錄瀏覽器實際會使用的內容。若要自訂，可以拖移控制把手，或直接在四個輸入欄位中輸入數值；x 值被限制在有效的 CSS 範圍內，y 值則接受從負十到正十之間的任何數字。
- 把圖表、範例與 Run 預覽三者一起讀。圖表上看起來漂亮的曲線並不代表足夠——範例表格會回報動畫值在經過輸入 0、0.25、0.5、0.75 與 1.0 時實際達到的進度。如果 50% 這個樣本遠離 0.5，代表曲線在整段中點附近有非常激烈的加速或減速，光看圖表無法察覺。Run 預覽會切換一個小圓圈在兩個水平位置之間移動，採用 900 毫秒的 transform 過渡搭配所產生的緩動字串，讓你看見計時套用於真實運動時的樣貌。重複點擊可以比較前進與反向的播放。
- 複製宣告並在實際元件上測試。使用複製控制來寫出完整的 transition-timing-function 宣告，連同分號一併帶上。將它貼到正式環境的樣式表中，套用在你實際打算出貨的屬性、距離與持續時間上。預覽僅展示計時；距離、持續時間、繪製成本與周圍的運動都會影響緩動的整體感受。預覽中 900 毫秒的 transform 並無法預測 250 毫秒的 opacity 變化會是什麼感覺，正式環境中的情境可能會浮現預覽無法發現的問題。
在相信曲線之前先讀範例表格
範例表格是介面中能回答圖表回答不了的問題的部分：在給定的時間比例經過時，動畫值實際進展了多少。針對五個輸入點 0、0.25、0.5、0.75 與 1.0，求解器會找出能產生所要求 x 座標的曲線參數，再計算對應的 y。它先採用有界牛頓迭代法，必要時再以二分法收尾。這能避免把曲線參數誤當成經過時間的常見錯誤，特別是當 x 控制點使兩者並不相等時。
這件事之所以重要，正是先前提到的參數對時間陷阱。對於一條 x1 = 0.42、x2 = 0.58 的曲線而言，已經過時間的半點會對應到一個參數值，該參數的 x 座標是 0.5——而該參數下的 y 座標才是真正的動畫進度。圖表以參數形式繪出整條曲線；範例表格則將它收斂成你最常需要確認的五個數值。
如果一條曲線在圖表上看起來很平衡，但範例表格卻顯示 0.25 的數值已經超過 0.5，代表這條曲線把動態集中在前半段，實際感受到的計時不會與視覺形狀吻合。在把宣告複製到正式環境之前，請把圖表當作方向指引，把範例表格當作事實依據。
在出貨前於實際元件中測試緩動效果
在預覽中看起來正確的 cubic-bezier 值，在正式環境中仍可能感覺不對，因為預覽展示的是計時而非表現。距離會改變感受上的速度，持續時間會改變緩動的份量，而被動畫化的屬性也會影響曲線的閱讀方式——transform 的 translate 對緩動的反應與 opacity 或 background-color 不同。
短距離搭配強烈的越界效果，可能讓控件看起來像脫離容器再彈回，這會暴露出在完整尺寸下根本不會出現的版面假設。長持續時間搭配細微的加速，單獨看起來很柔和，但放進繁忙的介面裡就會顯得突兀。越界超過 1.0 的曲線必須對照元素實際覆蓋的內容來檢查，因為越界可能會顯示出原本預期要被裁掉的內容。想進一步了解 y 離開標準範圍時還允許什麼，可以參考關於 CSS cubic-bezier() 中 y 值離開 0–1 範圍的指南，其中以同樣的限制條件逐步說明。
另外請注意，產生器並不會輸出 keyframes、彈簧物理、linear() 停駐點清單、steps()、持續時間、延遲、迭代次數，或完整的 transition 速寫——它只會產生單一的 cubic-bezier 計時函式，這讓輸出可預期且易於稽核，但也代表其餘動畫責任仍在你身上。如果目標是一整行完整的 transition，你仍然必須自己組合屬性、持續時間、延遲，以及任何 reduced-motion 備援方案。
讓曲線符合無障礙與 Reduced Motion 原則
Reduced-motion 偏好設定屬於同一組出貨前的檢查項目。如果某個 cubic-bezier 只是非必要的裝飾，請尊重 prefers-reduced-motion，縮短持續時間、移除緩動，或直接拿掉整個動畫。一條有效的曲線並不自動代表它無障礙、高效能或合適；若沒檢查焦點、指標行為與 reduced-motion 備援就出貨，是較常見的無障礙錯誤之一。
強烈的越界效果可能讓控件看起來像反轉、脫離容器，或顯示出原本預期要被裁掉的內容。快速的來回震盪可能在使用者已要求作業系統減少動態時，引發前庭不適。重要的狀態變更即使沒有動畫也應該讓人理解——這代表即使動畫被完全移除，下層 UI 仍必須能正常運作。
在元素進行過渡時，請保持焦點順序可預期，並確認正在移動的元素上的指標事件行為正確，或已被暫時停用。cubic-bezier 控制的是計時，它並不決定動畫是否一開始就該存在；把 cubic-bezier 當作這些判斷的替代方案，是值得從工作流程中移除的最後一個錯誤。
如果你正在權衡選項，用邊框畫出 CSS 三角形：零尺寸手法對此有詳細說明。