prefers-reduced-motion

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

構文

no-preference

システムが把握している設定をユーザーが行っていないことを示します。

reduce

ユーザーがシステムに、動作やアニメーションを最小量にして、必要以外の動作を削除したほうが好ましいと通知したことを示します。

ユーザー設定

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

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

例

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

HTML

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

CSS

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

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

.animation {
  background-color: rebeccapurple;
  color: #fff;
  font: 1.2em Helvetica, arial, sans-serif;
  width: 200px;
  padding: 1em;
  border-radius: 1em;
  text-align: center;  
}

/* ----------------------------------------------
 * Generated by Animista on 2018-9-2 13:47:0
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */

@keyframes vibrate {
  0% {
            transform: translate(0);
  }
  20% {
            transform: translate(-2px, 2px);
  }
  40% {
            transform: translate(-2px, -2px);
  }
  60% {
            transform: translate(2px, 2px);
  }
  80% {
            transform: translate(2px, -2px);
  }
  100% {
            transform: translate(0);
  }
}

結果

仕様書

ブラウザーの互換性

関連情報

• An introduction to the reduced motion media query