こんにちは！ケインコスゲです。
今回は、なんともニッチと思われるかもしれない、 CSSのprefers-reduced-motionについてブログにしてみたいと思います。
完全に開発者・製作者の方向けの内容になりますが、アニメーションをCSSで設定することがある方はもしかしたら一度は経験したことがある内容も含まれているかもしれないので、ぜひご覧くださいね！
目次
CSSのprefers-reduced-motionを知ったきっかけ
先日、とあるLP（ランディングページ）サイトのHTML・CSSコーディングのお仕事を、友人に紹介させていただいた機会がありました。
そのLP（ランディングページ）サイトは、なんとも派手なアニメーションを多用する仕様になっておりまして、その仕様に基づきまして、
animate.cssというライブラリを用いてアニメーションを実装していました。
そして依頼した方からあがってきたデータの動作確認のために僕が所有しているiPhoneでデータを確認してみたところ、なんとanimate.cssで設定したアニメーションが一切動かないではありませんか！
うーん、困った・・・特にエラーが出ているわけでもなく、悩みながらanimate.cssのソースコードの中身を眺めていたところ、「prefers-reduced-motion」という見慣れないメディアクエリーの記述を発見！
@media (prefers-reduced-motion: reduce) {
}
それが僕とprefers-reduced-motionの出会いでした。
CSSのprefers-reduced-motionを理解する上で知っておきたいiPhoneの「視差効果を減らす」設定
さて、prefers-reduced-motionは実際にどんな意味があるのでしょうか。
みんな大好きMDNのページにその答えが書かれていました。
iPhoneでは、端末側の設定で「視差効果を減らす」という設定があります。
上記のブログなどでも紹介されているのですが、iPhoneで視差効果を減らす設定をすると、iPhoneで画面切り替えをしたりする際に、簡単にいうと派手なアニメーション効果がなくなるようになっています。
上記にもあるように、iOS7からデフォルトで画面切り替えをする際に、派手なアニメーションが設定されるようになりました。
僕もiOS7に切り替えた当時は、このアニメーション設定に酔ってしまい、困ったことを覚えています・・・
そういった派手なアニメーション効果を無効にしたりするために生まれたのが「視差効果を減らす」設定なのでした。
CSSのprefers-reduced-motionによる設定効果の正体
ここまでiPhoneの視差効果を減らす設定についてご説明させていただきました。ここから本題になりますが、CSSのprefers-reduced-motionによる設定の効果です。
簡単にいうと、iPhoneで「視差効果を減らす」の設定をしている際には、CSSのprefers-reduced-motionで設定したメディアクエリー内に書かれたCSSの内容が適用されるというものになっているのです！
冒頭に紹介させていただいたanimate.cssが動かない問題については、animate.cssの一番下の方に
@media (prefers-reduced-motion: reduce) {
animation: unset !important;
transition: none !important;
}
という記述が書かれており、「視差効果を減らす設定をしている場合はanimate.cssで指定する一切のCSSアニメーション設定を無効にする」という指定がなされていたわけなのです！
まとめ
ということで、今回はCSSのprefers-reduced-motionについてご紹介させていただきました！
知らない間にCSSにも色々なものが生まれているのですね！勉強の日々だなと改めて痛感させられたのでした・・・
