按钮hover动画只触发一次是因CSS动画默认不重复，可通过设置animation-iteration-count为infinite实现持续循环，或使用transition替代animation以支持每次悬停都重新播放，推荐transition方案更简洁可靠。
按钮的 hover 动画只触发一次，通常是因为默认情况下 CSS 动画只播放一帧。要让动画在每次鼠标悬停时都能重复播放，关键在于正确设置 animation-iteration-count 并配合合适的触发机制。
使用 animation-iteration-count 实现无限循环播放
如果希望动画在鼠标悬停期间持续循环播放，可以将 animation-iteration-count 设置为 infinite：
.my-button:hover {
animation-name: pulse;
animation-duration: 0.6s;
animation-iteration-count: infinite; /* 持续循环 */
animation-timing-function: ease-in-out;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
这样，只要鼠标停留在按钮上，pulse 动画就会不断重复。
每次悬停都重新触发动画（非无限循环）
如果你想要的是“每次 hover 都完整播放一次动画”，而不是持续循环，问题可能出在浏览器缓存了动画状态。解决方法是通过脱离文档流或重置动画来强制重新触发：
立即学习“前端免费学习笔记（深入）”；
- 利用伪元素触发：让动画作用于 ::after 或 ::before，每次 hover 创建新元素
- JavaScript 强制重绘：移除并重新添加类名，触发重排
- 使用 transition 替代 animation：更适合一次性交互反馈
推荐方案：transition 实现可重复 hover 效果
对于大多数按钮悬停效果（如颜色变化、缩放），transition 更合适且天然支持重复触发：
.my-button {
transform: scale(1);
transition: transform 0.3s ease;
}
.my-button:hover {
transform: scale(1.05);
}
这种方式无需管理动画次数，每次进入和离开 hover 状态都会平滑播放，用户体验更自然。
基本上就这些。animation-iteration-count 设为 infinite 可实现持续循环，但若只是想让每次悬停都播放一次动画，优先考虑 transition 或结合 JS 控制类名切换会更可靠。
