CSS Easing 產生器
貝茲曲線編輯器
動畫預覽
常用緩動效果
線上 CSS Easing 緩動函數產生器。視覺化拖曳控制點生成 cubic-bezier 曲線，內建 ease / ease-in / ease-out / ease-in-out / linear 預設，即時動畫預覽。純前端處理。
使用技巧
拖曳控制點
直接在曲線上拖曳兩個控制點（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：等速，適合顏色變化、旋轉等無需加速的動畫。