WordPressサイトの制作サポートサービスをご利用いただいているお客様から、

参考サイトのようなアニメーションをさせたくて、プラグインを入れて設定してみたんですが、アニメーションがうまく動作しません。原因は分かりますか？

という内容の連絡がチャットで届きました。

ところが、送られてきたサイトのURLを自分のPCで見てみると、ちゃんとアニメーションしていて問題なさそうでした。

でも、お客様のパソコンで再確認してもらうと、やはり動かないとのこと。

これは、きっと端末固有の問題に違いない

と思って調べてみたところ、原因が見つかりました！

OSの動作設定で普段のGUIの動作にアニメーションを使わないようにすると、ブラウザでWebページを表示したときのアニメーションも動かなくなる（ことがある？）ようです。

例えば、Windows10の場合だと、

設定 → 簡単操作→ディスプレイの

「 Windowsにアニメーションを表示する」を「OFF」にする

と、Webページのアニメーションもしなくなります。

どうやらこれは、端末の動作パフォーマンス改善や、アニメーションに酔ってしまう人の快適さの向上などのための設定で、他のOSにも同様の設定があるようです→参考

ちなみに今回の相談で効かなくなったのは、CSSの「animation」を使っている効果だけで、「transition」を使ったアニメーション効果は動作していました。

なので、希望された効果を「transition」だけで実現できるやり方で考えて提案し、問題解決となりました。

ただ、（確認はできていないのですが）OSやブラウザの設定によっては「transition」も動かなくなる可能性も考えられます。

ということで、まとめ。

ちなみに、こちらは↓僕が以前書いた記事ですが。CSSアニメーション（animation）を使っています。

なので、OSの設定でアニメーションをOFFにすると、やはりまともに動かなくなってしまうことがわかりました…

端末によってWebページのアニメーションが動いたり動かなかったり