ウェブサイトを閲覧している際に、（大抵はスクロールとともに）ブロックがカットインやフェードインなどのアニメーション／遷移動作をしてくることがあります。

これらのエフェクトはユーザー体験を高めてくれる効果が期待できますが、反面「シンプルに情報だけを得たい」というユーザーにとっては煩わしいものです。

そのようなユーザーのために、エフェクトを無効化する方法をウェブ制作者側で提供することが可能です。方法は簡単で、CSSに下記の記述を加えるだけです。

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
  }
}

このメディアクエリは、ユーザー側が「アニメーションを無効化したい」という設定をしている際にのみ適用されるという記述方法です。※ IEは非対応

無効化の設定方法はOSにより異なります。

アニメーションの無効化設定方法

• macOS では、システム設定 > アクセシビリティ > 表示 > 動きの抑制、です。
• iOSでは、設定 > アクセシビリティ > 動作 > 視差効果を減らす をオン、です。
• Windows 10 では、設定 > 簡単操作 > ディスプレイ > アニメーションを表示する、です。
• Androidでは、設定 > ユーザー補助 > アニメーションの削除 をオン、です。

この設定をした上で、冒頭のCSSが適用されたウェブサイトを閲覧すると、アニメーションが無効化された状態になります。

そのため冒頭のCSSが適用されていないウェブサイトを閲覧した場合は、特に何も変わりません・・・

ブラウザでプラグインが使えるようであれば、サイトのCSSを調整できるものを使えば、無理やりCSSを適用させることも可能です。

• Google Chrome : Stylus
• Firefox : Stylus

制作サイドでの調整が必要

冒頭のCSSを使えばCSSアニメーションは無効化されますが、大抵JavaScriptと連動してアニメーションタイミングを決定しているため、JavaScript側でも調整が必要な場合が多いです。

弊社制作のラブレ様のウェブサイトで冒頭CSSのみを適用し、アニメーションを無効化して表示してみました。

表示順の遅延処理などはJavaScriptで処理していましたので、アニメーションの痕跡が残ってしまっていますね。

JavaScriptでアニメーション無効化設定の状態を判定するには下記のように記述します。

if (typeof window !== undefined
  && window.matchMedia
  && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    // 視差効果を減らす設定がオンの場合の処理
}

参考サイト

prefers-reduced-motion – CSS: カスケーディングスタイルシート | MDN
meguro.css 第8回 LTメモ | dkrkのブログ