prefers-reduced-motion

prefers-reduced-motionCSSメディア特性で、ユーザーがアニメーションや動作を最少化するよう要求したことを検出するために使用します。

構文

no-preference
システムが把握している設定をユーザーが行っていないことを示します。
reduce
ユーザーがシステムに、動作やアニメーションを最小量にして、必要以外の動作を削除したほうが好ましいと通知したことを示します。

ユーザー設定

Firefox では、 reduce の要求は以下の場合に尊重されます。

  • GTK/Gnome では、 gtk-enable-animations が false に設定された場合です。これは GNOME Tweaks (バージョンによって Appearance タブまたは General タブ) から設定できます。
    • 他にも、 gtk-enable-animations = falseGTK 3 configuration file[Settings] に追加する方法もあります。
  • Windows 10 では、設定 > 簡単操作 > ディスプレイ > アニメーションを表示する、です。
  • macOS では、システム設定 > アクセシビリティ > 表示 > 動きの抑制、です。

この例は、アクセシビリティ設定で動きを抑制するよう設定しないと煩いアニメーションが表示されます。

HTML

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

CSS

.animation {
  animation: vibrate 0.3s linear infinite both; 
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

結果

仕様書

仕様書 状態 備考
Media Queries Level 5
prefers-reduced-motion の定義
編集者草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
prefers-reduced-motion media feature
実験的
Chrome 完全対応 74Edge 未対応 なしFirefox 完全対応 63IE 未対応 なしOpera 完全対応 62Safari 完全対応 10.1WebView Android 完全対応 74Chrome Android 完全対応 74Firefox Android 完全対応 64Opera Android 完全対応 53Safari iOS 完全対応 10.3Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報