prefers-reduced-motion は CSS のメディア特性で、ユーザーがアニメーションや動作を最少化するよう要求したことを検出するために使用します。
構文
no-preference- システムが把握している設定をユーザーが行っていないことを示します。
reduce- ユーザーがシステムに、動作やアニメーションを最小量にして、必要以外の動作を削除したほうが好ましいと通知したことを示します。
ユーザー設定
Firefox では、 reduce の要求は以下の場合に尊重されます。
- GTK/Gnome では、
gtk-enable-animationsが false に設定された場合です。これは GNOME Tweaks (バージョンによって Appearance タブまたは General タブ) から設定できます。- 他にも、
gtk-enable-animations = falseを GTK 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;
}
}
.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);
}
}
結果
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| Media Queries Level 5 prefers-reduced-motion の定義 |
編集者草案 | 初回定義 |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
prefers-reduced-motion media feature | Chrome 完全対応 74 | Edge 未対応 なし | Firefox 完全対応 63 | IE 未対応 なし | Opera 完全対応 62 | Safari 完全対応 10.1 | WebView Android 完全対応 74 | Chrome Android 完全対応 74 | Firefox Android 完全対応 64 | Opera Android 完全対応 53 | Safari iOS 完全対応 10.3 | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。