動效已經不是加分題，是扣分題
Google 把 INP（Interaction to Next Paint）納入 Core Web Vitals 後，按鈕按下到畫面回應的延遲成了可量測、可比較的指標；同時 CSS 捲動驅動動畫落地，不寫 JavaScript 也能做捲動連動。技術門檻降了，做壞的代價卻高了。
中小企業網站的動效問題不是「太少」而是「沒有規格」：設計師說「順一點」，前端調到 800ms，沒人說得出誰對。這篇把動效拆成能寫進驗收單的數字。
五個真實案例：他們的動效怎麼做
| 品牌／網站 | 動效做法 | 可觀察的技術取捨 |
|---|---|---|
| GitHub 首頁地球 | three.js WebGL 五層（光暈、球體、地表、藍尖刺＝開啟中 PR、粉弧線＝已合併），不用貼圖，約 12,000 個五邊形圓點畫陸地 | 持續監控幀率，最近 50 幀掉到 55.5 FPS 以下就降畫質 |
| Stripe 首頁漸層 | 極簡 WebGL（minigl）＋著色器產生流動漸層，容器用 skewY(-12deg) ＋ overflow:hidden 切斜邊 |
社群逆向拆解指出它掛了 ScrollObserver，捲出視窗即停 |
| Zomato Lookback 2024 | 動畫改用 dotLottie 打包 | 檔案縮小 60–70%、多數低於 100KB，累積 1,870 萬曝光（LottieFiles 官方案例） |
| Gojek App | 同樣改採 dotLottie | 動畫檔案小 89%，記憶體穩定度改善 99.6% |
| Warby Parker 選單 | 上下兩線旋轉成 X，中間那條同步淡出 | 三元素、兩種變化、一次完成 |
反例是 Google Pixel 4 產品頁的捲動觸發＋視差混用，NN/g 點名視差與 scroll jacking 屬暈眩高風險。
動效有效的三個行為依據
一、動態強制搶注意力。 Pratt 等人 2010 年發表於《Psychological Science》的〈It's Alive! Animate motion captures visual attention〉指出，具生命感的動態會自動捕獲視覺注意。雙面刃：放在 CTA 是導引，放側欄是干擾。
二、100ms 是「立即」的門檻。 NN/g 指出 checkbox、toggle 這類簡單回饋約 100ms 就會讓人產生「我直接操作了這個物件」的錯覺；低於 100ms 則察覺不到。
三、動效補的是「變化盲視」。 畫面瞬間切換時人腦容易漏看改了什麼；200–300ms 的位移或淡入是在說「A 變成了 B」，而非「B 憑空出現」。
技術成本：工時、檔案與 Core Web Vitals
- 時長：NN/g 建議大多數動效落在 100–500ms，超過 500ms 開始覺得拖；實務區間我抓 150–350ms。
- 屬性：web.dev 指出只有
transform與opacity能純由合成器處理，不觸發 layout 與 paint。動width、top、box-shadow幾乎必掉幀，Lighthouse 會報 non-composited animations。 - INP：良好門檻 200ms 內（第 75 百分位）。寫在 click handler 裡的動畫初始化全算進去。
- CLS：良好門檻 0.1 內。「捲到才淡入」的區塊沒預留高度就是純賺版面位移。
- Bundle：Motion for React 的
useAnimatemini 版 2.3KB、hybrid 版 17KB，純 CSS 是 0KB。dotLottie 官方稱比 Lottie JSON 小 2–10 倍，但 web 端 ThorVG runtime 約 150KB WASM。 - 工時（我們的報價經驗）：互動回饋 token 化約 4–6 小時；客製 hero 動效含三裝置調校 12–20 小時。
適合的行業 vs 不適合的行業
| 適合（動效是資產） | 不適合／需嚴格節制 |
|---|---|
| SaaS 與科技產品：動畫解釋產品邏輯比截圖有效 | 政府與公部門：無障礙合規優先於視覺表現 |
| 精品、餐飲、旅宿：質感訊號影響定價感知 | 醫療掛號、急救資訊：多餘延遲都是風險 |
| 設計服務與作品集：動效本身就是能力證明 | 電商結帳：每多 100ms 都在流失轉換 |
怎麼套用到你的網站：5 個步驟
- 先量再改。 用 PageSpeed Insights 取得現有 INP／CLS，再用 Chrome DevTools Performance 錄一段真實互動看有無掉幀。沒有基準線就沒有驗收。
- 建立三個 duration token。
--motion-fast: 120ms（hover、checkbox）、--motion-base: 240ms（下拉、tooltip、卡片展開）、--motion-slow: 400ms（modal、大位移）。進場ease-out，離場ease-in並縮短 50–80ms。 - 盤點後只留三類動效。 狀態回饋、空間關係、載入佔位，其餘刪除。
- 寫 reduced-motion 降級版。 不是全部
animation: none，而是位移換成純 opacity 淡入、loop 停在第一幀——這正是 WCAG 2.3.3 的做法，prefers-reduced-motion自 2020 年 1 月起跨瀏覽器可用。 - 寫進驗收單。 進場動畫容器用
aspect-ratio或min-height佔位；自動播放超過 5 秒者須有暫停機制（WCAG 2.2.2）。
- [ ] 動效時長落在 120–400ms
- [ ] 只動 transform／opacity，Lighthouse 無 non-composited 警告
- [ ] 行動裝置實測 INP ≤ 200ms、CLS ≤ 0.1
- [ ]
prefers-reduced-motion: reduce有降級樣式
三個最常見的錯誤
- 整頁 scroll reveal。 每個區塊都淡入，讀者往下捲永遠在等內容，跳出率上升還吃 CLS。改法：只給 hero 下方第一區塊做，其餘直接顯示。
- 把 reduced-motion 當可選項。 它是主流瀏覽器共同支援的偏好設定，不寫等於放棄前庭敏感使用者。
- 用 GIF 當 loading，或動效沒有 token。 GIF 動輒 500KB 又無法去背，換 CSS 或 dotLottie 通常小一個數量級；各元件 hardcode 0.3s／0.45s／700ms，改版時無從一致調整。
我的觀點
動效最大的成本不是 GPU，是維護。沒有 token、沒有 reduced-motion 分支、沒寫進驗收單的動效，兩次改版後一定有人把它註解掉。與其做一支炫技 hero 動畫，不如把全站四十個互動元件的回饋壓在 120ms。
延伸資源
- Motion（motion.dev）：React／JS 動效庫，官方文件附完整 bundle size 縮減指南。
- LottieFiles dotLottie：向量動畫打包格式，可線上把 Lottie JSON 轉成
.lottie。 - MDN CSS scroll-driven animations：純 CSS 捲動動畫；支援度以 caniuse 為準，用
@supports當漸進增強。
常見問題 FAQ
動效會不會影響 SEO？
不會直接影響內容排名，但透過 Core Web Vitals 間接影響：常見傷害是 INP（門檻 200ms 內）與 CLS（門檻 0.1 內）。用 CSS 先隱藏再淡入不會被判為隱藏文字，DOM 裡文字始終存在。
中小企業的動效預算抓多少合理？
依我們的接案經驗，互動回饋 token 化約 4–6 小時；客製 hero 動效含三裝置調校約 12–20 小時。先做前者。
一定要用 Lottie 嗎？
不一定。單一 icon 用 CSS 或 inline SVG 就夠，為它載入約 150KB 的 ThorVG runtime 反而更重。角色動畫、多圖層插畫或需跨平台一致時才值得導入。
開了 prefers-reduced-motion，動效是不是白做了？
不是。正確做法是降級而非關閉——保留 opacity 淡入、移除位移與視差、停掉 loop。功能必要的動畫（如進度指示）依 WCAG 2.3.3 屬例外。
捲動驅動動畫現在能用嗎？
可以，但要當漸進增強。Chrome／Edge 自 115 起支援，Safari 較新版已跟上，Firefox 仍在 flag 後。用 @supports (animation-timeline: scroll()) 包住即可。
讓動效變成資產，不是負債
網站有動效卻沒規格，或想加動效又怕拖慢速度？我們可以先做 30 分鐘動效健檢：實測 INP 與 CLS、標出非合成器動畫、給你一份能交給前端的 duration token 表。
- Email：[email protected]
- 電話：0916-224-047
- LINE：@ufv9089p