Cubic-Bézier 緩動編輯器

透過可拖曳的編輯器與即時動畫預覽，設計自訂的 cubic-bezier 緩動曲線。

曲線編輯器

拖曳兩個控制點以塑造緩動曲線。

動畫預覽

緩動

線性

填充

持續時間 1.2s

與線性比較

控制點

控制點 1

控制點 2

預設

數值

cubic-bezier(0, 0, 1, 1)

CSS 輸出

transition-timing-function: —;
animation-timing-function: —;

所有處理都在你的瀏覽器中執行 — 不會上傳任何內容。

關於 Cubic-Bézier 緩動編輯器

三次貝茲緩動編輯器可為 CSS 轉場與動畫設計自訂的時間函式。拖曳曲線畫布上的兩個控制控點,cubic-bezier(x1, y1, x2, y2) 數值會即時更新;動畫預覽會將此緩動效果與線性參考並列播放,讓你能感受差異,並可調整持續時間、即時重播。

十種預設值涵蓋了常見的詞彙——標準的 ease、ease-in、ease-out 與 ease-in-out,加上像 back 與 anticipate 這類會超出端點的表現性曲線,以及 material 風格的加速與減速曲線。可直接使用它們,或以此為起點拖曳出屬於你自己的效果。

你也可以輸入精確的控制點座標、按下隨機按鈕獲得靈感,並複製純粹的 cubic-bezier() 數值或可直接貼上使用的 CSS 規則。整個編輯器都在你的瀏覽器中運作。

它們是兩個控制點的座標:x1、y1、x2、y2。x 軸代表時間(0 到 1),y 軸代表動畫進度。點被拉得偏高會讓動作一開始就變快;拉得偏低,則一開始較慢。

y 值可以。y 值大於 1 會讓動畫超出目標後再回彈——「back」與「anticipate」預設值正是如此。x 值則必須維持在 0 到 1 之間,因為時間不能倒流。

在任何 CSS 的 transition-timing-function 或 animation-timing-function 中,以及 Web Animations API 的 easing 選項中。它可以取代 ease-in-out 這類關鍵字,改用專為你的介面調校的曲線。

對於進入畫面或回應輸入的元素,使用 ease-out(開始快、結束緩)會感覺更即時。對於離開畫面的元素,使用 ease-in。兩端都可見的移動則適合用 ease-in-out。

是的,免費且無需帳號,並完全在你的瀏覽器中運作——你設計的任何內容都不會被上傳。