CSS 緩動曲線產生器
貝茲曲線編輯器
動畫預覽
常用緩動效果
線上免費產生 CSS 緩動曲線。拖曳控制點建立 cubic-bezier 曲線，內建常用預設與即時動畫預覽。100% 在本機執行，保護隱私。
CSS 緩動函數指南
選擇緩動函數
從預設緩動函數中選擇，如 ease-in、ease-out，或創建自定義 cubic-bezier。
調整參數
通過調整控制點微調緩動曲線。
複製 CSS
複製生成的 CSS 代碼用於你的項目。
使用技巧
拖曳控制點
直接在曲線上拖曳兩個控制點（P1、P2），即時調整緩動曲線。X 軸代表時間進度，Y 軸代表屬性變化，曲線斜率決定動畫的速度變化。
動畫即時預覽
點擊「播放動畫」即可查看小球沿緩動函數軌跡移動的效果。進度條直觀顯示時間進度。
一鍵複製 CSS
調整完成後，點擊「複製」按鈕即可自動將 CSS cubic-bezier() 程式碼複製到剪貼簿，直接貼上到專案中使用。
常見使用場景
入場動畫
ease-out
退場動畫
ease-in
過渡動畫
ease-in-out
懸停效果
自訂曲線
進度指示器
linear
常見問題
什麼是 cubic-bezier？
cubic-bezier 是一個 CSS 函數，用於定義動畫的速度曲線，透過兩個控制點 P1 (x1, y1) 和 P2 (x2, y2) 來描述一條三次貝茲曲線。曲線的 X 軸代表時間進度（0→1），Y 軸代表屬性變化（0→1）。曲線越陡表示速度越快，曲線越平緩表示速度越慢。
如何在 CSS 中使用自訂緩動？
直接在 CSS 的 transition 或 animation 屬性中使用：transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);。產生器的程式碼輸出區域會自動產生正確的 CSS 程式碼，點擊複製即可直接貼上使用。
X 和 Y 的有效範圍是什麼？
CSS cubic-bezier() 要求 X 值在 0 到 1 之間（對應時間從開始到結束），Y 值通常在 0 到 1 之間，但可以超出此範圍（產生彈跳效果）。本工具將 X 限制在 [0, 1]、Y 限制在 [0, 1] 以確保產生的曲線是有效的 CSS 緩動函數。
預設緩動之間有什麼區別？
ease：先快後慢再快，適合一般過渡效果。
ease-in：慢到快，適合退場動畫（元素離開）。
ease-out：快到慢，適合入場動畫（元素進入），最常用的緩動。
ease-in-out：兩端慢中間快，比 ease 更平滑。
linear：等速，適合顏色變化、旋轉等無需加速的動畫。