CSS 動態曲線編輯器

拖曳控制點調整 CSS cubic-bezier() 曲線，和等速動態比較，再複製 transition CSS。所有編輯都在瀏覽器完成。

塑造動態曲線

ease

拖曳 1、2 控點，或以方向鍵微調 0.01；Shift + 方向鍵調整 0.1。虛線為等速參考。

控制點 1

x1 時間y1 進度

控制點 2

x2 時間y2 進度

x：0–1。y：−10–10（本工具範圍）；超出 0–1 可形成過衝。所有輸入留在瀏覽器。

600 ms

相同距離與時間，比較你的曲線和等速移動。

你的曲線

linear

播放時間

預覽不會自動播放。

曲線值

cubic-bezier(0.25, 0.1, 0.25, 1)

搭配目前播放時間的 CSS

transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);

預覽使用瀏覽器原生動態。請在實際元件中檢查距離、觸發方式與減少動態設定。

選擇預設，拖曳控制點或輸入座標，再播放一次比較動態。複製曲線值或 transition CSS，回到實際元件測試。

本工具編輯單一 cubic Bézier 曲線，不處理 keyframes、steps()、linear() 點列或彈簧物理。動態預覽不能證明整個介面符合無障礙要求。