📈

免費CSS 三次貝塞爾緩動產生器

透過拖曳控制點設計 CSS 緩動曲線，即時預覽動畫效果，複製 cubic-bezier() 值。包含過沖/彈跳預設。

在瀏覽器中執行無需註冊，無彈出式視窗無需登入永久免費

載入後可離線使用

拖曳青色和玫紅色控制點來調整曲線形狀

控制點

x1y1x2y2

動效預覽

持續時間1.6s

寬度過渡

CSS 值

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

預設

玫紅和青色控制點可拉出方框上方或下方（Y 超出 0-1 範圍），以實現 back-out、anticipate 等"超調"/彈跳效果。X 保持在 0-1 範圍內（時間不可逆）。

工作原理

此編輯器完全在瀏覽器中使用 React 狀態和 SVG 建立——曲線計算不依賴任何庫。兩個可拖曳的控制點定義一條 SVG 三次貝塞爾路徑，瀏覽器自身的 CSS 動畫引擎透過將產生的 cubic-bezier() 值直接注入 @keyframes 規則來執行動效預覽。

1
拖曳或輸入控制點
兩個控制柄（青色的 P1 和玫紅色的 P2）位於 SVG 畫布上。拖曳使用 Pointer Events API 和 setPointerCapture，因此即使超出 SVG 邊界，控制柄也會跟隨你的手指或游標。你也可以用方向鍵微調控制柄，或在 x1/y1/x2/y2 數字輸入方塊中輸入精確值。
2
SVG 即時繪製曲線
曲線是一個 SVG <path> 元素，其 C（三次貝塞爾）命令在每次狀態更新時根據四個控制點座標重新計算。沒有 canvas、沒有外部庫——由瀏覽器的 SVG 渲染器直接繪製路徑。
3
瀏覽器 CSS 引擎預覽緩動
三個即時動畫（滑動的圓點、寬度過渡和縮放）執行內聯注入了 cubic-bezier() 值的 CSS @keyframes。由瀏覽器自身的動畫引擎解釋曲線，因此你看到的正是生產環境 CSS 會產生的效果。
4
按你所用框架的語法複製程式碼片段
標籤頁將同樣的四個數字格式化為 CSS transition-timing-function、Tailwind 任意值類、Framer Motion 緩動陣列或 anime.js 緩動字串。程式碼片段透過 navigator.clipboard 寫入剪貼簿。曲線還會編碼在網址雜湊中（#b=x1,y1,x2,y2），方便分享或收藏。