prefers-reduced-motion

アニメーションによって画面酔いしてしまったり、動きがつくと内容が理解できなくなるという方は、OS側で視覚効果を減らす設定をしていると思われる。そういった設定をしている場合は、CSSでWebサイトのアニメーションもなくす、あるいは軽減させる指定が可能である。

OS毎の設定方法

  • Windows 10: 設定 → 簡単操作 → ディスプレイ → アニメーションを表示する
  • macOS: システム環境設定 → アクセシビリティ → ディスプレイ → 視差効果を減らす
  • iOS: 設定 → アクセシビリティ → 視覚効果を減らす
  • Android: 設定 → ユーザー補助 → アニメーションの削除

実装方法

メディア特性のうち、prefers-reduced-motion を利用する。これを reduce とすると、アニメーションを削除や減らす設定をしているときに、波括弧内の指定が有効化される。

@media (prefers-reduced-motion: reduce) {
  /* アニメーション効果を削除・軽減の設定をした場合に有効化するスタイル */
}
  • no-preference：システムが把握している設定をユーザーが行っていないことを示す
  • reduce：前庭運動障害者の不快感の引き金となるモーションベースのアニメーションの種類を削除したり置き換えたりするインターフェイスを希望することをユーザーがシステムに通知したことを示す

ここで animation や transition でのCSSアニメーションを調整すればいいが、値を none などにしてまったく動作しないように指定してしまうと、想定通りの表示ではなくなる可能性が高くなる。例えばスクロールで要素をふわっと表示させるような指定をしている場合、多くのケースで opacity を 0 から 1 に変化するよう記述しているだろう。この指定が無効化されると、そもそも要素が表示されなくなってしまう。
そこで、透明・不透明などの指定をなしにして、最初から要素を表示するよう記述してもいいだろう。ただ、アニメーションする要素が多い場合は、全称セレクターで以下のようにアニメーションにかかる時間（再生時間）を 1ms（1ミリ秒）のようなごく短い時間に設定し、パッと変化するように指定できる。keyframes を使ったCSSアニメーションの場合は無限ループの指定もできるが、ここは再生回数を 1 として、繰り返し実行されないようにもできる。
（場合によっては scroll-behavior でのページ内での移動もなしにしたほうがいいだろう）

a {
  font-size: 1.5rem;
  color: #fff;
  background: #0bd;
  display: inline-block;
  padding: 1.5rem 2rem;
  border-radius: .5rem;
  text-decoration: none;
  transition: 1s;
}
a:hover {
  background: #333;
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
inserted by FC2 system