WordPress添加自定义CSS后页面更新@keyframes规则自动变更问题求解

1. 关键帧命名冲突：你使用的pulse是非常通用的动画命名，你站点使用的Elementor扩展（EAEL，Essential Addons for Elementor）、主题或其他第三方插件本身就预定义了同名的pulse关键帧规则，CSS中同名称的@keyframes规则会遵循「后加载覆盖先加载」的逻辑，你的自定义规则被后续加载的系统自带规则覆盖。
2. CSS加载顺序错误：如果你的自定义CSS是写到主题文件头部、插件自定义CSS区域等加载优先级较低的位置，会比主题、插件自带的CSS更早加载，也会导致同名规则被覆盖。
3. CSS优化工具异常处理：如果你启用了CSS合并、精简类的缓存/优化插件，部分这类工具会识别到重名的@keyframes规则，自动合并或删除它判定为「冗余」的自定义规则，导致你的代码被替换。

• 优先修改关键帧为唯一命名：将@keyframes pulse改为专属命名，比如custom-eael-ujarak-pulse，同时对应修改按钮的animation属性值为新名称，从根源上避免命名冲突，示例代码如下：

a.eael-creative-button.eael-creative-button--ujarak {
    animation: custom-eael-ujarak-pulse infinite 2s;
}

@keyframes custom-eael-ujarak-pulse {
    0% {
        box-shadow: 0 0 0 0 rgb(253 253 253 / 70%);
    }
    70% {
        box-shadow: 0 0 0 20px rgb(255 232 0 / 0%);
    }
    100% {
        box-shadow: 0 0 0 0 rgb(255 232 0 / 0%);
    }
}

• 调整自定义CSS加载优先级：将自定义CSS写入WordPress后台「外观」-「自定义」-「额外CSS」区域，该区域的CSS默认加载优先级最高，晚于所有主题、插件的CSS加载，规则优先级更高。
• 排查优化插件设置：如果使用了WP Rocket、Autoptimize、WP Super Cache等缓存优化插件，可临时关闭CSS合并、CSS精简功能验证问题是否解决，若恢复正常则在插件设置中，将你编写的这段CSS加入排除名单，不让插件处理该部分代码。
• 页面级CSS写入：如果该动画仅用于单页面的按钮，可直接将CSS写入当前页面的页面构建器自定义CSS模块，页面级CSS的加载优先级高于全局CSS，也可避免被全局规则覆盖。

内容的提问来源于stack exchange，提问作者Md. Jafar Khan