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