@media (prefers-reduced-motion)

レスポンシブ・関数

ユーザーがアニメーションを減らす設定を有効にしているかを検出するメディアクエリです。アクセシビリティ向上に重要です。

構文

Syntax

@media (prefers-reduced-motion: no-preference | reduce)

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

実行結果

アクセシビリティ対応アニメーション

アニメーションを無効化

@media (prefers-reduced-motion: no-preference) { .box { transition: all 0.3s; } }

実行結果

通常のアニメーション

アクセシビリティのベストプラクティス

Modern browsers