cubic-bezier.com

拖曳控制點調整緩動曲線,對照動畫預覽,再讀取 cubic-bezier() 數值用於 CSS 動態。

前往 cubic-bezier.com 官方網站

cubic-bezier.com 是什麼?

cubic-bezier.com 是 Lea Verou 製作的 CSS 緩動曲線工具。拖動圖上的控制點時,曲線與頁面顯示的 cubic-bezier() 數值會跟著更新。

旁邊的預覽區可以把目前曲線與曲線庫中的另一條曲線放在一起比較。本次實測了控制點編輯、選取比較曲線與播放預覽。

為何收錄

只看緩動名稱,不容易想像動畫在哪一段加速或放慢。讓兩個方塊以相同時長移動,再對照曲線,比單看數值更方便討論動態節奏。

適合的工作

適合調整介面轉場的前端工程師,以及需要和工程端討論緩動效果的設計師。它協助挑選曲線,不是完整的動畫時間軸編輯器。

可以怎麼用

本次把第一個控制點從初始位置拖開,畫面輸出由 cubic-bezier(.17,.67,.83,.67) 變成 cubic-bezier(.3,.29,.83,.67),圖上的曲線也跟著改變。

接著選取 ease-in-out 作為比較曲線,按下 Go!;兩個預覽方塊使用各自的曲線移動。可以先比較,再讀取畫面上的 CSS 值帶回專案調整。

使用前留意

本次已核對畫面上的 CSS 值,但未能確認剪貼簿複製結果,不能把 Copy 按鈕視為已驗證功能。也未測試曲線庫匯入匯出、手機觸控或實際專案整合;預覽效果仍需在自己的元件與動畫時長下重新檢查。

Easing Wizard

調整緩動曲線的控制值,查看移動預覽,再複製對應的 CSS 函式。

  • easing
  • css
  • animation

動態

Easing Editor

Anime.js 的彈簧緩動編輯器,可預覽動態並匯出 CSS 或 JavaScript 值。

  • animation
  • easing
  • css

網頁工具

Animista

預覽 CSS 動畫,調整時間與緩動設定,再取得對應的 class 與 keyframes。

  • css
  • animation
  • generator

動態