CSS Cubic Bezier Generator 只會輸出 transition-timing-function 值 —— 它不會產生完整的 transition 簡寫。當你點擊 Copy CSS 時，剪貼簿會收到單一宣告，例如 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);，包含尾端分號，除此之外什麼都沒有。這個工具刻意省略了動畫屬性、持續時間、延遲、迭代次數，以及 CSS transition 機制的其他所有部分，因為這些選擇取決於你實際要設定樣式的元件。在按鈕上 200 毫秒的顏色淡入、在抽屜上 900 毫秒的變形，以及 2 秒的透明度交叉淡入，各自需要不同的周邊宣告。透過將時間函數隔離開來，這個產生器讓輸出保持可預測、可稽核，並且易於與 W3C CSS Easing Functions Level 1 的標準化關鍵字對應進行比較。你會精準地收到定義該緩動曲線的四個數值控制座標，格式化為有效的 CSS 值，可直接放入你自己的 transition 規則中。
這個工具實際上會產生什麼
Copy CSS 按鈕會寫入一條完整的 transition-timing-function 宣告，包括屬性名稱、括號、以逗號分隔的四個控制座標，以及結尾的分號。不會輸出 keyframes、linear() 停駐點清單、steps() 函數、持續時間，也不會輸出 transition 簡寫。如果你的瀏覽器拒絕存取剪貼簿，該宣告仍會以可選取的文字保留在畫面上，且狀態不會謊稱成功，所以你仍然可以手動複製它。在序列化過程中，每個座標都會四捨五入到小數三位，這就是為什麼你可能會看到 0.412，而內部計算產生的數值類似 0.4117；求解器本身保留完整的 JavaScript 數值精度，因此可見的結果是一種呈現方式的選擇，而非對曲線本身的四捨五入。
選擇五個 CSS 緩動關鍵字按鈕之一（linear、ease、ease-in、ease-out、ease-in-out）並不會直接輸出該關鍵字本身。相反地，介面會從 CSS Easing Functions Level 1 規格載入標準化的 cubic-bezier 等效值，並在畫面上顯示全部四個控制數字。這表示你可以在沒有隱藏預設值的情況下記錄、比較差異並調整曲線，也可以透過閱讀相同的四值格式，將自訂曲線與關鍵字進行比較。
| CSS 關鍵字 | 等效的 cubic-bezier() 座標 | 工具顯示的內容 |
|---|---|---|
| linear | cubic-bezier(0, 0, 1, 1) | 0, 0, 1, 1 |
| ease | cubic-bezier(0.25, 0.1, 0.25, 1) | 0.25, 0.1, 0.25, 1 |
| ease-in | cubic-bezier(0.42, 0, 1, 1) | 0.42, 0, 1, 1 |
| ease-out | cubic-bezier(0, 0, 0.58, 1) | 0, 0, 0.58, 1 |
| ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) | 0.42, 0, 0.58, 1 |
產生並複製有效的時間函數
- 從五個標準緩動預設中挑選一個，或將你自己的 x1、y1、x2、y2 值輸入到座標欄位中。介面會將 x1 與 x2 限制在封閉的 0–1 範圍內，並接受 −10 到 10 之間的有限 y 值，符合 W3C CSS Easing Functions Level 1 規格所定義的合法性規則。
- 閱讀圖表、五組輸入對輸出的取樣，以及 Run 預覽，以確認時間符合你的預期。取樣點位於輸入進度 0、0.25、0.5、0.75 與 1；對每一個點，求解器會先找出 x 座標符合輸入的曲線參數，再求取 y 值，因此 50% 那一列並非僅僅是 t = 0.5 時的曲線值。
- 點擊 Copy CSS。剪貼簿現在持有完整的 transition-timing-function 宣告及其分號，可直接貼到你的樣式表中。
- 使用你實際打算上線的屬性、距離與持續時間，將該宣告套用到真實元素上，然後在最終介面中觀察動態，而非僅依賴工具內的預覽。
自行組裝 Transition 的其餘部分
由於產生器僅提供時間函數，你仍然需要將其包裝在一條可運作的 transition 規則中。最常見的模式是使用簡寫：
transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
這裡的四個欄位分別是動畫屬性、持續時間、由 CSS Cubic Bezier Generator 產生的緩動曲線，以及一個可選的延遲。你也可以將它們拆分為獨立的 longhand 宣告 —— transition-property、transition-duration、transition-timing-function、transition-delay —— 當多個元素需要不同的持續時間但共用相同的緩動曲線時，這種做法很實用。如果你要以相同的時間函數為多個屬性製作動畫，可在簡寫中以逗號分隔列出它們。這些周邊設定都不會從緩動曲線推斷出來，因為曲線本身並不知道什麼在移動、移動多遠或移動多久。
對於仍在熟悉語法的讀者，自訂緩動工作流程指南會逐步說明如何將曲線對應到特定的動態設計意圖。
正確解讀取樣表
數值取樣回答的是曲線圖無法回答的問題：在經過某個比例的時間後，被動畫的值實際上前進了多少。CSS 時間函數將輸入進度放在 x 軸上，因此一旦 x 控制點不再位於 0.25 與 0.75，已耗時間與曲線進度就不再是相同的數字。產生器使用有界的牛頓迭代來處理這點，並在需要時以二分法收尾，這是反轉三次參數曲線的標準做法。最終得到的表格會顯示，例如在已耗時間 50% 時，對於一條侵略性的 ease-in 曲線，被動畫的值可能已抵達目標距離的 73%；而對於一條緩慢起步的曲線，則可能僅有 12%。將該表格視為事實依據，並將圖表當作視覺確認；不要假設僅憑曲線圖就能告訴你某個特定時刻移動元素會在哪裡。
Run 預覽：900 毫秒的健全性檢查
點擊 Run 會使用 900 毫秒的 transform 過渡以及精準產生的緩動字串，讓一個圓形在兩個水平位置之間切換。重複點擊可以讓你同時觀察正向與反向的動態。這個預覽展示的是時間感，而非實際執行效能，因為真實元件在距離、持續時間、屬性、渲染成本、輸入裝置或周邊動態改變時，感覺可能會有所不同。它也不會替你遵守任何作業系統的減少動效偏好 —— 那個決定屬於消費端的樣式表。使用這個預覽來抓取在某個持續時間下感覺合適、但在另一個持續時間下顯得突兀的曲線，並在複製任一條曲線之前，先將兩條候選曲線並排比較。
當一條有效曲線仍造成問題時
CSS 允許技術上有效但視覺上不討喜的曲線。y 值的大幅 overshoot 可能讓控制項看起來像反方向移動、離開其容器，或顯示原本應該保持裁切的內容。Overshoot 是被允許的，因為 y 座標描述的是輸出進度，而非輸入時間，它們可以低於零（anticipation，預期）也可以高於一（overshoot，過衝）。圖表會裁切到一個穩定的 0 到 1 方框內，讓你可以比較一般的時間曲線；但刻意使用極端的 y 值可以延伸到該框架之外而不被夾住。如果 overshoot 很關鍵，請信任數值取樣與實際移動的元素，而非假設圖表邊緣代表一個硬性上限。
有效性不等於可及性。一條快速振盪的曲線可能會讓有前庭敏感的使用者感到暈眩，而 CSS 並不會為你阻止這件事。請在沒有動態的情況下保持重要狀態變化易於理解、偏好使用較短的持續時間，並在動畫非必要時遵守 prefers-reduced-motion。MDN cubic-bezier 參考資料列出了其他瀏覽器導向的範例，以及不同引擎如何繪製這些曲線的說明。
這個工具無法提供給你的東西
這個產生器刻意只專注於單一 cubic-bezier 時間函數，不包含其他內容，因此其輸出保持可預測。它不會產生 keyframes、彈簧物理、linear() 停駐點清單、steps() 時間函數、持續時間、延遲、迭代次數，也不會產生完整的 transition 簡寫。如果你的設計需要階梯式或彈簧式的動態，你將需要使用其他工具或手寫 CSS。將這個產生器視為單一用途的緩動設計工具，而非完整的 transition 產生器，這正是讓每一條宣告都能被閱讀、稽核並在沒有隱藏預設值的情況下進行推理的原因。
若要深入了解，請參閱 Does the Generated CSS Toggle Switch Code Save a Setting?。