合理使用animation-fill-mode和animation-iteration-count可解决hover动画反复触发问题。通过设置animation-fill-mode: forwards使动画完成后保持最终状态，避免样式回跳；结合animation-iteration-count: 1限制动画仅播放一次，防止重复启动。推荐将动画绑定到类名并用JavaScript控制添加，实现精准触发动画；对于简单交互动效，优先使用transition替代animation，利用其天然反向过渡特性，确保鼠标移入移出时动画连贯流畅，提升用户体验。
当CSS元素的hover动画在鼠标移入移出时反复触发、出现闪烁或中断问题，通常是因为每次hover都会重新启动动画，导致视觉上不连贯。通过合理使用animation-fill-mode和animation-iteration-count，可以有效控制动画行为，避免重复异常触发。
理解动画重复触发的原因
hover动画在:hover状态下定义了animation，一旦鼠标移出，动画状态被重置，再次移入时重新播放。如果动画没有完成就中断，再触发就会显得“跳帧”或“抖动”。
常见表现：
- 动画未播完，鼠标移出后重新开始
- 连续快速悬停造成动画叠加
- 元素状态回跳，影响用户体验
使用 animation-fill-mode 保持结束状态
animation-fill-mode: forwards 可以让动画在执行完毕后保留最后一帧的样式，防止回到初始状态。
立即学习“前端免费学习笔记（深入）”；
关键作用： 即使鼠标移出，只要动画播完，元素仍维持最终外观。示例：
.btn {
animation: fadeIn 0.5s ease-in-out;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
.btn:hover {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0.3; }
to { opacity: 1; }
}
这样，动画只在首次进入hover时播放一次，并保持高亮状态。
控制播放次数：animation-iteration-count
设置animation-iteration-count: 1确保动画只运行一次，而不是每次hover都重播。
配合JavaScript可实现更精细控制：
- 添加类名触发动画（而非直接写在hover中）
- 用JS判断是否已播放过，避免重复添加
例如：
element.addEventListener('mouseenter', function() {
if (!this.classList.contains('animated')) {
this.classList.add('animated');
}
});
对应CSS：
.element {
opacity: 0.3;
transition: opacity 0.3s;
}
.element.animated {
animation: fadeIn 0.5s forwards;
}
结合过渡（transition）替代部分动画场景
对于简单效果（如颜色、缩放），使用transition比animation更稳定，天然支持反向过渡。
推荐用于：
- 背景色渐变
- transform 缩放/位移
- 边框阴影变化
示例：
.card {
transform: scale(1);
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.05);
}
这种写法不会出现“重复触发”问题，进出都有平滑过渡。
基本上就这些。合理选择animation-fill-mode和iteration-count，优先考虑transition处理交互动画，能大幅减少hover动画异常问题。不复杂但容易忽略。
