CSS

A way to reduce animations based on the user's motion preference settings.

prefers-reduced-motion

prefers-reduced-motion は、ユーザーが動きの少ない画面表示を希望しているかどうかを、CSSで判断できる機能（メディアクエリ）です。

これは、アニメーションやトランジションが苦手な人、特に乗り物酔いや目の負担を感じやすい方のために、「あまり動かない表示」へ切り替えるヒントとして使われます。

たとえば、次のような使い方ができます：

CSS

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

このコードは、ユーザーがOSやブラウザの設定で「動きを減らす」をオンにしているときに、アニメーションやトランジションを停止するという意味です。

この仕組みを使うことで、ユーザーの体調や感覚に配慮した、やさしいWeb体験を提供することができます。