ユーザーがアニメーションを減らす設定を有効にしているかを検出するメディアクエリです。アクセシビリティ向上に重要です。
@media (prefers-reduced-motion: no-preference | reduce)バリアント motion-reduce: を先頭に付けて使います
| motion-reduce:animate-none | @media (prefers-reduced-motion: reduce) { animation: none } |
逆条件（動きを減らす設定がOFFのときだけ動かす）は motion-safe:。
@media (prefers-reduced-motion: reduce) { * { animation: none; } }アニメーションを無効化
@media (prefers-reduced-motion: no-preference) { .box { transition: all 0.3s; } }通常のアニメーション
アクセシビリティのベストプラクティス
AIはアニメーション実装時にこの配慮自体を忘れるのが最大の問題です。前庭障害などで動きに敏感なユーザーのための設定で、「アニメを全部消す」のではなく「動きを減らす（フェードに置き換える等）」のが良い設計です。@media (prefers-reduced-motion: reduce)での上書きをアニメ実装の定型に組み込んでください。
サイト全体のアニメーションにprefers-reduced-motion対応を後付けして。全消しではなくフェード代替で
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。