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