三種網頁動畫方式對比

同一頁實測 Animate.css、anime.js、Lottie 三種做網頁動畫的方式——看它們的效果、用法與適合場景差在哪。

現成 CSS 庫

Animate.css

套一個 class 就有，最簡單

怎麼來：載入 CSS、給元素加 class
控制力：低（選現成效果、難細調）
適合：淡入、彈跳、抖動等常見效果

<div class="animate__animated
  animate__bounce">

JS 動畫引擎

用程式組出任意動畫

怎麼來：載入庫、寫 JS 描述動畫
控制力：高（任意屬性＋緩動＋串接）
適合：交錯進場、數字遞增、客製互動

anime({ targets:'.box',
  translateY:[40,0],
  delay:anime.stagger(120) })

向量動畫檔

播放「設計好的」動畫檔

怎麼來：先有 .json 動畫檔，再用播放器播
控制力：中（整支播放，難改內部）
適合：複雜插畫、icon、吉祥物動效

lottie.loadAnimation({
  path:'demo-lottie.json' })

面向	Animate.css	anime.js	Lottie
本質	現成 CSS 效果集	JS 動畫引擎	向量動畫播放器
動畫從哪來	內建幾十種	自己用程式組（無限種）	先做／生成動畫檔
難易度	最簡單（套 class）	中（要寫 JS）	中（要有檔＋播放器）
控制精細度	低	高	中
最適合	常見小動效、快速套用	客製互動、進場、數字	複雜插畫、品牌動畫
費用	免費開源	免費開源	庫免費；現成檔 LottieFiles 有免費也有付費