prefers-reduced-motion

prefers-reduced-motionCSSメディア特性で、ユーザーが余計な動きを最少化するよう要求したことを検出するために使用します。

重要: このページの下部に埋め込まれた例は、拡大縮小の動きがありますが、一部の読者には問題があるかもしれません。前庭運動障害をお持ちの方は、アニメーションを見る前に、お使いの端末のモーション軽減機能を有効にしてください。

構文

no-preference
システムが把握している設定をユーザーが行っていないことを示します。
reduce
前庭運動障害者の不快感の引き金となるモーションベースのアニメーションの種類を削除したり置き換えたりするインターフェイスを希望することをユーザーがシステムに通知したことを示します。

ユーザー設定

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

  • GTK/GNOME では、 GNOME Tweaks > General タブ (バージョンによっては Appearance タブ) > Animations がオフになっている場合。
    • 他にも、 gtk-enable-animations = falseGTK 3 configuration file[Settings] に追加する方法もあります。
  • Windows 10: 設定 > 簡単操作 > ディスプレイ > アニメーションを表示する
  • Windows 7: コントロールパネル > コンピューターの簡単操作センター > コンピューターでの作業に集中しやすくします > 必要のないアニメーションは無効にします (可能な場合)
  • macOS: システム設定 > アクセシビリティ > 表示 > 動きの抑制
  • iOS: 設定 > 一般 > アクセシビリティ > 視覚効果を減らす
  • Android 9 以上: 設定 > ユーザー補助 > アニメーションの削除
  • Firefox では about:config: 数値型の設定項目 ui.prefersReducedMotion を追加し、値を 1 とします。この設定の変更は直ちに効果が現れます。

この例では、既定でで拡大縮小アニメーションが使用されています。アクセシビリティ設定で Reduce Motion を有効にしている場合、このアニメーションは前庭運動に影響のないシンプルなディゾルブにトーンダウンされます。

HTML

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

CSS

.animation {
  animation: pulse 1s linear infinite both; 
}

/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */
@media (prefers-reduced-motion) {
  .animation {
    animation-name: dissolve;
  }
}

結果

仕様書

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

ブラウザーの互換性

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

凡例

完全対応  
完全対応
未対応  
未対応

関連情報