prefers-reduced-motionでアニメーション（視差効果）を減らす設定をしたデバイスに対応させる

prefers-reduced-motionでアニメーション（視差効果）を減らす設定をしたデバイスに対応させるアニメーションのあるWebページって、見るのも作るのも好きなんですが、みなさんはいかがでしょう？中には動きが苦手で目が疲れてしまう、画面酔いしてしまう…なんていう方もいらっしゃるかと思います。今回はアニメーションが苦手な方のためにWebサイト側でできることを考えてみます。 アニメーションを減らす設定アニメーションによって画面酔いしてしまったり、動きがつくと内容が理解できなくなるという方は、OS 側で視覚効果を減らす設定をしているかと思います。そういった設定をしている場合は、CSS で Web サイトのアニメーションもなくす、あるいは軽減させる指定が可能です。 設定方法まずはアニメーションを減らすための OS 側の設定方法から紹介します。 Windows 10: 設定 → 簡単操作

[daizo1117]

“acOS: システム環境設定 → アクセシビリティ → ディスプレイ → 視差効果を減らす iOS: 設定 → アクセシビリティ → 視覚効果を減らす Android: 設定 → ユーザー補助 → アニメーションの削除”

[yasu-log]

【B!】prefers-reduced-motionでアニメーション（視差効果）を減らす設定をしたデバイスに対応させる | Webクリエイターボックス