Divi主题导航文字动画成因及禁用方法咨询

我之前帮不少用户处理过Divi主题这个默认的菜单加载动画问题，其实就是主题自带的一段CSS过渡/动画效果在搞鬼。咱们直接通过自定义CSS来禁用它就行，步骤很简单：

1. 登录你的WordPress后台，点击外观 > 自定义进入主题定制器，找到附加CSS（Additional CSS）面板。
2. 把下面这段CSS代码粘贴进去：

/* 禁用Divi导航菜单的初始位移动画 */
.et_pb_menu .et_pb_menu__menu {
    animation: none !important;
    transform: none !important;
    left: auto !important;
}

/* 确保菜单项没有额外动画 */
.et_pb_menu .et_pb_menu__item {
    animation: none !important;
    transition: none !important;
}

/* 兼容旧版Divi的菜单类 */
#top-menu .et-menu {
    animation: none !important;
    transition: none !important;
}

3. 点击发布保存修改，然后清空你的浏览器缓存（Ctrl+Shift+R强制刷新），如果网站用了缓存插件（比如WP Rocket、W3 Total Cache），也记得清空插件缓存。

原理说明 #

这段代码的核心是强制移除导航菜单容器和菜单项的animation（动画）、transition（过渡）属性，同时重置初始的left和transform定位，让菜单一开始就固定在正确的位置，不会出现从左侧跳过来的效果。

如果上面的代码还没完全解决问题，你可以用浏览器的开发者工具（按下F12），选中导航菜单元素，查看它的CSS样式，找到带有@keyframes的动画规则，然后用同样的animation: none !important来覆盖它就行。

内容的提问来源于stack exchange，提问作者BaskingRock