CSS 的 cubic-bezier() 宣告在瀏覽器中看起來錯誤，通常有三個原因：x1 或 x2 滑出了 0–1 的範圍，瀏覽器悄悄退回預設的 `ease`；y 控制點產生了你在預覽中沒注意到的「預期前進」或「超出範圍」；或是曲線本身沒問題，但周圍的元件變更了 duration、property 或距離。CSS 規範定義，當任一個 x 控制座標落在閉區間的 0 到 1 範圍之外時，cubic-bezier 值即視為無效；根據 W3C CSS Easing Functions Level 1 規範，引擎會將整個宣告視為從未寫入。這正是「我的自訂 easing 沒生效」這類抱怨最常見的單一原因。第二常見的原因，則是把 y 軸當作進度限制——它並非如此；y 值可以高於 1 或低於 0，這在規範中是允許的，會產生合法但出乎意料的動態效果。第三個原因，則是在錯誤的情境中測試曲線：一段 900 ms 的短距離預覽，絕對不會和實際按鈕 250 ms 的 hover、跨越大範圍屬性變化所感受到的效果相同。修復的第一步，是先釐清你的問題落在這三類中的哪一類。
為什麼產生的 Cubic Bezier 在瀏覽器中看起來錯誤
當 CSS cubic-bezier 曲線「沒作用」時，CSS 並不會報錯——它會直接捨棄該 timing-function，退回 `ease`。這種靜默失敗，是剛產生的結果看起來錯誤的最常見原因，而且幾乎總是源自那四個控制數字，而不是 transition 宣告的其他部分。如果瀏覽器在 DevTools 的 Computed 面板中顯示 `ease` 為實際生效的 timing-function，就代表你的曲線被拒絕了，頁面所使用的並非產生器輸出的結果。
另一類「看起來錯誤」的結果，發生在曲線確實生效，但 y 值產生了出乎意料的動態。y1 高於 1.0 會讓值越過目標後再回歸；y2 低於 0 則會先向後拉再繼續向前。這些在規範中都是合法的 CSS 值，但在理應讓人感到可預測的介面上，會被視為瑕疵。
第三類則是具有欺騙性的相符：曲線正確，但周圍情境已經改變。較長的 duration 會讓感知到的加速度變平；較短的 duration 則會放大它。距離之所以重要，是因為 cubic-bezier 控制的是「時間」而非「距離」——同一條曲線套用於 50 像素的位移和 500 像素的位移，會產生截然不同的感知速度。
先檢查 X 座標
CSS 規定 x1 與 x2 必須維持在閉區間的 0–1 範圍內。CSS Cubic Bezier 產生器會把輸入限制在該範圍內，但貼到樣式表中的值並沒有這層保護——一個多打的鍵、小數點看錯、或是複製貼上錯誤，都可能讓某個 x 超出範圍，導致整個宣告失效。在調整 y 值之前，請先確認 x1 與 x2 落在 0.000 到 1.000 之間（含端點）。
一個快速的診斷方式，是讀取輸入 0.0 與輸入 1.0 的範例表格。兩者必須分別為 0.000 與 1.000；如果不是，表示求解器拿到的是一條退化曲線，整個宣告都值得懷疑。那五個數值進度範例，是驗證曲線是否符合預期最快的方法，遠比用肉眼掃描圖形來得快。
X 座標參考表
| 輸入進度 | 必要輸出 | 重要性 |
|---|---|---|
| 0.00 | 0.000 | 曲線必須從原點開始；否則動畫一開始就處於動作中段。 |
| 0.25 | varies | 曲線形狀的第一個取樣點；用於檢查早期的 ease。 |
| 0.50 | varies | 這是輸入時間的一半，而非沿曲線的一半。 |
| 0.75 | varies | 後半段的形狀；用於檢查後期的 ease。 |
| 1.00 | 1.000 | 曲線必須在 (1, 1) 結束；否則會在數值到達目標前就結束動畫。 |
標準關鍵字座標
| 關鍵字 | x1 | y1 | x2 | y2 |
|---|---|---|---|---|
| linear | 0.000 | 0.000 | 1.000 | 1.000 |
| ease | 0.250 | 0.100 | 0.250 | 1.000 |
| ease-in | 0.420 | 0.000 | 1.000 | 1.000 |
| ease-out | 0.000 | 0.000 | 0.580 | 1.000 |
| ease-in-out | 0.420 | 0.000 | 0.580 | 1.000 |
讀取範例表格，而非圖形輪廓
範例表格能回答控制點圖形本身無法回答的問題：當經過特定比例的時間時，動畫值的進度是多少？對於 0.0、0.25、0.5、0.75、與 1.0 的每個輸入，產生器會先解出能產生該 x 座標的曲線參數，再計算 y。它使用有界牛頓迭代，必要時會退回二分搜尋法。這避免了將曲線參數誤當作經過時間的常見錯誤。
一個具體的例子：如果你把 y1 設為 1.6 想要快速啟動，那麼輸入 0.25 的範例值會遠高於 0.25，而不是 0.40——曲線很陡，但 x 軸仍然是經過時間。圖形能讓你看出 overshoot，但只有表格能告訴你，數值實際越過目標是在哪個時間點。請將表格視為事實來源，將圖形當作視覺輔助。
當 Overshoot 是問題所在時，修正 Y 座標
y 控制值描述的是輸出進度，而非限制在某個百分比內。根據 CSS 規範，y1 與 y2 在理論上可以落在任何有限的範圍內，產生器接受從負十到正十的數值。大多數的 overshoot 問題並非驗證問題，而是品味問題。y2 設為 1.4 代表元素抵達目標後，會再滑過 40%，然後回歸定位。這在技術上是有效的，在某些介面中是刻意的視覺效果，但在其他介面中則是 bug。
如果 overshoot 並非刻意，最乾淨的修正方式是把造成彈跳的那個 y 座標減半，再重讀範例表格。如果輸入 0.75 的範例值遠高於 1.0，代表元素在動畫進行到四分之三時已經超過目的地；此時應把該 y 值往回拉，直到範例值落在 1.0 附近。如果圖形看起來延伸超出方形邊框，那是刻意設計——圖形會保持穩定的 0 到 1 視窗，讓一般時速曲線能相互對照。範例值和 Run 預覽使用的仍為真實的 easing，因此請依據這些來判斷，而非圖形的可見邊界。
如何逐步修復一條壞掉的 Cubic Bezier
- 開啟 CSS Cubic Bezier 產生器，選擇最接近你原本意圖的關鍵字——`ease`、`ease-in`、`ease-out` 或 `ease-in-out`。產生器會顯示這四個標準化的座標，方便你檢視該關鍵字實際上是什麼。
- 讀取輸入 0.0 與 1.0 的範例表格，確認兩者分別為 0.000 與 1.000。如果不是，曲線已經退化，後續所有行為都會出問題。
- 先調整 x1，觀察早期的範例值。CSS 規定 x1 必須維持在 [0, 1] 內；輸入欄位會拒絕超出該範圍的值。
- 調整 y1，直到輸入 0.25 的範例值符合你想要的早期手感。若此處超過 1.0，元素會在應該啟動之前就先衝出去。
- 以同樣方式調整 x2 與 y2，這次觀察輸入 0.75 的範例值。最後的四分之一段，是大多數「感覺不對」抱怨所在之處。
- 點擊 Run 預覽，觀察圓形以產生的 easing 在 900 ms 的距離上移動。連續點擊會切換正向與反向運動。
- 複製完整的宣告（含分號），並在實際元件上，以實際的距離、屬性與 duration 進行測試。
在實際元件而非預覽中測試宣告
預覽展示的是 timing，而非每種工作負載下的實際效能表現。當距離、duration、屬性、渲染成本、輸入裝置或周圍的動態改變時，實際元件的感覺可能會不同。請把宣告貼到真實的樣式表中、實際要動畫化的屬性上，並以實際的 duration 觀察動態。如果曲線在預覽中感覺完美，到了生產環境卻顯得鬆散，那麼曲線本身多半是正確的，問題出在情境。
- 動畫化的屬性要和預覽展示的相同，不要用其他屬性替代。
- duration 要符合實際值；把 duration 減半或加倍會改變感知到的加速度。
- 距離要符合實際值；曲線控制的是時間，因此 5 px 的位移和 500 px 的位移看起來會不同。
- 在不必要動畫之處，尊重使用者偏好的 reduced-motion 設定。
- 在元素過渡期間，驗證焦點與指標行為；一條 oscillate 的曲線可能會讓焦點框移到意外的位置。
當曲線正確，但動態仍感覺不對時
一條有效的曲線，並不自動代表它具有可及性、效能或合適性。過大的 overshoot 會讓控制項看似倒退、離開容器，或露出原本預期會被裁切掉的內容。兩個相近 y 值之間的快速 oscillate 會產生振動，讓人誤以為是 bug。而跟著 overshoot 元素移動的焦點框，可能會落在鍵盤使用者預期之外的位置。
如果曲線通過以上所有檢查仍然看起來錯誤，那麼問題幾乎可以確定在 timing-function 之外：一個不該被過渡的屬性、對於距離而言過短的 duration，或缺少 `will-change` 宣告導致每一幀都重新繪製。產生器不會產生 keyframes、spring physics、linear() stop list、steps()、duration、delay、iteration count，或完整的 transition shorthand——它只產生 timing-function 本身。如需對同一工具深入閱讀，請參考 如何使用 cubic-bezier CSS 製作自訂 easing，以及 產生 CSS cubic bezier 時避免錯誤。
當一切對齊時，瀏覽器會渲染你所設計的精確 easing；根據 MDN 的 cubic-bezier 參考資料，四個數字的宣告是發送自訂 easing 曲線最便於移植的方式。