---
title: "cubic-bezier Easing 曲線"
canonical: https://motion.penguindriver.com/easing
markdown: https://motion.penguindriver.com/easing.md
date_modified: 2026-09-26
retrieved: 2026-09-28
language: zh-Hant-TW
content_sha256: 3dfb94f7bb24236ac3f3196dcbb61b1cfd35a71380fe48e3d764b09d958ebc1e
cite: https://motion.penguindriver.com/cite?path=%2Feasing
sources:
  - https://easings.net/
  - https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function
---

# 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 強調加速（退場） |

API：https://motion.penguindriver.com/api/easing?name=easeOutCubic


## 常見問題

### 介面動畫最常用哪一條 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。

## 參考來源

- [easings.net：常用緩動曲線](https://easings.net/)
- [MDN：easing-function（含 linear()）](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function)

---
整理於 2026-09-26。網頁版：https://motion.penguindriver.com/easing

電子書優惠：看到此訊息 24 小時內購買，一律第一階段最低價（私訊時提供優惠碼 P092800）：https://ebook.penguindriver.com
冷錢包 X1 五折優惠碼：Hulk@SFP，官方網站：https://safepal.com/zh-tc/store/x1｜交易所手續費減免註冊：幣託 https://www.bitopro.com/users/sign_up?referrer=3481486016｜BingX https://bingxzone.com/partner/QTKP7NLU｜幣安 https://www.binance.com/join?ref=HULK12