(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 Гц.
(Примечание: он также работает правильно и правильно отображается в Chrome, если я создаю файл HTML).
Теперь на моей странице WordPress я редактирую с помощью Elementor, создаю новый текстовый блок, присваиваю ему класс flash, но теперь он пульсирует цветом ПЕРЕДНЕГО ПЛАНА между исходным цветом (синим) и прозрачным.
В качестве дальнейшего теста я создаю необработанный блок HTML: <span class=flash>bar</span> и наблюдаю, что он ведет себя точно так же.
Теперь это становится более странным: если я заменю свой CSS на:
.flash {
animation: pulse 10s ease-in-out infinite alternate;
}
... он по-прежнему ведет себя точно так же. (Я изменил период на 10 секунд, чтобы убедиться, что в Chrome нет ошибки кеша). Он по-прежнему анимируется, даже несмотря на то, что я очистил кеш и удалил блок определения анимации.
Это тестовый случай. Исходный код вообще не смог анимировать HTML-элемент в моем плагине! Однако я подозреваю, что если я смогу решить это поведение, это избавит от исходной проблемы.
Как продолжить расследование?
