CSS媒體特性 - prefers-reduced-motion

CSS prefers-reduced-motion 媒體特性允許檢查使用者是否在其裝置上啟用了減少不必要動畫的設定。此設定告知裝置的瀏覽器，使用者已選擇一個移除、最小化或替換運動驅動動畫的介面。

可能的值

no-preference − 此值表示使用者未在其裝置上指示任何特定偏好。此關鍵字值被視為 false。
reduce − 此值表示使用者已在其裝置上激活了減少運動設定。此關鍵字值被視為 true。

語法

prefers-reduced-motion: no-preference|reduce;

CSS prefers-reduced-motion - 示例

如果您啟用了減少運動設定，此頁面上的綠色方框將移動得更慢更平滑，背景將變為粉紅色，文字將帶有下劃線。如果您沒有啟用減少運動設定，綠色方框將正常移動，背景將保持綠色。

pulse − 此動畫使元素每四秒脈衝變化大小。
dissolve − 此動畫使元素每兩秒淡入淡出。

按照此連結上的步驟模擬 prefers-reduced-motion 模式並測試以下示例。

這是一個示例 −

<html>
<head>
<style>
   .box {
      animation: pulse 4s linear;
      background-color: green;
      color: white;
      width: 160px;
      padding: 10px;
      border-radius: 5px;
   }
   @media (prefers-reduced-motion) {
      .box {
         animation: dissolve 2s linear;
         background-color: pink;
         text-decoration: overline;
      }
   }
   @keyframes pulse {
      0% {
         transform: scale(0.5);
      }
      50% {
         transform: scale(0.8);
      }
      100% {
         transform: scale(08.);
      }
   }
   @keyframes dissolve {
      0% {
         opacity: 0.7;
      }
      50% {
         opacity: 0.5;
      }
      100% {
         opacity: 0.7;
      }
   }
</style>
</head>
<body>
<div class="box">
   prefers-reduced-motion
</div>
</body>
</html>

CSS prefers-reduced-motion - no-preference 值

帶有 (prefers-reduced-motion: no-preference) 的 @media 查詢將為偏好減少運動的使用者停用動畫（方框將保持靜止）。

這是一個示例 −

<html>
<head>
<style>
   .box {
      width: 220px;
      height: 100px;
      background-color: violet;
      animation: moveRight 2s linear infinite;
   }
   @keyframes moveRight {
      0% {
         transform: translateX(0);
      }
      100% {
         transform: translateX(100%);
      }
   }
   @media (prefers-reduced-motion: no-preference) {
      .box {
         animation: none; 
         transform: none; 
      }
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box">prefers-reduced-motion: no-preference</div>
   </div>
</body>
</html>

CSS prefers-reduced-motion - reduce 值

帶有 (prefers-reduced-motion: reduce) 的 @media 查詢檢查使用者對減少運動的偏好。如果使用者在其裝置上啟用了減少運動設定，則方框將連續迴圈地從左向右水平移動。

這是一個示例 −

<html>
<head>
<style>
   .box {
      width: 220px;
      height: 100px;
      background-color: violet;
      animation: moveRight 2s linear infinite;
   }
   @keyframes moveRight {
      0% {
         transform: translateX(0);
      }
      100% {
         transform: translateX(100%);
      }
   }
   @media (prefers-reduced-motion: reduce) {
      .box {
         animation: none; 
      }
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box">prefers-reduced-motion: reduce</div>
   </div>
</body>
</html>

下表顯示如何在不同作業系統上的 Firefox 中啟用減少運動

作業系統	如何在 Firefox 中啟用減少運動
GTK/GNOME	設定 > 輔助功能 > 檢視 > 減少動畫
較舊版本的 GNOME	GNOME Tweaks > 常規選項卡（或外觀，取決於版本）> 動畫
Plasma/KDE	系統設定 > 工作區行為 -> 常規行為 > 將“動畫速度”設定為“即時”
Windows 10	設定 > 輕鬆訪問 > 顯示 > 在 Windows 中顯示動畫
Windows 11	設定 > 輔助功能 > 視覺效果 > 動畫效果
macOS	系統偏好設定 > 輔助功能 > 顯示 > 減少運動
iOS	設定 > 輔助功能 > 運動
Android 9+	設定 > 輔助功能 > 刪除動畫
Firefox about:config	新增一個名為 ui.prefersReducedMotion 的數字首選項，並將其值設定為 0 表示完全動畫，或設定為 1 表示偏好減少運動。

列印頁面