闪烁-背景CSS动画在JSFiddle中可用，但在WordPress (Elementor)页面上不起作用

Question

(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 2Hz的频率正确地将背景颜色在绿色和透明之间产生脉冲。

(注意:如果我创建一个HTML文件，它也可以正确运行，在Chrome中正确渲染)。

现在在我的WordPress页面中，我用Elementor编辑，我创建了一个新的文本块，我给它类flash，但现在它的前景色在原始颜色(蓝色)和透明之间波动。

作为进一步的测试，我创建了一个原始的HTML块：<span class=flash>bar</span>，并观察到它的行为完全相同。

现在更奇怪了:如果我用以下内容替换我的CSS：

.flash {
    animation: pulse 10s ease-in-out infinite alternate;
}

..。它的行为仍然是完全一样的。(我将周期更改为10秒，以确保Chrome没有缓存错误)。它仍然是动画--尽管我已经刷新了缓存并删除了动画定义块。

这是一个测试用例。原始代码根本无法在我的插件中激活HTML元素！然而，我怀疑，如果我能够解决这个问题，它就会摆脱原来的问题。

如何进一步进行调查？

Answer 1

事实证明，我遇到了双重名称冲突: WordPress有同时定义flash和pulse的.css文件。

如果我将这两个标记都重命名为pi-flash和pi-pulse，问题就解决了。