CSS Cubic Bezier 產生器每次調整或載入曲線時都會回傳四項產出：一段可直接複製的 `cubic-bezier(x1, y1, x2, y2)` 宣告、在 0 到 1 座標框中繪製的參數曲線、五個數值進度取樣，以及一段 900 毫秒的動態預覽，這些產出全都會在你的瀏覽器中於本地即時重新運算。你編輯或從預設載入的四個數字，控制曲線如何在固定起點 (0, 0) 與固定終點 (1, 1) 之間彎曲；工具會立即把這些數字轉成上述四項產出，因此你帶進樣式表的那段宣告，以及用來確認其行為的三項診斷產出，是同步產生的。你的曲線、CSS 或互動內容都不會被上傳、儲存或傳送至任何動畫服務，也就是說你可以自由實驗而不會留下任何痕跡。宣告是你唯一會貼進真實 CSS 的產出；圖表、取樣與預覽的存在，只是為了讓你確認即將貼上的內容，在你實際要製作的持續時間與屬性下，表現是否符合預期。由於 x 座標代表的是經過的輸入時間，產生器會將 x1 與 x2 限制在閉區間 0 到 1 之間，並接受 -10 到 10 之間的有限 y 值，這樣既保留了 CSS 對輸入時間的合法性規則，又讓你能把輸出推向預期之外或過衝的效果。
你要複製的 CSS 宣告
主要產出就是 timing-function 字串本身，格式為 `cubic-bezier(x1, y1, x2, y2);`，結尾帶有分號，這樣就能直接放進樣式表而不必再編輯。數字只有在序列化顯示時才會四捨五入到小數三位；內部運算則保留完整的 JavaScript 數值精度，這代表你看到的數值就是瀏覽器會收到的數值。即使你從像 `ease`、`ease-in`、`ease-out`、`ease-in-out` 這類 CSS 關鍵字開始，可見的宣告仍會展開全部四個數字，這些數字來自 CSS Easing Functions Level 1 中所定義的標準化 cubic-bezier 對應，而不是重新輸出那個關鍵字。這個選擇讓宣告可以被記錄、比較與編輯，而不會有隱藏的預設藏在工具自己的簡寫裡；`linear` 則對應到字面上的座標 0、0、1、1，因此能與關鍵字按鈕保持一致。
這個輸出是設計給 `transition-timing-function` 或 `animation-timing-function` 使用的。它本身並非完整的 transition 簡寫，所以你仍須自行挑選要製作的屬性、持續時間、延遲、迭代次數以及任何 reduced-motion 的替代方案。Copy CSS 按鈕會寫入包含分號的完整宣告；若你的瀏覽器拒絕存取剪貼簿，那段字串仍然可見且可選取，讓你仍能手動擷取。
曲線圖與其顯示的內容
正方形圖表繪製的是從固定起點 (0, 0) 到固定終點 (1, 1) 的參數式三次貝茲曲線。由於起點與終點是固定的，那四個可編輯的數字只會移動兩個中間控制點；圖表本身的座標框並不會改變。標準的 easing 關鍵字會完全留在圖表內，因此與對角線（即從左下到右上的對角線）進行視覺比較，就能讓你立即判斷曲線是提早加速、延後減速，或是在任何一點超過線性。
不過，故意設定的極端 y 值可能會讓曲線延伸超出可見的方形範圍。圖表刻意維持穩定的 0 到 1 座標框，好讓一般的時間曲線能夠乾淨地比較，也就是說當曲線過衝時並不會被裁切；實際計算出的 easing 仍然會驅動取樣表與動態預覽。若過衝對你的設計很重要，請檢查動態元素與數值取樣，而不是預設「畫面外」的曲線已經被夾在圖表範圍內。圖表是比較用的介面，不是數學上的硬邊界。
數值進度取樣
取樣表回答的是單看控制點圖無法精準回答的問題：在經過特定時間比例時，動畫值已經推進了多少？對於輸入 0、0.25、0.5、0.75 和 1，求解器會找出能產生指定 x 座標的曲線參數，再評估該參數下的 y 值。求解器先使用有界限的牛頓法迭代，必要時再以二分法收尾，這能避免「直接把曲線參數當成已耗用時間」的常見錯誤，即使 x 控制點讓兩者並不相等。獨立的驗證層會在產生輸出前再次檢查 x 與 y 的限制條件，因此你所看到的取樣都已經通過另一層一致性檢查。
這也是為什麼在百分之五十的取樣，並不一定是 t 等於 0.5 時的曲線值。CSS 的時間使用 x 軸上已經過的輸入進度，所以求解器必須先找到 x 座標等於 0.5 的參數，才能評估 y。若你想在相同的實際時間比例下比較兩條曲線，取樣表就是該去看的地方。MDN 的 cubic-bezier 參考資料 從瀏覽器端記載了同一個限制，這也是為什麼用真實元件做預覽是最可靠的最終確認方式。
執行預覽動畫
Run 預覽會使用一段 900 毫秒的 transform 過渡以及你產生的 easing 字串，讓一個圓形在兩個水平位置之間切換。按一下可觀看正向播放；再按一下觀看返回原位，這讓你立即比較兩個方向上 easing 的感受。重複點擊可以讓你來回「刷」過曲線，確認實際感受的時間與圖表及取樣所描述的一致。
這個預覽是刻意受限的。它展示的是時間感，而非真實工作負載下的效能表現；當距離、持續時間、屬性、渲染成本、輸入裝置或周圍的動畫改變時，真正的元件可能感覺不同。請把預覽當作健全性檢查，而非最終測試，並永遠在實際會執行的介面中確認該宣告是否正確，同時在不影響理解動畫之處尊重 reduced-motion 偏好。
三個步驟取得有效的結果
- 在 CSS Cubic Bezier 產生器 中選擇標準的 easing 預設，或輸入 x1、y1、x2、y2 控制座標。五個關鍵字按鈕會載入其 W3C 定義的 cubic-bezier 對應值，而輸入欄位會強制 x 介於 0 到 1 之間，藉此在建構層面確保曲線有效。
- 檢視圖表、數值進度取樣以及 Run 預覽動畫，確認是否符合預期的時間感。檢查曲線形狀是否如你所願、五個數值取樣在每個輸入比例下是否合理，以及兩個方向上的預覽動態是否感覺正確。
- 複製完整的 CSS 宣告，並在真實的屬性、距離與持續時間下測試。把它貼進 `transition-timing-function` 或 `animation-timing-function`，在最終的元件中確認動態效果，並在不影響理解動畫之處尊重 reduced-motion 偏好。
輸出的限制與範圍
產生器只專注於單一的 cubic-bezier 時間函數，這也是它的輸出能保持可預期且易於稽核的原因。它不會產生 keyframes、彈簧物理、linear() 停駐點清單、steps() 時間、持續時間、延遲、迭代次數，也不會輸出完整的 transition 簡寫。那些仍是你在樣式表或動畫流程中要自行決定的項目。如果你需要不同類型的時間函數，cubic-bezier 工具並不是該找的地方。
CSS 同樣允許那些技術上有效、但實務上令人不悅或困惑的曲線。大的過衝可能讓控制項看似倒退回原位、跑出容器之外，或暴露出原本預期會被裁切的內容。一條有效的曲線並不保證就一定易於存取、效能良好或適切，因此請在不靠動畫的情況下讓重要的狀態變化易於理解、避免快速振盪，並在元素正在過渡時檢查焦點與指標行為。若你不確定你設定的特定 y 值是否真的可以離開 0 到 1 的範圍，關於 y1 或 y2 是否能離開 0–1 範圍 的指南會逐步說明確切的 CSS 合法性規則，以及極端 y 值下你應該預期的視覺行為。
在真實程式碼中測試宣告
複製完宣告後，請把它貼進針對你真正想製作的屬性，使用真實的距離與持續時間所寫成的 transition 或 animation 規則。一段 900 毫秒、套用在小幅度 transform 上的預覽是個有用的起點，但同一條曲線套用在 300 毫秒的透明度淡入、較長的 translate 或 height 內插上時，讀起來的感覺可能差很多。當正式環境的時間很重要時，最可靠的方式就是在真實的元件、真實的版面配置、真實的互動下測試這條曲線。若想要從「先驗證」的角度走過一遍如何解讀輸出中的每項產出，輸出正確性指南 從那個角度涵蓋了同樣的四項產出。
| 輸出產出 | 內容 | 使用方式 |
|---|---|---|
| CSS 宣告 | 完整的 `cubic-bezier(x1, y1, x2, y2)` 字串，數字取至小數三位並結尾帶分號 | 貼進 transition-timing-function 或 animation-timing-function |
| 曲線圖 | 在固定的 0 到 1 座標框中，從 (0, 0) 繪製到 (1, 1) 的參數曲線 | 與對角線及標準關鍵字形狀進行視覺比較 |
| 數值取樣 | 輸入 0、0.25、0.5、0.75 與 1 時的五個輸出進度值，使用牛頓法加二分法求解 | 在已知時間比例下稽核精確的時間感 |
| 執行預覽 | 使用你的 easing，在兩個水平位置之間以 900 毫秒 transform 過渡切換的圓形 | 比較正向與反向的動態，並確認實際感受 |