CSS 貝茲緩動曲線編輯器

調整兩個控制點、播放過渡效果，並產生 cubic-bezier 緩動函式。

X 限於 0–1，Y 可超出以產生回彈。支援拖曳與方向鍵，Shift 可加大步幅。

預設

ease ease-in ease-out ease-in-out linear

X1 Y1 X2 Y2

動畫時間 · ms

CSS

內容僅在此瀏覽器處理，不會上傳或儲存。

工具介紹

細調介面過渡的加速、減速或回彈感，對照曲線與實際移動。

設計工具

選擇常用緩動預設，拖曳控制點或直接輸入 X1、Y1、X2、Y2。控制點也支援方向鍵，按住 Shift 可加大步長。設定預覽時間後手動播放，可隨時停止，再複製或下載 CSS。

X 座標限 0–1，Y 限 −2–3，可設計回彈或超出終點的效果。匯出只包含緩動宣告，不包含預覽時間或完整動畫。系統啟用減少動態效果時不播放移動動畫，數值編輯與匯出仍可使用。

只匯出 transition-timing-function；時長與動畫屬性要在樣式表設定。控制點 x 限 0–1，y 可設為 −2–3。

系統啟用「減少動態效果」時，工具會尊重此偏好，不播放移動動畫；數值編輯與匯出仍可使用。否則請確認預覽時長介於 100–5,000 毫秒。這個時長只控制預覽，不會寫入匯出的程式碼。