網頁動畫全攻略：從 className 到 GSAP，怎麼選？

嗨咿，我是 illumi，一開始我們介紹用AE、Lottie 做動畫，還有 Reactbits 動畫特效元件庫，但更酷的是自己用程式寫動畫！

一起來看看有哪些方法吧！

1. ClassName 控動畫（最簡單）

這一類完全靠 CSS，幾乎不需要寫 JS。

• CSS Animation / Transition
  • 最原始的方式，寫 @keyframes 或 transition。
  • 適合 hover、淡入淡出。
• Tailwind animate
  • 我發現很多用Tailwind 很久的工程師也沒發現 Tailwind 也有一些小動畫，例如 閃爍、旋轉、脈動。
  • 不需要自己定義 keyframes，拿來快速開發很方便。
    
• Animate.css

  • 預設好的動畫 class，例如 animate__fadeInUp。

  • 行銷頁、簡報式動畫很常見。

  • 只要在終端機輸入

    $ npm install animate.css --save
    
    

    然後：

    import 'animate.css';
    
    

    在 class 中加入 animate__animated animate__bounce
    

2. JS API 控動畫

當我們想要更靈活地 控制時間線、速度，甚至跟使用者交互，就要靠 JS API。

• Web Animations API (WAAPI)
  • 原生提供 element.animate([...], options)。
  • 能程式觸發，但功能比不上專業函式庫。
• GSAP (GreenSock Animation Platform)
  • 最有名的動畫函式庫。
  • 能控制時間線（timeline）、彈性效果，還能搭配 ScrollTrigger 做「滾動觸發動畫」。
    
• Framer Motion
  • React 專用動畫框架。
  • 把動畫寫進 <motion.div animate={{x:100}}> props 裡，和 React 的狀態緊密結合。
    
• Anime.j
  • 簡單易用，特別適合數字、SVG Path 動畫。
  • 像 logo 畫線、數字跳動，就很方便。
    

3. 繪圖 & 進階派

創造屬於你的宇宙，但超吃效能。

• Canvas 2D → 遊戲小效果、粒子系統。
• WebGL / Three.js / OGL → 3D 場景、shader 特效。

接下來我們就選一個來學吧！就決定是「GSAP」 了！只要你用過AE、Pr、Davinci Resolve，甚至只要在剪映中加過 keyframe ，那你絕對是天選的 GSAP 天才！