CSS 動畫：讓網頁動起來

網頁不只是靜態的文字和圖片。加上動畫，讓介面更生動、互動更流暢。

Transition：平滑過渡

Transition 讓元素的屬性變化能平滑過渡，而不是瞬間跳轉。滑鼠移上去時的顏色、大小、陰影變化都靠它。

切換屬性，觀察過渡效果

即時產生的 CSS

.box { transition: all 0.5s ease; background-color: #3b82f6; transform: scale(1); box-shadow: none; }

重點

transition 需要三件事：要過渡的屬性、持續時間、緩動函數。最常用的寫法是 transition: all 0.3s ease。

Animation & Keyframes：多步驟動畫

Animation 比 Transition 更強大，可以定義完整的動畫流程，不需要觸發事件就能自動播放。

點擊播放動畫

Transition vs Animation

transition 適合簡單的狀態切換（hover、active）；animation 適合複雜的多步驟動畫，可以自動播放、重複、反向。

GSAP ScrollTrigger：滾動觸發

ScrollTrigger 讓動畫隨著滾動觸發，向下滑時元素依序出現，是現代網站最常見的效果。

向下滾動，觀察元素動畫

標題 - 50% 可見
卡片 A - 0% 可見
卡片 B - 0% 可見
底部區塊 - 0% 可見
繼續往下滾動...
滾動進度：

GSAP ScrollTrigger 範例程式碼

gsap.registerPlugin(ScrollTrigger); gsap.from(".card", { scrollTrigger: { trigger: ".card", start: "top 80%", end: "top 30%", scrub: true, }, y: 60, opacity: 0, duration: 1, });

為什麼用 GSAP？

GSAP（GreenSock Animation Platform）是業界最受歡迎的動畫函式庫。ScrollTrigger 支援滾動觸發、進度綁定、固定元素等進階功能。許多知名網站如 Apple、Nike 都使用 GSAP。

小結

  • Transition簡單的狀態切換動畫（hover 變色、放大）
  • Animation + @keyframes完整的多步驟動畫（淡入、旋轉、彈跳）
  • GSAP ScrollTrigger滾動觸發動畫，現代網站必備效果
下一課