prefers-reduced-motion
警告: このページの下部に埋め込まれた例は、拡大縮小の動きがありますが、一部の読者には問題があるかもしれません。前庭運動障害をお持ちの方は、アニメーションを見る前に、お使いの端末のモーション軽減機能を有効にしてください。
prefers-reduced-motion は CSS のメディア特性で、ユーザーが余計な動きを最少化するよう要求したことを検出するために使用します。この設定は、ユーザーがモーションベースのアニメーションを削除、縮小、または置き換えるインターフェイスを推奨していることを、端末のブラウザーに伝えるために使用します。
このようなアニメーションは、前庭運動障碍のある人に不快感を引き起こす可能性があります。大きなオブジェクトを拡大縮小したりパンなどしたりするアニメーションは、前庭運動を引き起こす可能性があります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 74 | 79 | 63 | 10.1 | 74 | 10.3 | |
| The HTTP Sec-CH-Prefers-Reduced-Motion request header is a user agent client hint which indicates the user agent's preference for animations to be displayed with reduced motion. | 108 | 108 | | | 108 | |
基本構文
CSS
/* Disable animations when reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Apply animations only when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
.hero {
animation: fadeIn 0.6s ease-out;
}
}ライブデモ
実務での使いどころ
-
アクセシブルなアニメーション
パララックスやスクロール連動アニメーションを、モーション酔いしやすいユーザーに対して無効化する。
-
段階的なアニメーション導入
デフォルトはアニメーションなしにし、no-preference の場合のみアニメーションを追加する安全なアプローチ。
注意点
- すべてのアニメーションを一律に無効化するのではなく、意味のあるアニメーション（進捗表示など）は残すことも検討する。
アクセシビリティ
- WCAG 2.1 の達成基準 2.3.3（インタラクションによるアニメーション）への対応に直結する。
- アニメーションを使うすべてのサイトで対応を推奨する。