css按钮hover动画无法重复怎么办_使用animation-iteration-count设置无限循环

按钮 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 控制类名切换会更可靠。