是的，在 CSS cubic-bezier() 緩動曲線中，y1 和 y2 可以是負數或大於一，而 CSS Cubic Bezier 產生器接受這兩種情況。只有 x 座標（x1 和 x2）被限制在 0 到 1 的封閉區間內，因為它們描述曲線在輸入時間軸上到達各控制點的程度。y 座標描述的是輸出進度，CSS 允許它們超出這個範圍，以便設計師能產生 anticipation（預備動作），也就是動畫值在下沉之前先低於起始位置，或 overshoot（過衝），也就是動畫值在歸位之前先擺動超過其靜止位置。產生器會將 x 輸入限制在有效的 CSS 範圍內，並接受從負十到十的有限 y 值，然後執行純瀏覽器端的計算來驗證這些限制，再將結果序列化為三位小數。輸出數字只在序列化時進行四捨五入，因此底層運算會保留完整的 JavaScript 數值精度。
為什麼 y1 和 y2 可以超出 0–1 範圍
CSS cubic-bezier() 緩動由四個數字描述：x1、y1、x2 和 y2。曲線永遠從點 (0, 0) 開始，到 (1, 1) 結束；這四個可編輯的數字定義了兩個中間控制點，用以在這些錨點之間牽引曲線。x 軸是經過正規化的已耗用時間比例，0 代表轉場開始的瞬間，1 代表轉場結束的瞬間。y 軸則是在該瞬間動畫屬性實際達到的進度比例。由於 x 是時間比例，CSS 將 x1 或 x2 在 0–1 範圍外視為無效：在動畫開始之前或結束之後的控制點，無法對應到轉場中的真實瞬間。
y 軸則不同。進度大於 1 代表動畫值已超過其目標（過衝），而進度小於 0 則代表動畫值在回到正軌之前先朝反方向移動（預備動作）。兩者對於表現力十足的動態效果都很有用：一個按鈕在彈出之前先短暫地擠壓、一個面板在歸位之前先超過其最終位置、或一個通知徽章彈跳到位。CSS Easing Functions Level 1 規格明確允許這些效果；決定有效性的，是 W3C 對 x 而非 y 的規則。
座標有效性一覽
| 座標 | 意義 | 必要範圍 | 超出範圍的效果 |
|---|---|---|---|
| x1 | 第一個控制點的輸入時間位置 | 0 到 1（含） | cubic-bezier() 宣告無效，會被瀏覽器忽略 |
| x2 | 第二個控制點的輸入時間位置 | 0 到 1（含） | cubic-bezier() 宣告無效，會被瀏覽器忽略 |
| y1 | 第一個控制點的輸出進度 | 任何有限數字（產生器接受 −10 到 10） | 產生預備動作（小於 0）或過衝（大於 1） |
| y2 | 第二個控制點的輸出進度 | 任何有限數字（產生器接受 −10 到 10） | 產生預備動作（小於 0）或過衝（大於 1） |
產生器的介面會將 x 輸入限制在封閉的 0–1 區間，並獨立使用純粹的計算來確認每個輸出在顯示 CSS 宣告之前都是有效的。如果你輸入無效的 x 值，那四個數字的宣告就會被隱藏，使其無法被複製到樣式表中成為無作用的程式碼。
產生器如何處理過衝與預備動作
方形圖表繪製從固定起點 (0, 0) 到固定終點 (1, 1) 的參數式曲線。標準曲線會舒適地落在方形內部。當你刻意將某個 y 值推向產生器接受範圍的邊緣時，參數式曲線可能會延伸到可見方形之外，因為圖表維持穩定的零到一框格，讓一般曲線在視覺上仍可比較。範例表格與動畫預覽繼續使用實際計算出的緩動，因此 y 的偏移會被保留，而不是被裁剪掉。這點很重要：在圖表中看起來「超出方框」的曲線，正是瀏覽器實際會執行的曲線。如果你不確定某個座標對會產生多少過衝，請相信輸入時間 0、0.25、0.5、0.75 和 1 時的數值樣本，並觀察移動中的預覽圓圈。
範例表格回答了一個圖表本身難以回答的問題：在特定的已耗用時間比例下，動畫值已經進展了多少？對於輸入 x 集合 {0, 0.25, 0.5, 0.75, 1} 中的每個值，求解器會找到 x 座標等於該輸入的曲線參數 t，然後計算 y。它會先嘗試有界的牛頓迭代法，必要時退而求其次使用二分法，這避免了將 t 本身視為已耗用時間的常見錯誤，即使在 x1 和 x2 使兩者不同的情況下也一樣。Run 預覽按鈕會以 900 毫秒的 transform 轉場在兩個水平位置之間切換一個圓圈，使用精確產生的緩動字串，因此你可以反覆點擊來比較前進與反向的動作，再做決定。
如何使用 CSS Cubic Bezier 產生器設計自訂過衝曲線
- 開啟 CSS Cubic Bezier 產生器，選擇要從標準緩動預設（ease、ease-in、ease-out、ease-in-out、linear）開始，或是直接輸入自訂的 x1、y1、x2 和 y2 值。關鍵字按鈕會從 CSS Easing Functions Level 1 載入其標準化的 cubic-bezier 對應值。
- 若要產生過衝，請將 x1 維持在 0 到 1 之間，並將 y1 調高到 1.2–1.6 以獲得細微的過衝，或調高到 2 以獲得強烈的彈跳效果。y1 越大，動畫值在歸位前就會移動得越遠。
- 若要產生預備動作，請將 y2 調低到 0 以下（例如 −0.3 到 −0.6），讓曲線在轉場末期短暫指向反方向。如果想要彈簧般的感覺，可以與過衝的 y1 結合使用。
- 檢視方形圖表、五個數值樣本（在 x = 0、0.25、0.5、0.75、1 處）以及移動中的 Run 預覽圓圈。表格是最可靠的讀數：在任何輸入下，y 值大於 1 代表動畫值在該時間點會超過其目標。
- 當時間感覺符合預期時，按一下 Copy CSS 將完整的 transition-timing-function 宣告（包含其分號）複製到剪貼簿。可見的宣告永遠會公開所有四個數字，即使你一開始是從關鍵字開始，因此易於記錄、比較和修改。
- 將宣告貼到實際的元素中，設定動畫屬性（transform、opacity 等等），以毫秒為單位選擇 duration，並遵守任何減少動畫的偏好設定。產生器刻意不輸出 duration、delay、iteration count 或完整簡寫，因此這些決定留給你來做。
用於比較的標準關鍵字對應
選擇關鍵字按鈕會載入每個符合標準的瀏覽器對該緩動名稱所使用的相同四個控制座標。可見的宣告會公開所有四個數字，因此選擇是可稽核的，而不是隱藏在關鍵字背後。
| CSS 關鍵字 | x1, y1, x2, y2（依 CSS Easing Functions Level 1） | 關於 y 值的備註 |
|---|---|---|
| linear | 0, 0, 1, 1 | 無過衝，無預備動作 |
| ease | 0.25, 0.1, 0.25, 1 | 溫和加速，無過衝 |
| ease-in | 0.42, 0, 1, 1 | 緩慢開始，無過衝 |
| ease-out | 0, 0, 0.58, 1 | 快速開始，無過衝 |
| ease-in-out | 0.42, 0, 0.58, 1 | 對稱 S 形曲線，無過衝 |
這五個關鍵字全都落在 y = 0 到 1 的框格之內。若要超出這個框格，你必須自行編輯座標，或貼上已知的過衝預設，例如 cubic-bezier(0.34, 1.56, 0.64, 1)，這是一個流行的「back」緩動，會在歸位前短暫超過 1。產生器的計算會精確重現該宣告。
測試、無障礙與減少動畫
CSS 解析器接受的 cubic-bezier() 值，在真實介面中不一定就是好的選擇。大的過衝可能會將元素推出其容器之外、短暫暴露出原本應該被裁剪的內容，或讓聚焦的控制項看起來以令人迷失方向的方式反轉（這對鍵盤或指標使用者來說很困擾）。產生器刻意在動態預覽中顯示完整的計算緩動，讓你在複製宣告之前能判斷這些效果。
預覽使用 900 毫秒的 transform 轉場在兩個位置之間展示時間感。真實的元件在距離、duration、屬性、渲染成本、輸入裝置或周圍動作改變時可能會感覺不同，因此請使用你計畫出貨的實際距離和 duration，在最終介面中測試該宣告。讓重要的狀態變更在沒有動畫的情況下也能被理解，避免快速震盪，並在元素轉場時檢查聚焦和指標行為。在動畫非必要的地方，請遵守 prefers-reduced-motion；產生器只輸出 transition-timing-function，因此減少動畫的行為由你掌控。
當看起來有問題時，將曲線與已發佈的規格交叉比對。W3C CSS Easing Functions Level 1 是語法、x 有效性規則與關鍵字對應的主要來源，而 MDN 則以瀏覽器為導向的文件說明 cubic-bezier() 的行為。產生器的純粹計算會獨立驗證這些限制，使複製的宣告符合標準，而不是依賴於記憶中的對應。
如果你正在權衡選項，從產生的 CSS 切換開關中移除轉場對此有詳細說明。
如果你正在權衡選項，如何將十六進位轉換為 RGBA 並取得 CSS rgba() 輸出對此有詳細說明。