CSS 的 cubic-bezier 緩動曲線可以由恰好四個數字完整描述——x1、y1、x2 和 y2——因為 CSS 中每條 cubic-bezier 曲線的起點永遠是進度點 (0, 0)，終點永遠是 (1, 1)。當你要在不同的時段、專案或團隊成員之間產生相同的 CSS cubic bezier 結果時，你只需要保持這四個數字穩定即可；起始錨點和結束錨點已經由 CSS 規範鎖定。CSS Cubic Bezier 產生器直接支援這一點，它在可見的宣告中完整公開所有四個控制座標，而非將它們隱藏在關鍵字標籤後方；輸出數字只在序列化的那一刻才四捨五入到小數點後三位；並且讓你隨時重新載入五個標準化 CSS 緩動關鍵字中的任何一個。由於所有計算都在瀏覽器中透過有界的牛頓迭代加上二分法完成，因此同樣的四個輸入一定會解析出同樣的取樣進度值，這正是讓複製出來的宣告在視覺上能夠重現的原因。
「重現相同結果」對 Cubic Bezier 而言代表什麼
在 CSS 動畫的脈絡下，「重現相同結果」代表產生一段相同的 timing-function 字串，讓瀏覽器將其解析為相同的參數曲線，進而在每個經過時間的分數上得到相同的進度。由於 CSS 將 cubic-bezier 值定義為四個控制點 (0,0)、(x1,y1)、(x2,y2)、(1,1)，而起點和終點錨點已由規範固定，因此兩段 x1、y1、x2、y2 值完全相同的宣告，無論是由哪個編輯器、產生器或手寫程式碼產生，都必然產生相同的緩動效果。根據 W3C CSS Easing Functions Level 1 規範，只要 x1 或 x2 落在 0 到 1 的閉區間之外，曲線即屬無效；但 y 值除了必須是有限數字之外並無約束，因此任何可重現性的工作流程都必須遵守這兩項限制，同時仍允許 y 值低於 0 或高於 1，以便實現 anticipation 與 overshoot 效果。
這就是為什麼 cubic-bezier 的可重現性遠比完整動畫的可重現性簡單。你不需要重現關鍵影格動作、彈簧物理模型或 steps() 時間軸；你只需要保留四個數字。一旦這四個數字被保留，參數曲線、每個輸入時間分數上的取樣進度，以及螢幕上的運動都會一致——前提是使用相同的屬性、距離和持續時間。產生器刻意將範圍縮窄到這個單一決定：它不會輸出關鍵影格、彈簧物理、linear() 停止點清單、steps() 時間設定、持續時間、延遲、迭代次數，或完整的 transition 簡寫，這讓宣告易於稽核與重現。
產生器支援的三條可重現性路徑
CSS Cubic Bezier 產生器提供三條可靠的路徑來達到可重現的結果，多數讀者會同時使用不只一條。
標準化預設關鍵字。關鍵字按鈕——linear、ease、ease-in、ease-out、ease-in-out——會載入 CSS Easing Functions Level 1 規範所定義的精確控制點。由於這些值已經標準化，在任何合規的工具、任何瀏覽器、任何一天選擇同一個關鍵字，都會重現同一條曲線。產生器將這些對應關係儲存為可執行的參考資料，而非依賴記憶，因此螢幕上顯示的數字保證與規範一致。
記錄下來的控制數字。你所建立的任何自訂曲線，都完整由其四個 x1、y1、x2、y2 值所捕捉。把這些數字複製到程式碼註解、設計 token 或樣式指南中，你就擁有了數月後重現該曲線所需的一切，即使產生器的介面日後改變也沒關係。由於介面會將 x 輸入限制在有效的 CSS 範圍內，並接受從 -10 到 10 的有限 y 值，因此你記錄下來的任何數字都是工具再次輸入時能夠接受的數字。
重新輸入數值加上複製的宣告。由於可見的宣告永遠顯示所有四個數字（絕不會只顯示裸關鍵字），你可以將先前宣告的數值貼回輸入欄位以重建精確的曲線，也可以將完整的 transition-timing-function 宣告直接貼到你的樣式表，無需再做翻譯。選擇關鍵字永遠不會輸出關鍵字本身，所以你今天複製下來的宣告格式，明天貼上也會一模一樣。
用 CSS Cubic Bezier 產生器鎖定結果
- 開啟 CSS Cubic Bezier 產生器，並挑選與你想重現的曲線相符的起點：可以點選五個預設關鍵字（linear、ease、ease-in、ease-out、ease-in-out）中的任何一個來載入標準化控制點，也可以將原始的 x1、y1、x2、y2 值直接輸入到四個座標欄位中。
- 將圖形、五列的數值取樣表，以及 Run 預覽圓圈，與你打算重現的曲線相互核對。取樣表會顯示在輸入進度 0、0.25、0.5、0.75 與 1 時的輸出進度，這是最可靠的交叉檢查，因為兩條曲線在圖表上看起來可能相似，卻在特定的時間分數上有所差異。
- 點選 Copy CSS，將完整的 transition-timing-function 宣告（含尾端分號）放到剪貼簿。序列化後的數字會四捨五入到小數點後三位——例如，計算出來的 y 值 0.2499999 會變成 0.250——這個精度足以讓日後任何對同一條邏輯曲線的重現，都會序列化為相同的字串。如果瀏覽器拒絕剪貼簿存取，宣告仍然可見且可選取，因此你仍能手動擷取它。
- 將宣告貼到實際的 CSS 規則中，該規則會以預期的距離與持續時間對預期的屬性進行動畫，然後在實際介面中觸發 transition，確認動作與原本一致。
- 把這四個數字、屬性、持續時間，以及任何 reduced-motion 後備方案，記錄到註解、設計 token 或共用樣式指南中，以便任何人——包括未來的你——都能重新輸入它們並精確重建該曲線。
精度、四捨五入，以及輸出保持穩定的原因
在幕後，產生器以完整的 JavaScript 數值精度評估 cubic-bezier 參數公式，但只有在宣告被序列化為文字的那一刻，才會四捨五入到小數點後三位。這個選擇對可重現性很重要：一個自訂旋鈕位置，例如 y1 = 0.3333333333，會被序列化為 0.333，而把 0.333 貼回輸入欄位後能重現同一條邏輯曲線，因為這個三位小數的表示方式已經足夠精確，能在取樣表中的每個輸入進度上正確解析曲線參數。關鍵字按鈕則以相反方向呈現同樣的邏輯——點選 ease 會顯示 cubic-bezier(0.25, 0.1, 0.25, 1)，而以手動重新輸入這四個數字會產生完全相同的宣告。
下表列出五個標準化關鍵字的對應關係，這是依照 W3C CSS Easing Functions Level 1 規範所定義。每一行本身就是一條可重現的曲線——選取該關鍵字，或手動輸入這四個數字，每次都會產生相同的宣告。
| 關鍵字 | x1 | y1 | x2 | y2 |
|---|---|---|---|---|
| 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 |
由於這些值是標準化而非工具特定的，在這裡產生的曲線會與任何合規的 CSS 引擎上的同一條曲線相符，這是該格式所能允許最強的可重現性。具有極端 y 值的自訂曲線——例如 y1 = -2 以產生強烈的 anticipation pull——只要四個數字被原樣記錄下來，同樣可以重現。請留意，一個刻意取極端值的 y 可能延伸超出可見圖表的方框範圍，而取樣表與動畫預覽仍然使用實際計算出來的緩動值，因此記錄下來的數字才是真相來源。
在真實條件下測試重現出來的宣告
重現數字是必要條件，但並不充分：相同的 cubic-bezier 在周遭的 transition 參數改變時，感覺可能會有所不同。產生器的動畫預覽使用 900 毫秒的 transform transition，在兩個水平位置之間往返，這對正向與反向時間設定是個有用的煙霧測試，但實際產品中的動作取決於你動畫化的屬性（transform、opacity、color 與 filter 的內插方式各自不同）、該值移動的距離、目標裝置上的算繪成本，以及同時發生的任何其他動作。當你測試一條重現出來的曲線時，請以預期的持續時間、預期的屬性、預期的距離來執行 transition，並透過重複點選 Run 預覽來並排比較正向與反向播放。
瀏覽器的實作方式在一個狹窄的面向上也會有影響。如果你把曲線重新輸入到一個工具，而該工具使用與原先不同的演算法或容差來執行參數計算，那麼中間輸入時間的取樣進度可能會略有偏移。產生器透過使用有界的牛頓迭代，並在必要時以二分法收尾，來緩解這個問題，這與 MDN 上針對 cubic-bezier() easing function 所記錄的方法一致，因此重新輸入相同的數字會產生相同的取樣值。
當重現的動態看起來仍然不同
即使數字完全相同，重現的曲線在周邊情境改變時，仍可能產生明顯不同的動態效果。y 值超出 0 到 1 範圍的曲線會產生預期或過衝效果;在小尺寸切換控制項上看起來生動的過衝，放在大型模態面板上可能就顯得雜亂，因為這種面板可能會短暫超出其容器範圍，或顯示出原本預期要保持裁切的內容。如果重現的曲線在新情境中感覺不同，代表那四個數字並沒有改變——改變的是屬性、距離、持續時間，或是周邊的動態。一條有效的曲線並不會自動等於可存取、高效或合適，因此務必讓重要的狀態變更在沒有動態的情況下也能被理解，避免快速震盪，在非必要的動畫之處尊重 prefers-reduced-motion，並在元素轉場期間檢查焦點與指標行為。
若要在團隊中長期保持可重現性，請將這四個數字與屬性、距離、持續時間，以及任何 reduced-motion 的備用方案一併記錄下來，讓曲線與其預期用途能夠一起傳遞。配套指南 記錄你用來產生 CSS Cubic Bezier 的步驟 為需要具備稽核可用性的動態令牌的團隊，提供了更完整的記錄工作流程。
如果你正在權衡各種選項，從 CSS 切換開關產生器重現相同的結果 對此有詳細說明。