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 以上: 設定 > ユーザー補助 > アニメーションの削除
- 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;
}
}
.animation {
background-color: #306;
color: #fff;
font: 1.2em sans-serif;
width: 10em;
padding: 1em;
border-radius: 1em;
text-align: center;
}
@keyframes pulse {
0% { transform: scale(1); }
25% { transform: scale(.9); }
50% { transform: scale(1); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}
@keyframes dissolve {
0% { opacity: 1; }
50% { opacity: 0.8; }
100% { opacity: 1; }
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
Media Queries Level 5 prefers-reduced-motion の定義 |
編集者草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- An Introduction to the Reduced Motion Media Query (CSS Tricks)
- Responsive Design for Motion (WebKit Blog) includes vestibular motion trigger examples.