スタッフブログ

ユーザーの設定をCSSアニメーションに反映させる

2025年01月17日（金）

こんにちは。田村です。

CSSアニメーションはリッチな動きが表現でき便利ですがユーザーによってはアニメーションをオフにしたいということがあります。
OS側で「動きをへらす」という設定があり、これをCSS側で判断したい場合はありました。

prefers-reduced-motion とは？

prefers-reduced-motion は、ユーザーのOSやブラウザの設定に基づいて、動きの多いアニメーションやエフェクトを制御するためのCSSメディアクエリです。
OSの設定で「動きを減らす」という設定が提供されており、この設定が有効になっているユーザーに対し、アニメーションを軽減するスタイルを適用できます。

次のように読むそうです。
prefers-reduced-motion（プリファーズ・リデュースド・モーション）
prefers（プリファーズ）：好む
reduced（リデュースド）：減少した
motion（モーション）：動き

どんな場面で使えるのか？

動きが苦手なユーザーへの配慮
激しいアニメーションや過剰な動きを好まないユーザーに快適なユーザー体験を提供できます。
アクセシビリティ向上
WCAGの達成基準にも含まれています。
「達成基準 2.3.3: インタラクションによるアニメーションを理解する」

達成基準 2.3.3: インタラクションによるアニメーションを理解する

waic

基本的な使い方

prefers-reduced-motion は、CSSのメディアクエリとして以下のように使います。

/* 通常時のスタイル */
.animated-box {
    animation: bounce 2s infinite;
}

/* 動きを抑える設定の場合 */
@media (prefers-reduced-motion: reduce) {
    .animated-box {
        animation: none;
    }
}