(MacOS / Chrome) 次のコードがあります。
.flash {
animation: pulse 1s ease-in-out infinite alternate;
}
@keyframes pulse {
0% { background: transparent; }
100% { background: green; }
}
<span class=flash>Foo</span>
緑と透明の間で背景色を 2 Hz で正しくパルスします。
(注:HTMLファイルを作成すると、Chromeでも正しくレンダリングされます)。
今、WordPress ページで Elementor を使って編集し、新しいテキスト ブロックを作成して classflash
を指定しましたが、元の色 (青) と透明の間で FOREGROUND 色をパルスしています。
さらなるテストとして、未加工の HTML ブロックを作成します<span class=flash>bar</span>
。これがまったく同じように動作することを観察します。
CSS を次のように置き換えると、次のようになります。
.flash {
animation: pulse 10s ease-in-out infinite alternate;
}
...それはまだまったく同じように動作します。(Chrome でキャッシュ エラーが発生しないように、期間を 10 秒に変更しました)。キャッシュをフラッシュしてアニメーション定義ブロックを削除しても、まだアニメーション化されています。
これはテストケースです。元のコードでは、プラグインの HTML 要素をまったくアニメーション化できませんでした。ただし、この動作を解決できれば、元の問題が解決されるのではないかと思います。
調査をさらに進めるにはどうすればよいですか?