一個 cubic-bezier() 緩動函式是由剛好四個控制座標所定義 — x1、y1、x2 與 y2 — 用來描述 CSS 動畫如何隨時間加速與減速，而一個專屬的產生器會將這四個數字轉成一條可貼到任何樣式表的合法 transition-timing-function 宣告。難處很少是語法本身。難處在於挑選能產生你想要感覺、讓 x 維持在 CSS 有效性規則內、並在真實元件中行為正確的數字。CSS 要求 x1 與 x2 都必須介於 0 與 1 之間，因為它們代表輸入時間位置；而 y 值代表輸出進度，可以低於 0 或高於 1，以製造預期效果或 overshoot。沒有可見的曲線、範例表格與執行中的預覽，大多數開發者最後都在猜四個數字、貼到 DevTools，然後每次微調後重新載入。CSS Cubic Bezier 產生器把這個循環壓縮成單一畫面：挑選預設、編輯座標、觀察預覽、複製宣告。
Cubic Bezier 緩動函式的結構
CSS cubic-bezier(x1, y1, x2, y2) 函式描述一條參數曲線，永遠從點 (0, 0) 出發，到 (1, 1) 結束。你所提供的四個數字是兩個中間控制點，決定線條如何在這些錨點之間彎曲。水平軸代表已消逝的輸入進度 — 也就是動畫時長已經過了多少。垂直軸代表輸出進度，也就是被動畫化的數值實際移動了多少。
因為 x 代表時間，CSS 強制規定一條硬性規則，記載於 W3C CSS Easing Functions Level 1 規範：x1 與 x2 都必須維持在 0 到 1 的閉區間內。x 值落在該範圍外會使緩動無效，瀏覽器會回退到預設關鍵字。y 值在產生器中則沒有限制。y1 或 y2 可以是負值，產生讓數值先短暫倒退再穩定的 anticipation 效果；也可以大於 1，產生讓數值超過目標再回穩的 overshoot 效果。這兩種行為在技術上都是合法的 CSS，但每一種都會以值得在最終介面中測試的方式改變動畫外觀。
標準的 CSS 緩動關鍵字並非獨立的語法 — 它們每一個都解析為 W3C 規範所定義的特定四個座標組合。這代表像 cubic-bezier(0.25, 0.1, 0.25, 1) 這樣手寫的宣告，與關鍵字 ease 完全等價，在每個相容瀏覽器上有完全相同的時間表現，而 MDN 也記載了相同的對應作為交叉參考。
為什麼在 50% 的取樣點不一定是 t = 0.5 時的曲線
產生器所繪製的形狀是一條相對於其自身參數 t 繪製的參數曲線，t 獨立於動畫時間，從 0 跑到 1。然而輸入進度是沿著 x 軸走。當 x1 與 x2 不對稱時，這兩條軸就不再對齊 — 而這個錯位正是閱讀 cubic-bezier 圖形時最常見混淆的來源。
為了產生範例表格，產生器解決的是一個真實的數值問題：對每個要求的 x — 0、0.25、0.5、0.75 與 1 — 它會找出 x 座標等於該值的參數 t，然後計算該 t 的 y。求解器使用有界的 Newton 迭代，當 Newton 步會跨出有效範圍時則回退到二分法。這很重要，因為直接讀取 t 等於 0.5 時的 y，只有在曲線剛好於該 t 通過 x 等於 0.5 時才會是正確答案；這在 ease-in-out 等對稱曲線上成立，但在 ease-in 或 ease-out 等偏斜曲線上則不成立。
舉一個具體的錨點來看，考慮 linear 預設。它的控制點是 (0, 0) 與 (1, 1)，曲線參數 t 在整條曲線上都等於輸入進度。所以 x 等於 0.25 時，y 等於 0.25；x 等於 0.5 時，y 等於 0.5；x 等於 0.75 時，y 等於 0.75。這是圖形與範例表格逐行一致的唯一情況，也讓 linear 成為一個有用的基準，得以辨識其他曲線何時在做一些不直觀的行為。
三步驟產生並複製宣告
- 選擇起點。點擊五個 CSS 緩動關鍵字按鈕之一 — linear、ease、ease-in、ease-out 或 ease-in-out — 以載入其標準化座標，或直接將你自己的 x1、y1、x2、y2 值輸入到四個輸入欄位中。產生器會把 x 輸入限制在 0 到 1 的有效範圍內，並接受從 -10 到 10 的有限 y 值。
- 閱讀圖形、表格與預覽。觀察參數曲線在你變更任何數值時如何重新塑形。檢查五個輸入到輸出的取樣點，看在 0%、25%、50%、75% 與 100% 的已消逝時間處，被動畫化的數值已進展了多少。切換 Run 預覽，讓一個圓形以精確的緩動字串在 900 毫秒內於兩個位置之間滑動，並可重複點擊以比較正向與反向的運動。
- 複製宣告並在實際情境中測試。使用 Copy CSS 把完整的 transition-timing-function 值（含結尾的分號）放到剪貼簿上。貼到真實元件中的真實屬性上 — 在出貨前依需要調整 duration、delay、distance 以及任何 reduced-motion 的備用方案。
五個 CSS 緩動關鍵字及其座標
產生器中的五個關鍵字按鈕會載入 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 | 對稱的加速 |
只有在宣告被序列化以供顯示或複製時，數字才會四捨五入到小數點後三位；計算本身保留完整的 JavaScript 數值精度，因此在第四位小數才有差異的兩組座標，在瀏覽器中的行為會完全相同。
本工具不會產生的項目
產生器刻意聚焦於單一決策：一條 cubic-bezier 時間函式的四個座標。它不會產生 keyframes、彈簧物理、linear() 停駐點清單、steps() 跳躍、duration、delay、迭代次數，或完整的 transition 縮寫。那些每一項都是各自獨立、帶有不同取捨的撰寫關注點。
這樣的範圍讓輸出可預期且易於稽核。你永遠會確切看到自己即將出貨的四個數字，也永遠會知道自己還需要撰寫哪些周邊的 CSS 規則。對於長時間或分階段的動畫，keyframe 序列通常比單一緩動曲線更合適；對於像拉霸機滴答聲這樣的階梯式運動，steps() 才是對的工具。當你想要在兩個狀態之間呈現單一連續的時間感受時，cubic-bezier 才是對的工具。
數字之外的動畫行為
一條技術上合法的曲線，仍可能產生令人不悅、困惑或難以使用的運動。大的 overshoot 可能讓控制項看起來像反向移動、跑出它的容器，或露出原本預期被裁掉的內容。在負值與正值 y 間的快速振盪，可能對部分觀賞者引發前庭不適。當元素處於轉場中途時，焦點與指標行為也可能以產生器無法顯示的方式產生細微變化。
900 毫秒的預覽展示的是時間感，而非實際產品效能。當距離、duration、屬性、渲染成本、輸入裝置或周邊運動改變時，真實元件的感覺可能不同 — 因此請在最終介面中測試該宣告，並對非必要的動畫遵守 prefers-reduced-motion。讓重要的狀態變更在沒有動畫的情況下仍可理解，並避免唯一目的只是視覺裝飾的曲線。
若複製按鈕因瀏覽器政策被拒，該宣告仍會在輸入區域中保持可見且可選取，且狀態文字不會宣稱成功，所以你隨時都能知道剪貼簿上的值是來自工具還是來自手動選取。所有運算都在瀏覽器中進行，不會有任何曲線、CSS 或互動資料被上傳、儲存或傳送到任何動畫服務。當你準備好根據實際動畫（而非靜態曲線）來驗證輸出時，結果檢查工作流程會更深入地帶你走過那最後一步。
想深入了解，請參閱產生 CSS Toggle Switch 時的問題排除。