CSS动画结束后闪烁是因为元素默认恢复初始样式，解决方法是设置animation-fill-mode: forwards以保持末帧状态。
CSS动画触发后出现闪烁，通常是因为动画结束后元素恢复到初始状态，导致视觉跳变。解决的关键是用 animation-fill-mode 控制动画前后元素的样式保持行为。
为什么动画结束会闪烁？
默认情况下，CSS动画只在播放期间生效，动画一结束，元素就立刻“退回”到未动画前的样式（比如 transform: none 或 opacity: 1），而这个回退过程没有过渡，人眼就会感知为“闪一下”或“跳一下”。尤其常见于 opacity 淡入、transform 位移/缩放等属性。
用 animation-fill-mode 锁定最终状态
设置 animation-fill-mode: forwards，可让元素在动画结束后**保持最后一帧的样式**，避免回退。这是最常用也最有效的修复方式。
-
forwards：动画结束后保留
@keyframes中100%（或to）定义的样式 -
backwards：动画开始前（延迟期间）应用
0%（或from）的样式（常配合animation-delay使用） -
both：同时启用
forwards和backwards
多数闪烁问题只需加这一行：
立即学习“前端免费学习笔记（深入）”；
animation-fill-mode: forwards;搭配 animation-play-state 或 JS 触发时的注意事项
如果动画通过 JS 切换 animation-play-state: paused/running，或通过 class 增删触发，要确保：
– 动画类名中已声明 forwards
– 不要依赖 transition 覆盖动画结束后的状态（二者易冲突）
– 避免在动画进行中反复增删动画 class，可能重置 fill mode 行为
示例（推荐写法）：
.fade-in {animation: fadeIn 0.3s ease-out;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
其他可能干扰的点
-
重复动画（
animation-iteration-count: infinite）不需要forwards，但若中途暂停，仍建议加以保证暂停时的状态稳定 -
多个动画叠加时，每个都需单独设置
fill-mode，不能继承 -
使用
transform动画时，确保父容器没意外触发will-change: auto或重排，否则也可能引发渲染抖动
