CSS 緩動函數產生器
免費線上 CSS 緩動產生器。在互動曲線上拖曳 cubic-bezier 控制點，內建 18 種預設，小球循環動畫即時對比，一鍵複製 timing function。
CSS 裡的緩動函數是什麼？
緩動函數控制動畫或過渡隨時間推進的快慢節奏。元素不必等速運動，可以慢啟動、加速、衝過頭再回穩。在 CSS 中透過 transition-timing-function 或 animation-timing-function 屬性設定。
cubic-bezier() 裡的四個數字是什麼意思？
cubic-bezier(x1, y1, x2, y2) 用兩個控制點定義一條曲線。第一個控制點決定運動如何開始，第二個決定如何結束。X 表示時間，範圍固定在 0 到 1；Y 表示進度，0 是起始值，1 是結束值。
為什麼 Y 可以超出 0 到 1 而 X 不行？
X 對應真實時間，小於 0 或大於 1 會破壞時間因果，規範禁止。Y 則自由：大於 1 會衝過目標值，小於 0 會先回撤再前進，Back 系列預設的回彈感正是這樣來的。
ease、ease-in、ease-out 有什麼區別？
ease 是瀏覽器預設值，起步輕柔、收尾平滑；ease-in 慢啟動快結束；ease-out 快啟動慢減速；ease-in-out 兩者兼顧。本工具還包含正弦、二次、三次、四次、指數、回彈、Material 等預設，共 18 種。
小球預覽是怎麼運作的？
兩顆小球按你設定的時長循環運動。上方的球始終以 linear（等速）作為參照，下方的球使用你的曲線。兩者間距的拉大與縮小，直觀展示緩動帶來的速度變化。
產生的值應該貼到哪裡？
把它作為 transition-timing-function 或 animation-timing-function 的值使用，例如 transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);。本工具輸出裸的 cubic-bezier(...) 函式，可直接放進任何規則。
緩動函數會影響動畫效能嗎？
緩動函數本身零開銷，它只是重新映射時間與進度的關係。效能取決於你動畫化的屬性：transform 和 opacity 走 GPU 合成很流暢，而 width、top 這類版面屬性無論用什麼緩動都會觸發昂貴的重排。
能做出真正的彈跳或彈性效果嗎？
單條 cubic-bezier 最多衝過一次目標，無法產生真彈跳的多次往復。需要多次回彈時，請在 @keyframes 裡串聯多個關鍵影格，或使用 Web Animations API；而 cubic-bezier 擅長的一次平滑回彈，正是本工具的強項。
我在這裡的操作會被上傳嗎？
不會。曲線繪製在本地 Canvas 上，預覽動畫完全在瀏覽器中執行。任何資料都不會傳送到伺服器，頁面載入後離線也能使用。
如何使用CSS 緩動函數產生器
告別憑感覺填數字，用視覺化方式雕琢 CSS 緩動曲線。拖曳控制點，與線性對照並排比較，一鍵複製成品 cubic-bezier。全部在瀏覽器本地完成。
- 先從 18 種預設中選一個起點，例如緩出、指數緩出或回彈緩出。
- 拖曳曲線上的兩個手柄：X 軸是時間，必須在 0 到 1 之間；Y 軸是進度，允許超出。
- 需要精確值時，直接用數字輸入框微調 P1、P2 座標。
- 調節時長滑桿，觀察兩顆循環滾動的小球——空心球始終等速，實心球使用你的曲線。
- 把產生的 cubic-bezier 值複製到 transition-timing-function 或 animation-timing-function 中使用。
把某個 Y 手柄拉到 1 以上可以做出自信的過衝效果，例如 cubic-bezier(0.34, 1.56, 0.64, 1)，不用關鍵影格就能讓按鈕和卡片富有彈性。
相關工具
- CSS 漸層產生器 視覺化建立精美 CSS 漸層。產生支援多色標、自訂角度和位置的線性、徑向和錐形漸層。即時複製可投入生產的 CSS 程式碼。
- CSS 載入動畫產生器 免費 CSS 載入動畫產生器：十種純 CSS 載入圖示，即時調整尺寸、速度、粗細與顏色，一鍵複製即貼即用的 HTML 與 CSS 程式碼。
- 創意圓角產生器 免費線上創意圓角產生器。拖曳 8 個控制點或選擇 blob 預設，快速建立有機 CSS 形狀並複製 border-radius 程式碼。
- 顏色轉換器 免費線上顏色轉換器。即時轉換 HEX、RGB、HSL、HSV 格式，附視覺化拾色器。100% 隱私保護，瀏覽器本地運行。
- CSS 文字陰影產生器 免費線上 CSS text-shadow 產生器。多層陰影可調偏移、模糊、顏色與透明度，內建霓虹、3D、復古、光暈等預設，即時預覽並一鍵複製程式碼。
- CSS clip-path 裁剪產生器 免費線上 CSS clip-path 產生器。支援 polygon、circle、ellipse、inset 四種模式，頂點可拖曳，即時預覽並一鍵複製 CSS 程式碼。
- CSS格式化工具 即時格式化和美化CSS程式碼，將壓縮的CSS轉換為可讀的、縮排良好的程式碼，支援自訂選項。
- CSS壓縮器 免費線上CSS壓縮工具。即時壓縮和最佳化CSS程式碼，移除空白、註解和多餘字元。減小檔案體積，提升網頁載入速度。