網頁動畫工具箱

網頁動畫無障礙與效能檢查清單

重點摘要：網頁動畫無障礙與效能清單共 9 項，包括提供減少動態模式、超過 5 秒的自動動畫要能暫停（WCAG 2.2.2）、每秒閃爍不超過 3 次（WCAG 2.3.1），以及只動 transform 與 opacity、避免 CLS 與 LCP 變慢。

項目說明依據
提供減少動態模式用 @media (prefers-reduced-motion: reduce) 關閉或縮短大範圍位移、視差、自動播放MDN：prefers-reduced-motion
超過 5 秒的自動動畫要能暫停輪播、跑馬燈、背景影片等自動移動內容，須提供暫停、停止或隱藏的方式（WCAG 2.2.2）W3C WCAG 2.2
每秒閃爍不超過 3 次避免大面積閃爍，可能誘發光敏性癲癇（WCAG 2.3.1）W3C WCAG 2.2
互動觸發的動畫可以關掉捲動視差、滑鼠跟隨等非必要動畫，最好提供關閉選項（WCAG 2.3.3，AAA 級）W3C WCAG 2.2
只動 transform 和 opacity改 width、height、top、left 會觸發重新排版，容易掉格web.dev：高效能 CSS 動畫
will-change 少量使用只在動畫開始前加、結束後移除，濫用會吃記憶體web.dev：高效能 CSS 動畫
影片與圖片預留空間設定 width、height 或 aspect-ratio，避免版面位移（CLS）web.dev：高效能 CSS 動畫
首屏影片要有 poster用 poster 圖當首屏畫面，影片 preload="metadata"，避免拖慢最大內容繪製（LCP）web.dev：高效能 CSS 動畫
大量元素用 requestAnimationFrameJS 動畫在 rAF 裡更新，不要用 setIntervalweb.dev：高效能 CSS 動畫

全站減少動態模式（貼在 CSS 最後）

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

常見問題

WCAG 對自動播放動畫有什麼規定？

依 WCAG 2.2.2，超過 5 秒的自動移動內容，例如輪播、跑馬燈、背景影片，須提供暫停、停止或隱藏的方式。

動畫閃爍有什麼限制？

依 WCAG 2.3.1，每秒閃爍不應超過 3 次，並避免大面積閃爍，因為可能誘發光敏性癲癇。

為什麼動畫只建議改 transform 和 opacity？

改 width、height、top、left 會觸發重新排版，容易掉格；transform 與 opacity 效能較好。will-change 也要少量使用，只在動畫前加、結束後移除。

全站減少動態模式要怎麼寫？

在 CSS 最後加上 prefers-reduced-motion: reduce 媒體查詢，把所有元素的 animation-duration 與 transition-duration 設為 0.01ms、動畫次數設為 1，並把 scroll-behavior 設為 auto。

背景影片會影響 LCP 嗎？

會。首屏影片應設定 poster 圖並使用 preload=metadata，同時為影片與圖片設定寬高或 aspect-ratio，避免拖慢最大內容繪製（LCP）與造成版面位移（CLS）。

參考來源