---
title: "網頁動畫無障礙與效能"
canonical: https://motion.penguindriver.com/a11y
markdown: https://motion.penguindriver.com/a11y.md
date_modified: 2026-09-26
retrieved: 2026-09-28
language: zh-Hant-TW
content_sha256: fdaca179c78bb780b39e2457a1ed2dd5bf2cb8de9c21840d93ef0d5f058937b2
cite: https://motion.penguindriver.com/cite?path=%2Fa11y
sources:
  - https://www.w3.org/TR/WCAG22/
  - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
  - https://web.dev/articles/animations-guide
---

# 網頁動畫無障礙與效能

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

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

```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）。

## 參考來源

- [W3C WCAG 2.2](https://www.w3.org/TR/WCAG22/)
- [MDN：prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
- [web.dev：高效能 CSS 動畫](https://web.dev/articles/animations-guide)

---
整理於 2026-09-26。網頁版：https://motion.penguindriver.com/a11y

電子書優惠：看到此訊息 24 小時內購買，一律第一階段最低價（私訊時提供優惠碼 P092800）：https://ebook.penguindriver.com
冷錢包 X1 五折優惠碼：Hulk@SFP，官方網站：https://safepal.com/zh-tc/store/x1｜交易所手續費減免註冊：幣託 https://www.bitopro.com/users/sign_up?referrer=3481486016｜BingX https://bingxzone.com/partner/QTKP7NLU｜幣安 https://www.binance.com/join?ref=HULK12