CSS定义的@keyframes在JavaScript事件监听中无法生效，请求排查

核心问题：动画属性拼写错误 #

你代码里的JavaScript部分，设置动画时把填充模式关键字拼错了——forward应该是forwards，这是CSS动画里控制动画结束后保持最后一帧状态的关键属性，少了这个s，动画执行完会立刻回到初始的透明状态，看起来就像完全没生效。

修复后的代码 #

JavaScript 部分 #

const navSlide = () => {
  const burger = document.querySelector('.burger')
  const nav = document.querySelector('.nav-links')
  const navLinks = document.querySelectorAll('.nav-links li')

  burger.addEventListener('click', () => {
    nav.classList.toggle('nav-active')

    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = ''
      } else {
        // 修正 forward 为 forwards
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`
      }
    })
  })
}
navSlide()

额外优化建议 #

你原来设置的延迟时间index /7 +2.5s过长，点击汉堡按钮后要等2.5秒才开始出现导航项，交互体验很差，建议改成index /7 +0.3s，这样导航项会依次快速弹出，更符合移动端导航的交互逻辑。

补充说明 #

• CSS 里的@keyframes navLinkFade写法完全正确，不需要修改
• 媒体查询里给.nav-links li设置opacity:0的初始状态没问题，动画会通过forwards把 opacity 保持为1

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