Design Drifter
所有工具
Cubic Bezier 緩動編輯器
以視覺化方式編輯 CSS cubic-bezier 緩動曲線。
設計cubic-bezier(0.25, 0.1, 0.25, 1)檔案只在瀏覽器內處理，不會上傳。
關於
Design Drifter 路線圖中的實用瀏覽器工具，專注完成一項圖片、檔案、設計、開發或 SEO 工作；可以在本機處理的內容都會留在瀏覽器內。
透過可拖曳控制點、數字輸入與即時動畫預覽，視覺化調整 CSS 轉場曲線。
你可以做什麼
- 可拖曳兩個 cubic-bezier 控制點。
- 將 x 值限制在 0 到 1，確保符合常見 CSS timing function。
- 複製可直接使用的 cubic-bezier 宣告。
常見用途
- 設計按鈕 hover 轉場。
- 製作動態原型時比較不同緩動。
- 為載入或進場動畫尋找合適曲線。
常見問題
x1、y1、x2、y2 代表什麼？
它們是塑造 cubic Bezier 緩動曲線的兩個控制點；x 值通常會保持在 0 到 1。
y 值可以超過 0 到 1 嗎？
CSS 允許 y 值做 overshoot，但這個簡易編輯器先將四個值限制在容易理解的 0 到 1 範圍。