ユーザ設定でアニメーションの有無を変える？「prefers-reduced-motion」の紹介！
今回はユーザが設定をするだけでアニメーションの有無を切り替えできるメディアクエリを紹介します！これは先日リリースされたGoogle Chrome 74でも実装されたものになります！ちなみにFireFoxなどではすでに実装されていましたね。
この機能はユーザ側のPCに設定されている視差効果の有無を取得してスタイルを当てていくメディアクエリになります。
「prefers-reduced-motion」の使い方
それでは、実際に使ってみましょう！！
といっても簡単で、CSS上に以下のように記述するだけです。
@media (prefers-reduced-motion: reduce) { .reduce { animation: none; } }
この例で言うと、「reduce」クラスをアニメーションしている要素につけるとユーザ設定でアニメーションの有無を制御できるようになります。
勘の良い方は気付いたかもしれないですが、アニメーション以外でも設定可能です！
じゃあユーザ設定ってどうやるの！？
