cubic-bezier Easing 曲線產生器
重點摘要：cubic-bezier Easing 產生器可拖曳 4 個控制點調整緩動曲線並即時預覽，內建 32 種常用曲線，包括 5 個 CSS 關鍵字、easeIn／Out／InOut 的 8 組系列與 3 種 Material 3 曲線，可一鍵複製 CSS 與 Web Animations API 程式碼。
調整四個控制點，下方小球會用這條曲線移動。也可以從常用曲線開始改。
常用曲線一覽
| 名稱 | cubic-bezier | 用途 |
|---|---|---|
linear | 0, 0, 1, 1 | 等速 |
ease | 0.25, 0.1, 0.25, 1 | CSS 預設 |
ease-in | 0.42, 0, 1, 1 | CSS 內建：慢進 |
ease-out | 0, 0, 0.58, 1 | CSS 內建：慢出 |
ease-in-out | 0.42, 0, 0.58, 1 | CSS 內建：慢進慢出 |
easeInSine | 0.12, 0, 0.39, 0 | 正弦慢進 |
easeOutSine | 0.61, 1, 0.88, 1 | 正弦慢出 |
easeInOutSine | 0.37, 0, 0.63, 1 | 正弦慢進慢出 |
easeInQuad | 0.11, 0, 0.5, 0 | 二次方慢進 |
easeOutQuad | 0.5, 1, 0.89, 1 | 二次方慢出 |
easeInOutQuad | 0.45, 0, 0.55, 1 | 二次方慢進慢出 |
easeInCubic | 0.32, 0, 0.67, 0 | 三次方慢進 |
easeOutCubic | 0.33, 1, 0.68, 1 | 三次方慢出，介面最常用 |
easeInOutCubic | 0.65, 0, 0.35, 1 | 三次方慢進慢出 |
easeInQuart | 0.5, 0, 0.75, 0 | 四次方慢進 |
easeOutQuart | 0.25, 1, 0.5, 1 | 四次方慢出 |
easeInOutQuart | 0.76, 0, 0.24, 1 | 四次方慢進慢出 |
easeInQuint | 0.64, 0, 0.78, 0 | 五次方慢進 |
easeOutQuint | 0.22, 1, 0.36, 1 | 五次方慢出 |
easeInOutQuint | 0.83, 0, 0.17, 1 | 五次方慢進慢出 |
easeInExpo | 0.7, 0, 0.84, 0 | 指數慢進 |
easeOutExpo | 0.16, 1, 0.3, 1 | 指數慢出，俐落 |
easeInOutExpo | 0.87, 0, 0.13, 1 | 指數慢進慢出 |
easeInCirc | 0.55, 0, 1, 0.45 | 圓形慢進 |
easeOutCirc | 0, 0.55, 0.45, 1 | 圓形慢出 |
easeInOutCirc | 0.85, 0, 0.15, 1 | 圓形慢進慢出 |
easeInBack | 0.36, 0, 0.66, -0.56 | 先往回拉再前進 |
easeOutBack | 0.34, 1.56, 0.64, 1 | 超過終點再回彈 |
easeInOutBack | 0.68, -0.6, 0.32, 1.6 | 前後都回彈 |
materialStandard | 0.2, 0, 0, 1 | Material 3 標準 |
materialEmphasizedDecelerate | 0.05, 0.7, 0.1, 1 | Material 3 強調減速（進場） |
materialEmphasizedAccelerate | 0.3, 0, 0.8, 0.15 | Material 3 強調加速（退場） |
easings.net：常用緩動曲線；MDN：easing-function（含 linear()）
常見問題
介面動畫最常用哪一條 easing？
本站標註 easeOutCubic（cubic-bezier(0.33, 1, 0.68, 1)）為介面最常用的曲線，屬三次方慢出：開始快、結尾減速，適合選單、面板等進場動畫。
cubic-bezier 的 4 個數字代表什麼？
代表兩個控制點的座標 x1、y1、x2、y2。x 必須介於 0 到 1，y 可以超出 0 到 1；y 超出範圍時動畫會衝過終點再回來，形成回彈效果。
有會回彈的 easing 嗎？
有。easeOutBack（0.34, 1.56, 0.64, 1）會超過終點再回彈，easeInBack 先往回拉再前進，easeInOutBack 前後都回彈；若要更像真實彈簧，可改用 CSS linear()。
Material 3 的 easing 數值是多少？
本站收錄 Material 3 標準曲線 cubic-bezier(0.2, 0, 0, 1)、強調減速（進場）0.05, 0.7, 0.1, 1，以及強調加速（退場）0.3, 0, 0.8, 0.15。