动画结束后元素闪回原位是因为 animation-fill-mode 默认为 none，需设为 forwards 并确保关键帧定义完整、无样式覆盖、JS 时机正确。
动画结束后元素闪回原位，是因为默认的 animation-fill-mode 是 none，动画一结束就恢复初始样式。加 forwards 就能保持最后一帧状态，但光写 forwards 不一定管用——得看怎么写、写在哪、有没有被覆盖。
animation-fill-mode: forwards 必须和 animation 一起声明或单独设置
很多人只在 CSS 里写了 animation-fill-mode: forwards，但没配 animation 或写在了错误位置，结果无效。
-
animation-fill-mode是独立属性，但它的效果只对已触发的animation生效；没有动画，它不干活 - 推荐直接写在
animation简写里，避免遗漏：animation: slideIn 0.3s ease-out forwards; - 如果用分开写法，必须确保
animation-fill-mode在同一选择器下、且没有被后续规则覆盖（比如被重置为none）
forwards 不生效的常见原因
即使写了 forwards，仍闪回，大概率是下面这几个点出了问题：
- 动画关键帧（
@keyframes）里没定义最终状态：比如只写了0% { opacity: 0; }和50% { opacity: 1; }，但没写100%，浏览器会用初始值“补全”，导致forwards拿到的是错的终值 - 元素有内联样式或更高优先级的 CSS 覆盖了动画结束后的样式，比如
style="opacity: 0"会强行压过forwards的效果 - 用了
animation-direction: alternate且没配animation-iteration-count: 1，来回播两次，forwards会停在反向的最后一帧（可能不是你想要的）
对比 none / forwards / both 的实际行为
不同 fill-mode 值影响动画前/后是否保留样式，容易混淆：
立即学习“前端免费学习笔记（深入）”；
-
none：动画前后都不保留，只在播放中生效 → 闪回最常见原因 -
forwards：只保留动画最后一帧的样式（即100%或to里的声明）→ 多数场景要这个 -
both：等价于forwards+backwards，即动画前用0%样式，动画后用100%样式 → 如果你同时设置了animation-delay，backwards部分才起作用
示例：想让元素淡入后保持可见，关键帧必须明确写 100% { opacity: 1; }，否则 forwards 也救不了：
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.element {
animation: fadeIn 0.4s ease-in forwards;
}
JavaScript 触发动画时要注意 timing 和 class 移除时机
用 JS 控制 class 添加来触发动画很常见，但容易踩两个坑：
- 刚加完 class 立刻又移除了（比如在同一个事件回调里），浏览器来不及渲染动画，
forwards就没机会生效 - 监听
animationend事件时，别在回调里立刻清除动画 class —— 这会让元素瞬间恢复初始样式，闪一下。应该先保留 class，或用getComputedStyle确认终值后再操作 - 如果用
requestAnimationFrame批量操作，注意动画触发需在下一帧，不能紧挨着 DOM 修改
安全做法是：加 class → 等待 animationend → 再处理后续逻辑（如清理 class、切换状态），且确保该 class 里包含完整的 animation 和 animation-fill-mode。
真正卡住人的往往不是 forwards 本身，而是关键帧没写全、样式被覆盖、或者 JS 时机没掐准。检查这三处，90% 的闪回问题就解决了。
