prefers-reduced-motion

語法

no-preference

表示使用者未在其裝置上做出任何偏好設定。此關鍵字值評估為 false。

reduce

表示使用者已在其裝置上啟用減少運動的設定。reduce 關鍵字值評估為 true；因此，@media (prefers-reduced-motion) 等同於 @media (prefers-reduced-motion: reduce)。

使用者偏好

對於 Firefox，如果滿足以下條件，則會遵守 reduce 請求：

• 在 GTK/GNOME 中：設定 > 輔助功能 > 視覺 > 減少動畫 已開啟。

  • 在舊版 GNOME 中，GNOME Tweaks > 通用選項卡（或外觀，取決於版本）> 動畫 已關閉。
  • 或者，將 gtk-enable-animations = false 新增到 GTK 3 配置檔案的 [Settings] 塊中。

• 在 Plasma/KDE 中：系統設定 > 工作區行為 -> 通用行為 > "動畫速度" 設定為最右側的 "即時"。

• 在 Windows 10 中：設定 > 輕鬆使用 > 顯示 > 在 Windows 中顯示動畫。

• 在 Windows 11 中：設定 > 輔助功能 > 視覺效果 > 動畫效果

• 在 macOS 中：系統設定 > 輔助功能 > 顯示 > 減少動態效果。

• 在 iOS 中：設定 > 輔助功能 > 動態效果。

• 在 Android 9+ 中：設定 > 輔助功能 > 移除動畫。

• 在 Firefox 的 about:config 中：新增一個名為 ui.prefersReducedMotion 的數字首選項，並將其值設定為 0 表示完整動畫，或設定為 1 表示偏好減少運動。對此首選項的更改會立即生效。

示例

此示例使用縮放動畫來演示 prefers-reduced-motion。如果您在裝置的輔助功能偏好設定中啟用減少運動的設定，prefers-reduced-motion 媒體查詢將檢測您的偏好，並且減少運動規則中的 CSS（具有相同的特異性，但在 CSS 源順序中靠後）將優先。因此，盒子上的動畫將減弱為 dissolve 動畫，這是一種更柔和的動畫，不會觸發前庭運動。

減弱動畫縮放

HTML

<div class="animation">animated box</div>

CSS

.animation {
  animation: pulse 1s linear infinite both;
  background-color: purple;
}

/* Tone down the animation to avoid vestibular motion triggers. */
@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: dissolve 4s linear infinite both;
    background-color: green;
    text-decoration: overline;
  }
}

.animation {
  color: white;
  font: 1.2em sans-serif;
  width: 10em;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes dissolve {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

結果

您可以在您的裝置上啟用減少運動的設定，以檢視動畫縮放的變化。此示例使用背景顏色和文字上的線條，以視覺方式突出顯示當設定啟用或停用時關鍵幀動畫的切換。

規範

瀏覽器相容性

另見

• Sec-CH-Prefers-Reduced-Motion HTTP 標頭 使用者代理客戶端提示
• CSS-Tricks 上關於減少運動媒體查詢的介紹 (2019)
• WebKit 部落格上關於運動的響應式設計 (2017)