prefers-reduced-motion 対応

モーション

OSのアニメ抑制設定を尊重。乗り物酔いユーザーへの配慮。

Do 良い例

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

Don't 悪い例

常に派手なアニメで揺らす（一部ユーザーが気分悪くなる）

:LiTarget: 原則

OSのアニメ抑制設定を尊重。乗り物酔いユーザーへの配慮。

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

常に派手なアニメで揺らす（一部ユーザーが気分悪くなる）