prefers-reduced-motionを使ってみる

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のデモページ