如何实现鼠标停止悬停时让按钮内图标动画完整播放？

这个场景我太熟悉了！纯CSS确实没法实现“鼠标离开后让动画完整播放完毕”的需求——因为:hover是状态触发，一旦鼠标移开，这个状态立刻消失，对应的动画规则就会被终止，元素直接跳回初始位置。不过我们用几行JavaScript就能完美解决这个问题，核心思路是用类来控制动画的触发，让动画跑完整个周期后再移除类，而不是依赖:hover的状态变化。

步骤1：修改CSS，用类代替:hover触发动画 #

首先把原来的:hover触发逻辑改成类触发，同时调整动画的关键帧，让它最后能自然回到初始位置（如果需要的话）：

.mail.animate i {
  animation: correo 1s;
}

@keyframes correo {
  20% { transform: translate(-10px); }
  80% { transform: translate(100px); }
  81% { transform: translate(0, -50px); }
  100% { transform: translate(0); /* 让动画最后回到初始位置 */ }
}

步骤2：用JavaScript控制动画的生命周期 #

通过监听鼠标的移入事件添加动画类，再监听动画结束事件来移除类，这样不管鼠标什么时候离开，动画都会完整跑完：

const mailButton = document.querySelector('.mail');
const icon = mailButton.querySelector('i');

// 鼠标移入时添加动画类（避免重复触发）
mailButton.addEventListener('mouseenter', () => {
  if (!mailButton.classList.contains('animate')) {
    mailButton.classList.add('animate');
  }
});

// 动画结束后移除类，让下次hover能重新触发
icon.addEventListener('animationend', () => {
  mailButton.classList.remove('animate');
});

为什么这个方案有效？ #

• 原来的:hover是状态驱动，状态消失动画立刻终止；现在改成类驱动，动画的启动和停止完全由类的存在和动画结束事件控制。
• 不管鼠标在动画播放过程中什么时候离开，animationend事件都会在动画完整跑完后才触发，此时才移除类，元素不会中途跳回。

如果你希望动画结束后停在最后一个关键帧的位置，只需要给animation属性加上forwards值：

.mail.animate i {
  animation: correo 1s forwards;
}

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