緩動曲線與 CSS 動畫的運作原理
在 CSS 轉場（transitions）與動畫（animations）中，時間與進度的關係並非只能是單調的等速運動。透過 transition-timing-function 或 animation-timing-function 屬性，開發者可以指定動畫在執行過程中的速度變化，而這項技術的核心即是三次貝茲曲線（Cubic Bezier Curve）。
一條三次貝茲曲線由四個點定義：起點、終點，以及兩個控制點。在 CSS 的應用中，起點固定在左下角 (0, 0)，代表動畫的起點與開始時間；終點固定在右上角 (1, 1)，代表動畫的終點與結束時間。時間軸從左至右推進，動畫進度則由下往上發展。
透過調整兩個控制點的座標 (x1, y1) 與 (x2, y2)，即可改變曲線的弧度，進而控制動畫在不同時間點的推進速度。這四個數值最終會組合成 CSS 的 cubic-bezier(x1, y1, x2, y2) 函式。
控制點數值規則與邊界限制
調整控制點時，數值必須遵守 CSS 規範的特定物理限制：
- 橫軸（X 軸）限制：代表時間進程，數值必須介於
0與1之間。在輸入欄位中，若輸入超出此範圍的數值（例如輸入9）並使輸入框失去焦點，系統會自動將數值限制並還原為最大值1。 - 縱軸（Y 軸）限制：代表動畫進度，其數值限制在
-0.70至1.70之間。Y 軸數值允許低於0（低於下緣）或高於1（超出上緣），這能產生動畫在開始前先往回拉（pull-back），或在結束前衝過頭（overshoot）的物理動態效果。
在操作介面時，若清除數值輸入框並使其失去焦點，系統會自動回復至上一次有效的數值。此外，當控制點把手處於聚焦狀態時，按下鍵盤的向左鍵，數值會微調改變，例如變更為 0.99。若輸入空值或非數字，系統則會保持等待狀態，直到輸入完整數值為止。
預設曲線與數值對照
本工具提供多種常見的預設曲線，幫助開發者快速起步，並理解常見 CSS 關鍵字背後的具體數值：
| 預設名稱 | 對應之 cubic-bezier() 數值 |
物理動態特徵 |
|---|---|---|
| ease | 預設緩動，開始時緩慢，隨後加速，最後緩慢結束。 | |
| ease-in | 漸強效果，由慢轉快。 | |
| ease-out | 漸弱效果，由快轉慢。 | |
| ease-in-out | 漸強漸弱，兩頭慢、中間快。 | |
| 回拉進入 | - | 回拉進入，起動時先向後微調再向前衝。 |
| 回拉退出 | cubic-bezier(0.34, 1.56, 0.64, 1) |
回拉退出，結束時先衝過頭再回彈至終點。 |
| 回拉進出 | - | 回拉進出，起點與終點皆有超出邊界的物理回彈。 |
曲線設計的物理局限性
雖然 cubic-bezier() 能創造出豐富的動態，但單一條三次貝茲曲線在物理表現上有其極限。
由於曲線只能由左下角持續向右延伸至右上角，它只能表達「單向發展、中途改變速度、最後穩定停下」的過程。這意味著，它無法在單一函式內實現多次反轉方向的複雜效果，例如物體落地時連續反彈數次的彈跳（bounce）效果，或是來回擺盪多次的彈性（elastic）效果。若要實現此類多階段的動態，必須改用 CSS @keyframes 分段撰寫，或使用包含多個線段的 linear() 函式。
隱私與資料處理說明
本工具完全在您的本機瀏覽器中進行即時運算與繪圖。曲線都在你的瀏覽器裡繪製,這裡設定的內容不會上傳到 BroBroGo。