动画结束后样式“跳回”是因animation-fill-mode默认为none，需设为forwards才能保持末帧样式；backwards在延迟期应用起始帧，both兼顾前后连贯性。
动画结束后样式“跳回”原始状态，不是动画写错了，而是默认行为——css 动画只在播放过程中生效，一停就撤。要让元素停在最后一帧的样式上，关键就是 animation-fill-mode: forwards。
为什么动画结束会“闪回”？
因为 animation-fill-mode 默认值是 none。这意味着：
- 动画未开始前：元素完全无视关键帧（0% 或 from）的样式
- 动画执行中：正常过渡
- 动画一结束：立刻丢弃所有动画样式，恢复到原本写在选择器里的 CSS 状态
forwards：让结束状态真正“留下来”
这是解决“还原问题”的主力值。加上它，元素在动画终止后，会永久保留 100%（或 to）关键帧定义的样式，直到被其他 CSS 覆盖。
- 适用场景：淡出后隐藏（
opacity: 0）、滑入后定住位置（transform: translateX(200px)）、颜色切换后保持新色 - 注意：它不影响动画重复（
animation-iteration-count），只作用于整个动画流程的终点 - 写法示例：
animation-fill-mode: forwards;或简写进 animation 属性：animation: fadeOut 0.5s forwards;
backwards 和 both：补全动画前后的连贯性
如果还希望动画“还没开始”时就有准备态（比如延迟期间就移到起始位置），可搭配使用：
立即学习“前端免费学习笔记（深入）”；
- backwards：在
animation-delay阶段，提前应用 0% 关键帧样式（但动画一结束就失效） - both：等于
forwards+backwards，既提前准备，又结尾停留，适合需要全程视觉一致的动效
常见误区提醒
别混淆这几个点：
-
animation-fill-mode不控制动画是否播放，只管“动画范围外”的样式表现 - 它不能替代
transition；过渡是响应属性变化的即时反应，而 fill-mode 是配合@keyframes动画的生命周期管理 - 多个动画同时存在时，每个可单独设置 fill-mode，用逗号分隔：
animation-fill-mode: forwards, backwards;