動畫的目的是功能，不是裝飾
網頁動畫有一個本質的目的：引導用戶注意力、強化互動反饋、傳遞品牌個性。
當動畫服務這些目的時，它讓體驗更好。當動畫只是為了「讓網站看起來更酷」時，它通常造成分散注意力和效能問題。
在設計或評估網站動畫前，先問：「這個動畫讓用戶更容易理解頁面，還是讓他更難專注？」
捲動動畫的 5 種有效用途
用途 1：Scroll Reveal（滾動顯現）
元素在進入視窗時淡入或滑入——最常見、最有效的捲動動畫類型。
為什麼有效： 它讓頁面有節奏感，每個新的內容塊在「被看到」的瞬間出現，強化了用戶「發現」新內容的感覺。
使用原則： 只讓真正重要的元素有動畫（主要標題、重要統計數字、服務卡片），不要讓頁面上每一個元素都動。每個頁面最多 30% 的元素有動畫效果。
用途 2：數字跳動（Count-Up）
進入視窗時，數字從 0 跳到目標值——例如「服務過 100+ 品牌」從 0 滾動到 100。
為什麼有效： 觸發大腦的「完成感」，數字達到最終值的瞬間讓人感到滿足，也讓數字本身更令人印象深刻。
最適合： 成就數字、服務統計、客戶數量等。
用途 3：視差滾動（Parallax）
背景圖層和前景元素以不同速度移動，創造深度感。
適合場景： 品牌故事頁面、視覺感強的 Hero 區塊、作品集展示。
重要限制： 視差效果對行動裝置體驗不佳，且可能造成性能問題。應在手機版停用或降級。
用途 4：進度條 / 閱讀進度
文章頁面頂部的閱讀進度條，隨捲動增長。
為什麼有效： 讓讀者知道自己在文章中的位置，減少「不知道還有多長」的焦慮，提升完讀率。
用途 5：元素的微動態（Micro-Animation）
滑鼠移過按鈕、卡片或圖示時的輕微縮放或浮起效果。
這是最輕量、最安全的動畫形式，直接強化互動反饋——用戶知道「這個元素是可以點的」。
效能考量：動畫的技術原則
效能差的動畫讓網站感覺卡頓，比沒有動畫更糟。
原則 1：只用 CSS transform 和 opacity
只對 transform 和 opacity 屬性做動畫——這兩個屬性在瀏覽器的 GPU 層渲染，不觸發頁面重排（Reflow / Repaint），效能最好。
避免對 height、width、top、left 等屬性做動畫——這些屬性的改變會觸發整個頁面的重排，是效能殺手。
原則 2：使用 will-change 預告動畫
對即將做動畫的元素加上 will-change: transform，讓瀏覽器提前準備 GPU 層，動畫更流暢。
原則 3：Intersection Observer 代替 Scroll Listener
監聽捲動事件（scroll event）在每次捲動都觸發，效能很差。使用 Intersection Observer API 來偵測元素進入視窗——只在「進入視窗」這個時刻觸發一次，效能優異。
原則 4：尊重減少動態偏好設定
部分用戶（特別是有前庭障礙或動態暈眩的用戶）在作業系統中設定了「減少動態效果」。
用 CSS 媒體查詢 prefers-reduced-motion 偵測這個設定，並在用戶有此偏好時關閉或簡化動畫。這也是 WCAG 無障礙規範的要求。
哪些動畫要避免
頁面進入的全螢幕動畫
打開網站後，需要等一個長達 2–3 秒的開場動畫才能看到內容——這直接傷害 SEO（延遲 LCP）並惹惱用戶。
與內容無關的純裝飾動畫
背景不停旋轉的幾何圖形、漫無目的飄動的粒子效果——如果動畫不傳達任何意義，它只是在分散注意力。
自動播放的大型動畫
在頁面加載時自動觸發大量動畫，導致用戶第一眼看到的畫面是「很多東西在動」，無法找到視覺焦點。
低品質的動畫
一個卡頓、跳格的動畫比沒有動畫更傷品牌。如果你沒辦法保證動畫在各設備上流暢，就不要加。
Framer Motion vs CSS Animation：何時用哪個
CSS Animation（適合： 簡單的 hover 效果、固定的入場動畫、需要最佳效能的情況）
Framer Motion / GSAP（適合： 複雜的序列動畫、需要根據用戶互動動態調整的動畫、視差效果）
對大多數品牌官網，CSS Animation + Intersection Observer 已足夠。只有在需要複雜互動效果時，才引入 Framer Motion 增加的 JavaScript 負擔。