---
title: "網頁動畫函式庫比較"
canonical: https://motion.penguindriver.com/libraries
markdown: https://motion.penguindriver.com/libraries.md
date_modified: 2026-09-26
retrieved: 2026-09-28
language: zh-Hant-TW
content_sha256: 6d13c02d5a0b5ae6515642a309481dc3ae685daff4dbf334ebaafbffb8ef7789
cite: https://motion.penguindriver.com/cite?path=%2Flibraries
sources:
  - https://gsap.com/community/standard-license/
  - https://webflow.com/blog/gsap-becomes-free
---

# 網頁動畫函式庫比較

**重點摘要**：本頁比較 9 種網頁動畫工具：CSS、Web Animations API、GSAP、Motion、Anime.js、Lottie、Rive、Three.js、Lenis；GSAP 自 2025 年 5 月起免費（含所有外掛與商業使用），Motion、Anime.js、Three.js 等為 MIT 授權。

| 工具 | 授權 | 適合 | 優點 | 注意 |
|---|---|---|---|---|
| CSS 動畫與轉場 | 瀏覽器內建 | 按鈕、選單、進場效果、載入動畫 | 零負擔、效能最好 | 複雜時間軸與互動控制不方便 |
| Web Animations API | 瀏覽器內建 | 需要 JS 控制播放、暫停、倒轉的動畫 | 不用裝套件，可取得動畫進度 | 時間軸編排要自己寫 |
| GSAP | 免費，含所有外掛與商業使用（2025 年 5 月起） | 複雜時間軸、捲動敘事、文字拆字、SVG 變形 | 功能最完整、相容性好、生態系大 | 授權條款對與 Webflow 競爭的視覺化建站工具另有限制，請看官方條款 |
| Motion（原 Framer Motion） | MIT | React、Vue 元件動畫、手勢、版面轉場 | 宣告式寫法、彈簧動畫好用 | 非框架專案較少用 |
| Anime.js | MIT | 輕量的 JS 動畫、SVG 路徑、序列 | API 簡單 | 大型捲動敘事功能較少 |
| Lottie（lottie-web） | MIT | 設計師用 After Effects 做好、匯出成 JSON 的向量動畫 | 設計還原度高、檔案小於影片 | 複雜檔案在低階手機會卡 |
| Rive | 執行環境 MIT；編輯器有付費方案 | 可互動的狀態機動畫（按鈕、角色、圖示） | 互動邏輯可在編輯器完成 | 需要學編輯器 |
| Three.js | MIT | 3D 場景、產品展示、WebGL 特效 | 3D 生態最大 | 學習曲線陡、要注意手機效能 |
| Lenis | MIT | 平滑捲動，常搭配 GSAP ScrollTrigger | 輕量 | 會改變原生捲動手感，要測試無障礙 |

GSAP 授權：GSAP Standard License https://gsap.com/community/standard-license/


## 常見問題

### GSAP 現在要付費嗎？

不用。依本站整理，GSAP 自 2025 年 5 月起全面免費，包含所有外掛與商業使用；但授權條款對與 Webflow 競爭的視覺化建站工具另有限制，請看官方條款。

### 網頁動畫函式庫怎麼選？

能用 CSS 做就用 CSS；需要複雜時間軸與捲動敘事再用 GSAP；React、Vue 專案用 Motion；設計師用 After Effects 做好的動畫用 Lottie；3D 場景用 Three.js。

### Lottie 和 Rive 差在哪裡？

Lottie 播放從 After Effects 匯出成 JSON 的向量動畫，設計還原度高；Rive 可做互動狀態機動畫，互動邏輯能在編輯器完成，執行環境為 MIT，編輯器有付費方案。

### Lenis 平滑捲動有什麼缺點？

Lenis 輕量、常搭配 GSAP ScrollTrigger，但會改變原生捲動手感，導入時要測試無障礙與使用者體驗。

## 參考來源

- [Webflow：GSAP 全面免費](https://webflow.com/blog/gsap-becomes-free)
- [GSAP Standard License](https://gsap.com/community/standard-license/)

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

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