prefers-reduced-motionを使って、視差効果のアニメーションがオフになっている場合の対応をする方法をメモ。
視覚効果の切り替え方
prefers-reduced-motionを試す前に、視差効果のアニメーションを切り替える方法を確認してみます。
Windowsの場合、スタートメニューから 設定 > アクセシビリティ > 視覚効果 > アニメーション効果 からオンオフを切り替えることができます。
Macの場合、システム設定 > アクセシビリティ > ディスプレイ > 視差効果を減らす から切り替えることができます。
対応ブラウザ
対応ブラウザはこちらで、主要なブラウザで特に問題なく対応しています。
サンプルコード
prefers-reduced-motionはreduceとno-preferenceの値を設定することができ、reduceは無効にする設定を行っている場合、no-preferenceは無効にする設定を行っていない場合になります。
まずはreduceの設定を試してみます。
<a class="btn" href="#">設定前</a> <a class="btn reduce" href="#">設定後</a>
ボタンにホバーすると色が反転するアニメーションを設定します。
.btn { ~略~ transition: color 600ms, background-color 600ms; } .btn:hover { color: white; background: black; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
これで視差効果をオフにしている場合は11~15行目の設定が適用され、transitionのアニメーションがオフ(アニメーションなしで色が反転されるのみ)になりました。
prefers-reduced-motion: reduceのデモページ
次にno-preferenceを試してみます。
<div class="rotate"></div>
keyframesで回転し続ける実装をしてみます。
.rotate { ~略~ } @media (prefers-reduced-motion: no-preference) { .rotate { animation: rotate 2s infinite linear; } } @keyframes rotate { 0% { rotate: 0; } 100% { rotate: 360deg; } }
これで視差効果をオフに設定していない場合に4~8行目が適用され、回転のアニメーションが実行されるようになりました。
prefers-reduced-motion: no-preferenceのデモページ
コメントが承認されるまで時間がかかります。