Dev Tools
純前端檔案不上傳

cubic-bezier 視覺化編輯器

拖曳兩個控制點即時設計 CSS easing 曲線,內建 11 個 preset(ease / Material / Tailwind / anticipate 等),預覽動畫,一鍵輸出 CSS / Tailwind v4 / Framer Motion 程式碼。

曲線(拖控制點)
(0,0)(1,1)
控制點數值
動畫時長
Preset
動畫預覽
輸出格式
css
cubic-bezier(0.25, 0.1, 0.25, 1)
›如何使用
  1. 左邊 SVG 曲線 拖曳兩個彩色圓圈控制點,即時看曲線變化。x 軸會自動 clamp 到 0-1(CSS 規範),y 軸可超出做 anticipate / overshoot。
  2. 右邊 數值欄 可直接輸入精確數字,或上方的 動畫時長 切換 300/600/1000 ms 預覽。
  3. 下方 Preset 點任一個套用(ease / Material / Tailwind 各家典型)。
  4. 底部 動畫預覽 即時跑你目前的曲線;下面 輸出 切 tab 看 CSS / Tailwind v4 / Framer Motion / @keyframes 四種片段,點右上 Copy。
Tips
  • 狀態同步到 URL hash — 例如 #0.25,0.1,0.25,1,複製網址直接分享曲線。
  • 想做回彈(overshoot)?把 y1 設負數、y2 大於 1。anticipate preset 就是這樣做的。
  • Tailwind v4 起支援 ease-[cubic-bezier(...)] 任意 class,不用再寫 tailwind.config。
  • Framer Motion 的 ease: [...] 直接餵 4 個數字陣列,順序與 CSS 一樣。

相關工具