1

(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 要素をまったくアニメーション化できませんでした。ただし、この動作を解決できれば、元の問題が解決されるのではないかと思います。

調査をさらに進めるにはどうすればよいですか?

4

1 に答える 1