網頁動畫函式庫比較
重點摘要：本頁比較 9 種網頁動畫工具：CSS、Web Animations API、GSAP、Motion、Anime.js、Lottie、Rive、Three.js、Lenis；GSAP 自 2025 年 5 月起免費（含所有外掛與商業使用），Motion、Anime.js、Three.js 等為 MIT 授權。
能用 CSS 做就用 CSS；需要時間軸與捲動敘事再上 GSAP；React 專案用 Motion；設計師給 AE 動畫用 Lottie。
| 工具 | 授權 | 適合 | 優點 | 注意 |
|---|---|---|---|---|
| CSS 動畫與轉場 | 瀏覽器內建 | 按鈕、選單、進場效果、載入動畫 | 零負擔、效能最好 | 複雜時間軸與互動控制不方便 |
| Web Animations API | 瀏覽器內建 | 需要 JS 控制播放、暫停、倒轉的動畫 | 不用裝套件，可取得動畫進度 | 時間軸編排要自己寫 |
| GSAP | 免費，含所有外掛與商業使用（2025 年 5 月起） Webflow：GSAP 全面免費（含所有外掛與商業使用） | 複雜時間軸、捲動敘事、文字拆字、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。整理於 2026-09-26。
常見問題
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，但會改變原生捲動手感，導入時要測試無障礙與使用者體驗。