網頁動態效果該不該加，判斷標準是它有沒有幫訪客理解發生了什麼事：按鈕按下後的回饋、表單送出的進度、內容展開的方向，這類動態能減少疑惑；只為了好看而讓文字延遲出現、背景不停移動，則可能拖慢主要內容顯示、讓版面跳動，也可能讓對動態敏感的訪客不適。實作上盡量只對 transform 與 opacity 做動畫，降低對 Core Web Vitals 的影響，並用 prefers-reduced-motion 提供減少動態的版本，上線前在手機與開發人員工具中驗收。
網頁動態效果的六種常見類型
同樣叫動態效果，用途與風險差很多，規劃時先分清楚是哪一種：
| 類型 | 常見用途 | 要特別注意 |
|---|---|---|
| 微互動 | 按鈕按下、勾選、收藏、欄位驗證的即時回饋 | 時間要短，不能讓操作變慢 |
| 轉場 | 頁面切換、選單展開、彈出視窗開關 | 方向要符合內容的空間關係 |
| 捲動觸發 | 區塊進入畫面時淡入、數據條展開、視差背景 | 內容不能因為還沒捲到就讀不到 |
| 載入動畫 | 資料讀取中的轉圈、骨架畫面、進度條 | 只用在真的需要等待的地方 |
| 影片背景 | 首屏主視覺、品牌氛圍 | 檔案大小、暫停控制與文字對比 |
| 向量動畫檔 | 插圖動畫、圖示動畫、操作示意 | 播放器程式與動畫檔本身的大小 |
需要立體旋轉或空間場景的效果，負擔又比上表高一個層級，可另外參考立體網頁設計的效能與相容性取捨。
什麼情況下動態效果會加分
web.dev 指出，動畫與轉場做得好，可以在更新頁面內容時不讓使用者感到意外。對照這個原則，下面幾種用法通常值得做：
- 確認操作已收到：按下送出後按鈕變成處理中，訪客就不會重複點擊。
- 說明東西去了哪裡：商品加入購物車時往購物車圖示移動；側邊選單從哪裡滑出就往哪裡收回。
- 引導注意力：表單錯誤欄位輕微晃動並顯示說明，把視線帶到要修正的地方。
- 讓等待可預期：進度條或骨架畫面告訴訪客內容正在載入，而不是畫面當掉。
共同點是目的明確、時間短、幅度小，拿掉後訪客會少一個線索。
什麼情況下動態效果會扣分
扣分的動態通常是讓訪客等、讓訪客分心，或讓部分訪客身體不適：
- 內容要等動畫跑完才出現：文字逐段淡入，讀者捲動速度比動畫快，就會看到一片空白。
- 自動播放又停不下來：WCAG 規定，自動開始、持續超過五秒，且和其他內容同時呈現的移動、閃爍或捲動資訊，要提供暫停、停止或隱藏的方式（動態屬於必要內容時除外），自動輪播與背景影片都適用。
- 快速閃爍：閃爍內容可能引發偏頭痛、暈眩甚至癲癇，WCAG 要求一秒內閃爍不超過三次，或低於閃爍門檻。
- 大面積縮放與平移：MDN 說明這類動畫可能引發前庭障礙者不適。
- 每個元素都在動：到處都在動就沒有重點，真正需要提醒的地方反而被淹沒。
動態效果和 Core Web Vitals 的關係
動畫的做法會反映在 Core Web Vitals 的各項指標上：
- CLS（累計版面配置位移）：良好標準是零點一以下。web.dev 說明用 CSS 的 transform 做動畫不會觸發版面位移；改變寬高或位置、會推擠其他元素的動畫，就可能被計入。使用者點擊、輕觸或按鍵後五百毫秒內的位移會被排除，捲動、拖曳等連續操作與自動播放的動畫則沒有這個豁免。
- 非合成動畫：Lighthouse 提醒這類動畫在低階手機上可能不順，也可能增加 CLS。
- INP（Interaction to Next Paint）：觀察點擊、輕觸與鍵盤互動的回應延遲，兩百毫秒以內為良好。JavaScript 在主執行緒上執行，大量用程式逐格計算的動畫可能和互動搶資源。
- LCP（Largest Contentful Paint）：良好標準是二點五秒內。透明度為零的元素不會被當成候選，主標題若從完全透明慢慢淡入，主要內容被量到的時間可能延後；影片則以海報圖載入或首格畫面顯示中較早的時間計算。
web.dev 也建議把動畫 GIF 換成影片，因為動畫 GIF 的檔案可能非常大。整體速度的處理方式可參考網站速度優化的做法。
尊重使用者的減少動態效果設定
許多作業系統都有減少動態的選項，例如 Windows 協助工具中的動畫效果、macOS 與 iOS 輔助使用中的減少動態效果、Android 的移除動畫。網站可以用 CSS 的 prefers-reduced-motion 媒體查詢偵測這個設定，值為 reduce 時代表使用者希望減少非必要的動態。
MDN 的說明是移除、減少或替換以動態為主的動畫，所以不必把所有回饋都拿掉。實務上可以這樣做：
- 把位移、縮放、視差改成單純淡入淡出，或直接切換到結果狀態。
- 保留按鈕狀態變化、進度提示等功能性回饋。
- 自動播放的輪播與影片預設不播放，或至少提供明顯的暫停按鈕。
WCAG 的 AAA 等級另要求互動觸發的動態動畫能被關閉，除非它對功能或資訊是必要的，視差捲動就是典型例子。
實作方式怎麼選：CSS、JavaScript 與動畫檔
| 做法 | 適合的效果 | 取捨 |
|---|---|---|
| CSS 轉場與關鍵影格 | 狀態切換、懸停、展開收合 | 輕量，複雜的時間軸較難控制 |
| JavaScript 動畫函式庫 | 多段串接、依捲動位置變化的複雜效果 | 功能多，但要載入額外程式並注意主執行緒負擔 |
| Intersection Observer | 元素進入畫面時才啟動動畫 | 比在捲動事件裡反覆計算位置省效能 |
| View Transition API | 頁面或畫面狀態之間的轉場 | 要確認目標瀏覽器的支援情況 |
| 向量動畫檔 | 設計師在動畫軟體做好的插圖動畫 | 例如 Lottie 可播放從 After Effects 匯出的 JSON 動畫，要計入播放器程式大小 |
| 影片 | 實拍畫面、影片背景 | 以靜音、循環、行內播放取代動畫 GIF，並提供暫停 |
不論用哪一種，web.dev 都建議盡量只對 opacity 與 transform 做動畫，避開會觸發版面計算或重繪的屬性；will-change 只在遇到效能問題時節制使用。
上線前的動態效果驗收清單
- 錄製效能：在 Chrome 開發人員工具的效能面板錄下動畫播放過程，檢查是否有長時間佔用主執行緒的工作。
- 標示版面位移：在 Rendering 面板開啟版面位移區域，位移的地方會短暫以紫色標出。
- 模擬減少動態：同一面板可模擬 prefers-reduced-motion，確認替代版本正常、內容沒有消失。
- 跑 Lighthouse：檢查是否出現「避免使用非合成的動畫」的提示。
- 用中低階手機實測：桌機順暢不代表手機也順暢。
- 檢查控制與閃爍：自動播放的內容找得到暫停，畫面沒有快速閃爍。
常見問題
首頁輪播圖要注意什麼？
自動輪播若持續超過五秒，要提供暫停、停止或隱藏的方式，並能用鍵盤操作。重要訊息不要只放在後面幾張，關鍵內容放在固定區塊比較穩當。
開啟減少動態效果後，動畫要全部拿掉嗎？
不必全部拿掉。把位移、縮放與視差改成淡入或直接切換，保留按鈕狀態、進度提示這類功能性回饋，訪客仍知道操作有沒有成功，也不會因大幅移動而不適。
背景影片會拖慢網站嗎？
可能會。影片放在首屏時會和主要內容搶頻寬，建議壓縮檔案、準備輕量的海報圖，手機版可改用靜態圖片，並提供暫停按鈕。
捲動視差效果適合企業官網嗎？
可以少量使用，但要確認內容不依賴視差才讀得懂，並在使用者開啟減少動態效果時停用。視差屬於互動觸發的動態，對動態敏感的訪客可能不舒服，不宜整頁大量使用。
動態效果要交給設計師還是工程師？
兩邊要一起決定。設計端定義觸發時機、時間長短、速度曲線與減少動態的版本，工程端評估實作方式與效能成本，交付時把這些寫成動態規格，比只給一段示意影片清楚。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
如果網站已經有不少動態效果，建議先列出每個動畫的目的，拿掉說不出用途的，再用開發人員工具檢查版面位移與互動延遲。京采的網頁設計服務會在設計階段就規劃動態規格與減少動態的替代版本，並在上線前完成手機與效能驗收。想討論你的網站，歡迎與我們聯繫。
