# @media (prefers-reduced-motion)

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

- カテゴリ: レスポンシブ・関数
- URL: https://www.css-dictionary.com/property/prefers-reduced-motion/

## 構文

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

## Tailwindでは

- バリアント: `motion-reduce:` を先頭に付けて使う
- `motion-reduce:animate-none` → @media (prefers-reduced-motion: reduce) { animation: none }
- 補足: 逆条件（動きを減らす設定がOFFのときだけ動かす）は motion-safe:。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 74+ / Firefox 63+ / Safari 10.1+ / Edge 79+

## コード例

### 例1: アニメーションを無効化

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

### 例2: 通常のアニメーション

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

## TIPS

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

## AIがよく間違えるポイント

AIはアニメーション実装時にこの配慮自体を忘れるのが最大の問題です。前庭障害などで動きに敏感なユーザーのための設定で、「アニメを全部消す」のではなく「動きを減らす（フェードに置き換える等）」のが良い設計です。@media (prefers-reduced-motion: reduce)での上書きをアニメ実装の定型に組み込んでください。

## AIへの依頼文例

- サイト全体のアニメーションにprefers-reduced-motion対応を後付けして。全消しではなくフェード代替で

## 関連プロパティ

- [animation](https://www.css-dictionary.com/property/animation.md)
- [transition](https://www.css-dictionary.com/property/transition.md)