Web制作時に、画面を読み込んだときや切替時に表示されるエントランスアニメーションが機能していないことに気づきました。

デフォルトのブラウザはSafariを使用しているのですが、ブラウザの問題かと思ってChromeとFirefoxでも試したのですが、機能しない。Wordpressのプラグイン又はjsが干渉しているのかもと、プラグインとjsのリンクをすべて外しても変わらない。しかし、スライドショーやカルーセルといったjQuery系は、何故か問題なく動いている。ググっても同じような事象はヒットしない。うーん、このままではアニメーションを利用した作業でプレビューする事ができない、と困っていたところ、思い出しました。

原因はOSのシステム環境設定にあったのです。少しでも軽くしようと、アクセシビリティの「視差効果を減らす」を設定したのを思いだし、チェックを外したところ問題なくアニメーションが動き出しました！

視差効果とは、iOSでは傾きに応じて壁紙やアイコンが動き、見やすくする機能なのですが、Macでは画面が切り替わる際のモーションエフェクトなどが、視差効果です。具体的には、ソフトのフルスクリーン化や、ミッションコントロールやランチパッドの時に、ふわっとズームしたりするエフェクトがそうですが、まさかブラウザのアニメーションにも影響するとは思いませんでした。