WordPressサイトの制作サポートサービスをご利用いただいているお客様から、
参考サイトのようなアニメーションをさせたくて、プラグインを入れて設定してみたんですが、アニメーションがうまく動作しません。原因は分かりますか？
という内容の連絡がチャットで届きました。
ところが、送られてきたサイトのURLを自分のPCで見てみると、ちゃんとアニメーションしていて問題なさそうでした。
でも、お客様のパソコンで再確認してもらうと、やはり動かないとのこと。
これは、きっと端末固有の問題に違いない
と思って調べてみたところ、原因が見つかりました！
OSの動作設定で普段のGUIの動作にアニメーションを使わないようにすると、ブラウザでWebページを表示したときのアニメーションも動かなくなる（ことがある？）ようです。
例えば、Windows10の場合だと、
設定 → 簡単操作→ディスプレイの
「 Windowsにアニメーションを表示する」を「OFF」にする
「 Windowsにアニメーションを表示する」を「OFF」にする
と、Webページのアニメーションもしなくなります。
どうやらこれは、端末の動作パフォーマンス改善や、アニメーションに酔ってしまう人の快適さの向上などのための設定で、他のOSにも同様の設定があるようです→参考
ちなみに今回の相談で効かなくなったのは、CSSの「animation」を使っている効果だけで、「transition」を使ったアニメーション効果は動作していました。
なので、希望された効果を「transition」だけで実現できるやり方で考えて提案し、問題解決となりました。
ただ、（確認はできていないのですが）OSやブラウザの設定によっては「transition」も動かなくなる可能性も考えられます。
ということで、まとめ。
- Webページをアニメーションの正常動作が前提の設計にするのは、想定通りに見てもらえない人がいるので避けるべき
- Webページにアニメーションを導入する場合は、アニメーションが動作しなかった場合にも破綻しないことを確認しておくべき
ちなみに、こちらは↓僕が以前書いた記事ですが。CSSアニメーション（animation）を使っています。
なので、OSの設定でアニメーションをOFFにすると、やはりまともに動かなくなってしまうことがわかりました…