Cubic Bezier 產生器

cubic-bezier() 是由貝茲曲線定義的緩動（時間）函數。在 transition-timing-function 或 animation-timing-function 中寫作 cubic-bezier(x1, y1, x2, y2)，兩個控制點彎曲曲線，使動畫加速和減速，而不是以恆定速度運動。例如，cubic-bezier(0.25, 0.1, 0.25, 1) 與 CSS 關鍵字 'ease' 完全相同。

cubic-bezier(x1, y1, x2, y2) 列出兩個控制點：P1 = (x1, y1) 拉動曲線的起點，P2 = (x2, y2) 拉動終點。曲線本身始終從 (0,0) 開始，在 (1,1) 結束。x 值代表時間，必須保持在 0 到 1 之間；y 值代表進度，可以低於 0 或高於 1 以實現過衝效果。拖曳圖表上的兩個控制桿，四個數字會隨著移動即時更新。

linear 以恆定速度移動，沒有緩動——對大多數 UI 來說看起來不自然。ease——CSS 預設值——開始稍快然後緩出。ease-in 緩慢開始並在末尾加速，通常給人一種物體下落的感覺。ease-out 快速開始然後減速，這對出現在螢幕上的元素來說通常感覺最自然。ease-in-out 兩端緩慢，中間最快，適合穿越螢幕並需要平滑停止的元素。

y 值可以，這就是獲得過衝和預備動作效果的方式。x（時間）值始終限制在 0–1，但 y 高於 1 會使元素超過目標後彈回——像彈簧一樣——而 y 低於 0 會使其先向後收縮。一個經典例子是 easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1)。這個編輯器允許你將控制桿拖出 0–1 框來建立這些效果。

將其放入時間函數插槽中。對於過渡：transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);。對於關鍵影格動畫：animation: slide 600ms cubic-bezier(0.33, 1, 0.68, 1) both;。此工具的 CSS 索引標籤使用你目前的曲線和持續時間自動產生兩個程式碼片段，可以直接複製貼上到樣式表中。

從預設目錄載入——Penner / easings.net 曲線都有標準的 cubic-bezier 近似值。例如 easeInOutQuad = cubic-bezier(0.45, 0, 0.55, 1)，easeOutCubic = cubic-bezier(0.33, 1, 0.68, 1)，easeInOutCubic = cubic-bezier(0.65, 0, 0.35, 1)。從圖庫選擇命名曲線，直接將值複製到 CSS 中。

完全免費，無需註冊，沒有任何內容被上傳到任何地方。曲線編輯器、即時預覽以及 CSS、GSAP 和 JavaScript 匯出都在瀏覽器本機執行。你建立的內容不會傳送到伺服器，因此你的工作完全留在你的裝置上。你還可以透過在 URL 中編碼四個值的連結來分享曲線——無需帳號。