透過控制點自訂 CSS 緩動曲線
在 CSS 過渡（CSS transitions）與動畫（CSS animations）的設計中，時間軸上的速度變化決定了動態效果的質感。CSS 緩動曲線產生器提供了一個直觀的視覺化介面，讓開發者透過拖曳兩個控制點把手，即時調整並輸出對應的 cubic-bezier() 數值。
在動畫進行時，預覽區域會顯示兩個並排運動的小球：一個依照你設計的「你的曲線」移動，另一個則以等速運動作為對照，幫助你精確評估動畫的節奏與動態表現。
緩動曲線的數學原理與控制點規則
CSS 的 cubic-bezier(x1, y1, x2, y2) 函數由四個參數組成，代表兩個控制點在二維座標系中的位置。這條曲線的起點固定於左下角（代表動畫開始），終點固定於右上角（代表動畫結束）。
在座標系統中，橫軸代表時間的流逝（由左至右），縱軸則代表動畫的進度（由下至上）。控制點的設定必須遵循以下規則：
- 時間軸限制（X 軸）：第一個控制點與第二個控制點的 X 軸數值（x1, x2）必須嚴格限制在
0至1之間。這意味著時間不能倒流，動畫必須持續向前推進。 - 進度軸彈性（Y 軸）：控制點的 Y 軸數值（y1, y2）限制在
-0.70至1.70之間。Y 軸數值可以超出0（低於下緣）或超出1（高於上緣），這種設計可用於實現蓄力往回拉（pull-back）或動態衝過頭（overshoot）的物理效果。
數值輸入與鍵盤微調機制
本工具支援手動輸入數值與鍵盤微調，並設有自動校正與保護機制，以確保輸出的 CSS 語法永遠有效：
- 超出範圍自動校正：若在「第一個控制點」或「第二個控制點」的 X 軸輸入框中輸入超出範圍的數值（例如輸入
9），當輸入框失去焦點時，系統會自動將數值限制並校正為最大允許值1。 - 空值與非數值保護：若清空數值輸入框或輸入非數字字元，系統會處於等待完整數值的狀態。一旦輸入框失去焦點，系統會自動還原上一次有效的數值，避免產生錯誤的 CSS 程式碼。
- 鍵盤微調：當選取並聚焦於控制點把手時，按下鍵盤的向左方向鍵，可以微調數值，例如將數值精確調整至
0.99。
預設緩動曲線與特殊動態效果
除了手動拖曳，你也可以直接選擇內建的預設效果，快速載入常見的 CSS 關鍵字數值或進階動態曲線：
- 標準關鍵字：包括
ease、ease-in、ease-out與ease-in-out，點選後可直接檢視這些關鍵字背後的具體cubic-bezier()數值。 - 回拉與衝過頭效果：預設選單提供「回拉進入」、「回拉退出」及「回拉進出」等進階曲線。例如，選擇「回拉退出」預設會將數值設定為
cubic-bezier(0.34, 1.56, 0.64, 1)，其 Y2 值為1.56，能讓動畫在接近終點時產生優雅的衝過頭並回彈的效果。
當你調整出滿意的曲線後，可以直接複製產生的 cubic-bezier() 程式碼。複製成功後，介面會顯示「Copied」狀態。
瀏覽器本地處理與隱私保護
本工具完全在客戶端運行。曲線都在你的瀏覽器裏繪製，這裡設定的內容不會上傳到 BroBroGo。所有數值計算與動畫預覽均在本地瀏覽器即時完成。
常見問題
兩個把手和四個數字是甚麼意思？
曲線從左下角（開始）走到右上角（結束）：橫軸是時間，由左到右；縱軸是進度，由下往上。兩個把手就是讓曲線彎曲的控制點，每個把手有一個 X 和一個 Y，合起來就是 cubic-bezier(x1, y1, x2, y2)。X 始終在 0 到 1 之間，而 Y 可以超出上緣或低於下緣，讓動畫在停下前先衝過頭，或先往回拉一下。
產生的值如何用到 CSS 裏？
把 cubic-bezier() 複製走，填到任何需要緩動函式的地方——transition-timing-function、animation-timing-function，或者簡寫，例如 transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)。ease、ease-in、ease-out、ease-in-out 這些關鍵字其實就是固定的 cubic-bezier 曲線，點按對應的預設就能看到關鍵字背後的具體數值。
能做出彈跳（bounce）或彈性（elastic）效果嗎？
單靠它做不到。一條 cubic-bezier 可以先蓄力、再衝過頭——“back”預設就是把一個把手拉出方框來實現的——但它只能朝一個方向走完再停下。彈跳和彈性會來回反轉好幾次，任何單條 cubic-bezier 都表達不了，那需要 CSS keyframes，或帶許多分段的 linear() 函式。