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>

它以 2Hz 正确地在绿色和透明之间脉冲背景颜色。

（注意：如果我创建 HTML 文件，它也会在 Chrome 中正确运行并正确呈现）。

现在在我的 WordPress 页面中，我使用 Elementor 进行编辑，我创建了一个新的文本块，我给它 class flash，但现在它在原始颜色（蓝色）和透明之间脉动 FOREGROUND 颜色。

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

现在它变得陌生了：如果我将我的 CSS 替换为：

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

...它的行为仍然完全相同。（我将时间段更改为 10 秒以确保 Chrome 没有缓存错误）。它仍然是动画——即使我已经刷新了缓存并删除了动画定义块。

这是一个测试用例。原始代码根本无法为我的插件中的 HTML 元素设置动画！但是我怀疑如果我能够解决这种行为，它将摆脱原来的问题。

如何进一步展开调查？

4

1 回答 1

0

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

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

于 2020-06-20T15:04:18.263 回答