CSS 緩動曲線預覽器

用圖表與預覽比較自訂曲線的動畫節奏。

互動處理需要啟用 JavaScript。以下使用方式、限制與常見問題可直接閱讀;檔案只在你的瀏覽器處理。

CSS 緩動曲線預覽器使用指南

調整 CSS cubic-bezier 控制點,以圖表和線性基準比較動畫節奏。

如何使用

  1. 輸入兩個控制點與時長。
  2. 播放一次或用滑桿靜態比較。
  3. 複製 CSS 曲線並在實際頁面核對。

格式與限制

  • 四個座標均限 0–1,時長限 0.1–5 秒;不支援超越效果或 steps。
  • 結果只用於比較節奏,不保證實際網站的效能或所有屬性的呈現。
  • 運算在本機進行,離開頁面即清空。

輸出內容

可複製的 cubic-bezier CSS 字串。

常見問題

能預覽彈跳超出終點嗎?

不能。此工具的四個控制點座標均限制在 0–1。

檔名與內容只在你的瀏覽器處理,不傳到伺服器。原始檔不覆蓋,離開工具前請先匯出需要的結果。