纯CSS实现导航链接加载时左滑淡入效果异常修复

问题原因 #

现有代码存在两个问题导致效果不符合预期：

• 除第一个菜单项外，其余4个导航链接的animation属性未设置both/forwards填充模式。该模式的作用是让元素在动画延迟等待阶段就应用动画第一帧样式（透明+向右偏移），动画结束后保留最终帧样式。缺少该值时，元素在延迟阶段会默认显示为可见、正常定位的状态，等延迟时间到了才跳转到动画起始状态执行效果，就会出现“页面加载时先直接显示链接，之后才触发淡入动画”的异常。
• 现有代码给5个菜单项分别设置了1s到3s的递进延迟，会让链接依次入场，和你需要的“同步触发淡入+滑动动画”的需求不匹配。

修正代码 #

直接替换原有导航动画的CSS代码即可：

/* 导航链接初始兜底样式，避免加载间隙提前显示 */
.elementor-nav-menu li.menu-item-101,
.elementor-nav-menu li.menu-item-100,
.elementor-nav-menu li.menu-item-99,
.elementor-nav-menu li.menu-item-98,
.elementor-nav-menu li.menu-item-97 {
  opacity: 0;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  animation: slideFadeIn 1s ease-in-out 0.3s forwards;
}

@keyframes slideFadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

代码说明：0.3s是动画启动延迟，用来等页面基础DOM渲染完成后再触发效果，你可以根据站点实际加载速度调整这个数值，不需要延迟的话直接改成0s即可。初始状态直接把菜单项设置为透明+右偏100%的动画起始状态，彻底避免CSS解析间隙里元素提前显示在正常位置的问题。

如果后续需要改成链接依次错开入场的效果，只需要给对应菜单项单独设置不同的animation-delay值即可，只要所有动画项都保留forwards填充模式，就不会再出现初始闪烁的问题。

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