---
title: "網頁動畫工具箱"
canonical: https://motion.penguindriver.com/
markdown: https://motion.penguindriver.com/index.md
date_modified: 2026-09-26
retrieved: 2026-09-28
language: zh-Hant-TW
content_sha256: dbb2280f21fcc66a2161df7551a4c04566c5a929c711fd268fde2829ae74b7dc
cite: https://motion.penguindriver.com/cite?path=%2F
sources:
  - https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function
  - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
  - https://caniuse.com/
---

# 網頁動畫工具箱

**重點摘要**：網頁動畫工具箱提供 8 個免費工具：32 種 cubic-bezier easing、彈簧轉 CSS linear()、15 種關鍵影格、流動漸層、背景影片 ffmpeg 指令、9 項動畫 API 瀏覽器支援表、無障礙清單與 9 種函式庫比較，不用註冊。

免費網頁動畫產生器：

- [Easing 曲線](https://motion.penguindriver.com/easing.md)
- [彈簧 → CSS linear()](https://motion.penguindriver.com/spring.md)
- [關鍵影格動畫](https://motion.penguindriver.com/keyframes.md)
- [漸層與流動漸層](https://motion.penguindriver.com/gradient.md)
- [背景影片壓縮](https://motion.penguindriver.com/video.md)
- [瀏覽器支援](https://motion.penguindriver.com/support.md)
- [無障礙與效能](https://motion.penguindriver.com/a11y.md)
- [函式庫比較](https://motion.penguindriver.com/libraries.md)


## 常見問題

### 網頁動畫工具箱產生的程式碼可以商用嗎？

可以。本站產生的 CSS、HTML 與指令可自由使用於商業專案；瀏覽器支援與函式庫授權資料整理於 2026-09-26，上線前請以官方文件為準。

### 產生的動畫有處理減少動態模式嗎？

有。關鍵影格、流動漸層與背景影片的程式碼都已加上 prefers-reduced-motion: reduce 的處理，使用者在系統開啟減少動態時會關閉或停止動畫。

### AI 或程式可以直接呼叫這些工具嗎？

可以。本站提供免註冊的 JSON API 與 MCP 端點（POST /mcp），共 8 個 MCP 工具，涵蓋 easing、彈簧、關鍵影格、漸層、影片指令、瀏覽器支援、無障礙與函式庫比較。

## 參考來源

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

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

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