CSS动画闪烁主因是动画结束回退初始状态，解决需用animation-fill-mode: forwards锁定终态、合理设iteration-count避免突变，并用alternate实现平滑往返。
CSS动画重复闪烁，通常是因为动画结束后元素恢复到初始状态，下一次循环开始前出现视觉跳变。解决关键在于用好 animation-fill-mode 和 animation-iteration-count，让动画状态自然衔接、不回跳。
用 animation-fill-mode: forwards 锁定最终状态
默认情况下，动画播放完就“撤回”所有样式，回到未动画前的状态，造成闪烁或闪回。加上 forwards 可让元素保持最后一帧的样式：
.fade-in {
animation: fadeIn 0.3s ease-in;
animation-fill-mode: forwards; /* 关键：停在最后一帧 */
}这样即使动画只播一次，元素也不会突然变回透明或原始位置。
合理设置 animation-iteration-count
闪烁也可能源于误设了无限循环（infinite）却没处理好起止逻辑。比如淡入后又淡出，反复切换就会频闪：
立即学习“前端免费学习笔记（深入）”；
- 只需一次效果 → 设为
1或省略（默认就是1） - 需要循环但避免突变 → 确保关键帧首尾状态一致（如
opacity: 1开始并结束） - 慎用
infinite配合非对称动画（例如只定义0% { opacity: 0 }和100% { opacity: 1 }），否则每次循环都会从 0 重来，造成明显闪烁
配合 animation-direction 实现平滑往返
如果确实需要来回动（比如呼吸效果），别只靠 infinite，改用 alternate 或 alternate-reverse：
.pulse {
animation: pulse 1.5s ease-in-out infinite alternate;
}
@keyframes pulse {
0% { opacity: 0.6; }
100% { opacity: 1; }
}
这样动画正向播完自动反向播，无需跳回起点，视觉更连贯。
检查是否有冲突的 CSS 覆盖
有时闪烁不是动画本身问题，而是外部样式（如 JS 动态加类、媒体查询重置、或父元素 transform 触发重绘）干扰了动画状态。可临时禁用其他样式，或用 DevTools 的 “Animations” 面板逐帧查看实际生效值。
