为何:hover伪类中animation: forwards不生效？动画可运行但forwards失效

嘿，这个问题我太熟了！之前做项目的时候也踩过这个坑，让我给你拆解一下原因和解决办法～

为啥animation: forwards在:hover里不生效？ #

问题出在:hover伪类的特性上——当你的鼠标离开元素时，:hover状态就被立刻移除了，浏览器会把元素的样式直接恢复到非hover状态，这就导致animation-fill-mode: forwards辛辛苦苦保存的动画最终状态被直接覆盖掉了，哪怕动画已经跑完了也没用。

解决办法 #

方案1：纯CSS实现（推荐，无需JS）

把动画的核心配置（包括forwards）放在元素的基础样式里，用animation-play-state来控制动画的播放和暂停：

/* 基础样式：定义动画并默认暂停 */
.target-element {
  /* 替换成你的动画名称、时长和缓动效果 */
  animation: fade-and-scale 0.6s ease forwards;
  /* 默认状态下暂停动画 */
  animation-play-state: paused;
}

/* hover时启动动画 */
.target-element:hover {
  animation-play-state: running;
}

/* 你的动画关键帧定义 */
@keyframes fade-and-scale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

这样操作后，鼠标hover时动画开始播放，跑完后forwards会牢牢锁住最终状态；就算鼠标移开，因为动画配置在基础样式里没有被移除，这个最终状态会一直保留，完美解决问题！

方案2：JavaScript辅助（适合复杂交互场景）

如果你的动画逻辑比较复杂（比如需要多阶段触发、和其他交互联动），可以用JS给元素添加/移除类来控制动画：

<div class="target-element">Hover to trigger animation!</div>

<script>
const element = document.querySelector('.target-element');

// 鼠标进入时启动动画
element.addEventListener('mouseenter', () => {
  element.classList.add('animate');
});

// 如果你需要鼠标移开后保持状态，就删掉下面这段；如果要恢复初始状态，就保留
// element.addEventListener('mouseleave', () => {
//   element.classList.remove('animate');
// });
</script>

<style>
.target-element {
  /* 元素基础样式 */
  padding: 1rem;
  background: #eee;
}

.animate {
  animation: fade-and-scale 0.6s ease forwards;
}

@keyframes fade-and-scale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0.8;
    transform: scale(1.05);
  }
}
</style>

这种方式灵活性更高，你可以完全控制动画的触发时机和状态保留逻辑。

额外注意点 #

• 检查你的@keyframes定义有没有语法错误，比如关键帧的百分比或from/to是否正确；
• 确认元素没有其他冲突的样式（比如transition属性）覆盖了动画的最终状态；
• 如果是多个动画叠加，要注意animation-fill-mode的作用范围，必要时可以用逗号分隔分别设置。

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