一個有效的 CSS cubic-bezier() 緩動函數由四個數字定義 —— x1、y1、x2、y2 —— 而你在產生曲線之前需要做的關鍵比較，是把你打算繪製的時間曲線，跟你的動畫實際需要的時間曲線進行對比。兩個 x 座標描述的是每個控制點的影響力何時沿著已耗用的輸入時間開始生效，而 CSS 要求兩者都必須維持在封閉的 0–1 區間內。兩個 y 座標描述的是在那兩個時刻，動畫值已經前進了多少，並且可以低於零或高於一，這會產生預期外的前置動作或過衝效果。因為 x 被鎖定在輸入時間範圍內，而 y 則可以離開輸出進度範圍，所以分別比較每一對是唯一能預測曲線會加速、減速、預期前置或過衝的方法，而不會發生意外。CSS Cubic Bezier 產生器會顯示全部四個數字、參數曲線圖、五個輸入分率的取樣進度，以及一段 900 毫秒的動態預覽，讓你在把宣告套用到真實元件之前，可以比較數學算出的結果與肉眼看到的結果。
決定曲線是否合適的三個比較
大多數緩動問題都可以追溯到三個在撰寫過程中從未進行過的比較。第一個是曲線的設計意圖與標準 CSS 關鍵字之間的比較。linear、ease、ease-in、ease-out 和 ease-in-out 並不是什麼神奇玩意 —— 它們每一個都是一個具有固定控制點的 cubic-bezier()，而產生器會把這些對應關係以參考資料的形式顯示出來，讓你能看出你的自訂曲線是否與瀏覽器已經理解的那組預設有明顯差異。第二個比較是參數曲線圖的形狀與數值取樣表之間的比較。一條在右側邊緣視覺上看起來很陡峭的曲線，在經過 25% 的已耗用時間時，仍然可能只產生不大的輸出值，所以只看圖表判斷會對動畫中段的進度做出錯誤的假設。第三個比較是動畫預期的手感(俐落、平靜、如彈簧、裝飾性)與過衝的實際風險之間的比較 —— y 值大於一會讓元素明顯地越過它的靜止位置，這對於排版容器、被裁切的內容以及無障礙性都可能造成影響。
在你鎖定這四個數字之前先進行這些比較，可以避免最常見的失敗模式:寫出一條在紙上看起來很漂亮、但在介面中感覺不對的曲線，因為在 0.5 輸入時間時的取樣輸出，並不是曲線參數 t 等於 0.5 時所對應的值。瀏覽器並不是沿著曲線參數走動畫，而是沿著 x 軸走輸入進度，再去查找對應的 y 值。
標準關鍵字曲線與自訂控制點的比較
W3C CSS Easing Functions Level 1 規格定義了五個關鍵字緩動，每一個都是一個具有固定控制點的 cubic-bezier()。在產生器中選擇其中一個關鍵字並不會直接輸出該關鍵字本身，而是會載入同樣的數值曲線，讓宣告保持可審核的狀態。下方表格列出每一個關鍵字及其標準化對應，這就是你在決定是否值得為了額外的精確度而採用自訂曲線之前，應該拿來當作基準比較的對象。
| CSS 關鍵字 | 標準 cubic-bezier() 形式 | 手感 |
|---|---|---|
| linear | cubic-bezier(0, 0, 1, 1) | 等速、機械式 |
| ease | cubic-bezier(0.25, 0.1, 0.25, 1) | 預設、溫和的加速與減速 |
| ease-in | cubic-bezier(0.42, 0, 1, 1) | 開始慢、結束快 |
| ease-out | cubic-bezier(0, 0, 0.58, 1) | 開始快、結束慢 |
| ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) | 兩端慢、中段快 |
資料來源:W3C CSS Easing Functions Level 1。這些對應關係在產生器中是以經過測試的參考資料形式保存，而非憑記憶接受，所以能與規格保持一致。
如果你的自訂曲線在 0.25、0.5 和 0.75 輸入進度時所產生的取樣值，與表格中某一列相近，那麼使用該關鍵字就能以較少的程式碼達成相同效果，而且任何審閱你 CSS 的人也都能更廣泛地辨識它。如果取樣值出現明顯分歧 —— 例如中段更俐落的吸附感，或末端可見的過衝 —— 那麼使用自訂曲線就是合理的。
把曲線與數值取樣表交叉比對
取樣表能回答一個單看曲線圖無法回答的問題:在五個標準輸入分率(0、0.25、0.5、0.75、1)的每一個位置上，動畫值實際上前進了多少?求解器會找出 x 座標等於所要求輸入的曲線參數，然後在該點計算 y 值。它會先執行有界牛頓迭代，當牛頓法無法收斂時再以二分法收尾，這在 x 控制點使得 0.5 的輸入進度對應到一個不等於 0.5 的曲線參數時，非常重要。
這就是當曲線在圖表中看起來很平衡、但在預覽中卻感覺失衡時，你應該進行的比較。以 ease-out 來說，0.25 輸入的取樣值大約落在 0.38 的進度，而不是 0.25 —— 曲線在第一個四分之一的時間內就已經走完了大部分距離。以 ease-in-out 來說，0.5 輸入的取樣值大約是 0.5 的進度，但 0.25 和 0.75 的取樣值則明顯偏離 0.25 與 0.75，因為曲線在兩端都保持平緩。閱讀取樣表，是最便宜的方式來確認你即將複製的曲線，會產生你所想要的時間節奏。
三個步驟產生並驗證 Cubic Bezier
- 選擇起點。載入五個標準關鍵字之一以查看基準曲線，或者如果你心中已經有目標，也可以直接輸入 x1、y1、x2、y2。產生器會把 x 輸入限制在 0–1 區間內，並接受 −10 到 10 之間的有限 y 值，在產生輸出之前，計算過程會獨立驗證這些範圍。
- 檢視同一條曲線的四種視圖。比較參數曲線圖、五列的取樣表、四捨五入後的 transition-timing-function 宣告，以及 Run 預覽動畫。如果圖表、取樣表和移動的圓圈三者一致，就代表這條曲線內部是自洽的。如果它們不一致，就要懷疑心智模型有誤:圖表永遠繪製的是曲線參數，取樣表繪製的是已耗用的輸入進度，而預覽顯示的是實際的緩動值。
- 複製宣告並在實際情境中測試。Copy CSS 會寫出完整的 transition-timing-function 一行，包含結尾的分號。如果瀏覽器拒絕剪貼簿存取，該宣告仍然可以在畫面上選取，而且狀態不會顯示成功。把它貼進你的真實元件中，使用你預計要動畫化的實際屬性、距離和持續時間，然後反覆點擊 Run 以比較正向與反向的動態。
數字只有在序列化到複製緩衝區時才會四捨五入到小數點後三位;底層的計算保留了完整的 JavaScript 數值精度，因此兩條在宣告中看起來相同的曲線，只要其未四捨五入的值不同，在取樣表中仍然可能出現差異。
產生器刻意不會產生的項目
這個工具專注於單一的 cubic-bezier() 時間函數，讓輸出保持可預測且易於審核。它不會產生關鍵影格、彈簧物理、linear() 停止點清單、steps()、持續時間、延遲、重複次數，或完整的 transition 縮寫。你仍然要自己選擇要動畫化的屬性、移動多遠、花多少時間，以及在 prefers-reduced-motion 下的行為。
所有計算都在瀏覽器中進行，不會上傳、儲存或傳送任何曲線、CSS 或互動資料到任何動畫服務。這樣的區隔很重要，原因有二。第一，它代表你看到的預覽就是你複製的曲線 —— 不會有遠端的最佳化工具悄悄地把你的數值平滑掉。第二，它代表這個工具可以提供高達 y = 10 的過衝，而不必擔心後端會誤判極端值，因為所有東西都不會離開你的機器。
在真實的屬性、距離與持續時間上測試宣告
900 毫秒的 Run 預覽展示的是時間節奏，而不是正式版的效能表現。當距離、持續時間、屬性、渲染成本、輸入裝置或周圍的動態改變時，真實元件的手感可能會有所不同。一條為 600 毫秒內 300 像素的變形而調整的 cubic-bezier，在 30 像素的變化上可能會感覺遲鈍，在 1200 毫秒的變化上則可能顯得急躁。請務必在最終的介面中使用你要動畫化的屬性之實際繪製成本來測試該宣告。
在這個階段還應該進行兩個額外的比較。第一個是動態與無障礙性的比較:大幅度的過衝可能會讓控制項看起來像是反方向移動、離開它的容器，或是暴露出原本預期保持裁切的內容。一條合法的曲線並不自動代表它是無障礙的、高效的或合適的。請確保重要的狀態變更在沒有動態的情況下也能被理解，避免快速的振盪，並在元素正在過渡時檢查焦點與指標行為。第二個比較是與減少動態偏好的比較 —— 如果動畫是裝飾性質的，請把它放在一個尊重使用者減少動態請求的媒體查詢之後。關於每個 cubic-bezier 關鍵字的瀏覽器行為與範例，請參考 MDN 的 cubic-bezier() 參考文件。
若要在產生曲線之前對不同的撰寫方法進行結構化的比較，比較指南會逐一介紹預設關鍵字、手動調整數值，以及複製社群曲線這幾種做法之間的權衡取捨。
若想進一步了解，請參考 在 CSS 切換開關之前，初學者應該知道的事。