下拉菜单Hover动画在Firefox/Chrome正常，Safari仅首次生效求助

问题：下拉菜单的Hover动画在Firefox和Chrome中每次悬停都能正常触发，但Safari仅首次悬停生效，代码如下：

#nav ul li:hover ul  {
    box-shadow: 0 8px 25px rgba(38, 51, 54, .1);
    border-radius: 0 0 15px 15px;
    background: #fff;
    animation-duration: .8s;
    animation-name: updown; 
}
@keyframes updown {
  0% {
    transform: translateY(30%);
  }

  100% {
    transform: translateY(0%);
  }
}

修复方法 #

Safari的动画触发逻辑与其他浏览器存在差异：动画完成后元素会保留最终状态，再次hover时，浏览器检测不到状态变化，因此不会重新启动动画。以下两种方案可解决该问题：

方案1：重置非hover状态的初始属性

给下拉菜单的默认状态添加初始transform值，确保每次hover时都能从初始状态触发动画：

#nav ul li ul {
    /* 添加上拉菜单默认状态的初始transform */
    transform: translateY(30%);
    /* 可选：默认隐藏下拉菜单，根据布局调整 */
    opacity: 0;
    pointer-events: none;
}

#nav ul li:hover ul  {
    box-shadow: 0 8px 25px rgba(38, 51, 54, .1);
    border-radius: 0 0 15px 15px;
    background: #fff;
    animation-duration: .8s;
    animation-name: updown;
    /* hover时显示下拉菜单 */
    opacity: 1;
    pointer-events: auto;
}

@keyframes updown {
  0% {
    transform: translateY(30%);
  }

  100% {
    transform: translateY(0%);
  }
}

方案2：用transition替代animation（更简洁）

若动画逻辑简单，使用transition替代animation能获得更好的多浏览器兼容性，同时避免Safari的触发问题：

#nav ul li ul {
    box-shadow: 0 8px 25px rgba(38, 51, 54, .1);
    border-radius: 0 0 15px 15px;
    background: #fff;
    transform: translateY(30%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.8s ease, opacity 0.8s ease;
}

#nav ul li:hover ul {
    transform: translateY(0%);
    opacity: 1;
    pointer-events: auto;
}

说明 #

• 方案1通过明确初始状态，让Safari每次hover都能检测到属性变化，从而重新触发动画。
• 方案2使用过渡属性更符合CSS交互的常规写法，代码更简洁，浏览器适配性更强。

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