---
title: "彈簧動畫 → CSS linear()"
canonical: https://motion.penguindriver.com/spring
markdown: https://motion.penguindriver.com/spring.md
date_modified: 2026-09-26
retrieved: 2026-09-28
language: zh-Hant-TW
content_sha256: ca17afe8663446cfaea8dbcb5a9f8df889c39594e107970a6fae72ea7467b1bd
cite: https://motion.penguindriver.com/cite?path=%2Fspring
sources:
  - https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function
  - https://caniuse.com/
---

# 彈簧動畫 → CSS linear()

**重點摘要**：彈簧動畫產生器用剛性（stiffness）、阻尼（damping）與質量（mass）模擬物理彈簧，轉成純 CSS linear() 緩動函式與建議時間；linear() 支援 Chrome 113、Firefox 112、Safari 17.2 以上。

範例（stiffness 260、damping 12，欠阻尼（會回彈），回彈 28%）：

```css
.box {
  transition: transform 1246ms linear(0, 0.1124, 0.3719, 0.6794, 0.9646, 1.1613, 1.2634, 1.2796, 1.2333, 1.1536, 1.0645, 0.992, 0.9437, 0.9221, 0.9232, 0.9397, 0.9635, 0.988, 1.0068, 1.0183, 1.0225, 1.0207, 1.0153, 1.0084, 1.0017, 0.9969, 0.9943, 0.9936, 0.9945, 0.9962, 0.9982, 0.9999, 1.0011, 1.0017, 1.0018, 1.0014, 1.0009, 1.0004, 0.9999, 0.9996, 1);
}
```

linear() 支援：Chrome 113、Firefox 112、Safari 17.2 以上；舊瀏覽器請用 @supports 提供 cubic-bezier 後備。

API：https://motion.penguindriver.com/api/spring?stiffness=&damping=&mass=


## 常見問題

### stiffness 和 damping 要怎麼調？

剛性越大動作越快，阻尼越小回彈越多。本站常見設定：柔和 120／20、俐落 380／32、Q 彈 260／12、慢慢回彈 80／8（stiffness／damping）。

### 怎麼判斷彈簧會不會回彈？

看阻尼比：damping ÷（2 × √(stiffness × mass)）。小於 1 為欠阻尼會回彈，等於 1 為臨界阻尼，大於 1 為過阻尼不回彈；工具會顯示類型與回彈百分比。

### 舊瀏覽器不支援 linear() 怎麼辦？

用 @supports 判斷，不支援時提供一般 cubic-bezier 作為後備；linear() 從 Chrome 113、Firefox 112、Safari 17.2 起預設支援。

### 為什麼要用 CSS linear() 做彈簧？

linear() 可以用多個取樣點描出任意曲線，做出 cubic-bezier 做不到的彈簧、多次回彈效果，而且不需要載入 JavaScript 動畫函式庫。

## 參考來源

- [MDN：easing-function（含 linear()）](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function)
- [Can I use：瀏覽器支援查詢](https://caniuse.com/)

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

電子書優惠：看到此訊息 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