模擬縮減動作

發行項
01/27/2024

CSS 動畫可能是輔助功能問題。操作系統可藉由包含關閉動畫的選項來解決此問題，以避免使用者混淆和潛在的健康情況相關問題，例如觸發攻擊。

在網頁上，您可以使用 prefers-reduced-motion CSS 媒體查詢來偵測使用者對動畫的喜好設定。然後在測試中包裝動畫程序代碼，以有條件地執行動畫。例如：

header {
  /* The header element is animated */
  animation: slidein 1s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  /* The user prefers reduced motion */
  .header {
    /* Turn off the animation for the header element */
    animation: none;
  }
}

若要測試您的程式代碼是否如預期般運作，而不需要變更操作系統設定，請在 DevTools 中模擬作業系統的精簡動作設定：

若要開啟 DevTools，請以滑鼠右鍵按兩下網頁，然後選取 [ 檢查]。或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 隨即開啟。
在 DevTools 中，按 Ctrl+Shift+P (Windows/Linux) 或 Command+Shift+P (macOS) 開啟 命令功能表。
開始鍵入精簡，選取 [模擬 CSS prefers-reduced-motion] 選項，然後按 Enter：
重新整理網頁，並檢查您的動畫是否執行。

另請參閱

確認頁面可在關閉 UI 動畫時使用 - 使用示範頁面的逐步解說。