要让:hover触发的CSS动画重复播放，需重置动画状态。1. 通过改变opacity等属性强制重绘；2. 用JavaScript移除并重新添加动画类；3. 设置animation-iteration-count实现循环；4. 利用伪元素触发重绘。核心是每次悬停时重激活动画。
当使用 :hover 触发 CSS 动画时，如果动画只播放一次，再次悬停不会重新播放，这通常是因为浏览器将元素视为“已执行过动画”，没有触发重排或重置动画状态。即使你设置了 animation-iteration-count: 1，也无法在每次悬停时自动重新开始动画。
要让 hover 触发的动画可以重复播放，关键是每次离开再进入时重置动画状态。以下是几种有效解决方法：
1. 利用 animation 配合 opacity 或 visibility 重绘
通过改变一个影响布局或渲染的属性（如 opacity），强制浏览器在每次悬停时重新渲染动画。
.box {
display: inline-block;
opacity: 0.99; /* 初始轻微透明，避免首次无变化 */
transition: opacity 0.01s;
}
<p>.box:hover {
animation: slideIn 0.5s ease forwards;
opacity: 1;
}</p><p>@keyframes slideIn {
from { transform: translateX(-20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
每次移出再进入，opacity 值发生变化，触发重绘，从而重新播放动画。
立即学习“前端免费学习笔记（深入）”；
2. 使用 JavaScript 重置动画类名
更可靠的方法是通过 JS 在离开时移除动画类，确保下次进入能重新触发。
const boxes = document.querySelectorAll('.box');
<p>boxes.forEach(box => {
box.addEventListener('mouseenter', function() {
this.style.animation = 'none';
setTimeout(() => {
this.style.animation = 'slideIn 0.5s ease';
}, 10);
});</p><p>box.addEventListener('mouseleave', function() {
this.style.animation = '';
});
});
利用 setTimeout 强制浏览器完成样式重置，再重新应用动画，实现每次悬停都播放。
3. 设置 animation-iteration-count 实现循环播放
如果你希望动画在持续悬停期间就循环播放，可以用 animation-iteration-count: infinite 或指定次数。
.loop-on-hover:hover {
animation: spin 1s linear infinite;
}
<p>@keyframes spin {
to { transform: rotate(360deg); }
}
这种方式适合加载动画、旋转图标等需要持续播放的场景，但不会“重复触发”单次动画，而是持续循环。
4. 使用 ::before / ::after 伪元素重置
有时可通过操作伪元素来绕过动画缓存问题。例如每次 hover 改变伪元素内容或状态，间接触发重绘。
不过这种方法适用性较窄，推荐优先使用前两种方案。
基本上就这些。关键在于理解：CSS 动画一旦完成，在相同状态下不会“倒带重播”。必须通过样式重置或 DOM 重绘来重新激活。配合 animation-iteration-count 可控制循环行为，但无法解决“只播一次”的重播问题。真正可重复播放，还得靠重置机制。
