17370845950

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-play-state 或 JS 触发时的注意事项

如果动画通过 JS 切换 animation-play-state: paused/running，或通过 class 增删触发，要确保：
– 动画类名中已声明 forwards
– 不要依赖 transition 覆盖动画结束后的状态（二者易冲突）
– 避免在动画进行中反复增删动画 class，可能重置 fill mode 行为

示例（推荐写法）：

其他可能干扰的点

• 重复动画（animation-iteration-count: infinite）不需要 forwards，但若中途暂停，仍建议加以保证暂停时的状态稳定
• 多个动画叠加时，每个都需单独设置 fill-mode，不能继承
• 使用 transform 动画时，确保父容器没意外触发 will-change: auto 或重排，否则也可能引发渲染抖动