animation-fill-mode 是防止动画视觉 bug 的关键属性，控制动画前后样式状态；none（默认）、forwards（结束冻结）、backwards（延迟期预显）、both（双向生效）需按行为需求选择，失效常因规则覆盖或未显式声明属性。
animation-fill-mode 不是“要不要加”的可选项，而是“不加就容易出视觉 bug”的关键控制点。它决定动画没开始前、刚结束后的元素样式状态——很多人发现动画一停就闪回原始样式，问题八成出在这里。
animation-fill-mode 的四个取值怎么选
每个值对应一种时间区间干预逻辑，不是风格偏好，而是行为需求：
-
none：默认值。动画只在播放中生效；delay 期间和结束后立即丢弃所有动画样式，元素回到未动画前的状态（比如transform归零、opacity回到初始值） -
forwards：只管“结束后”。动画最后一帧的样式会冻结在元素上，哪怕animation-iteration-count是 1 或动画已停止（animation-play-state: paused也适用） -
backwards：只管“开始前”。在animation-delay阶段，元素会提前应用第一帧（0%或from）定义的样式；注意：它不改变 delay 时间本身，只改变 delay 期间的视觉表现 -
both：forwards和backwards同时生效。适合需要“进场即可见第一帧 + 离场即锁定最后一帧”的完整动效链
为什么写了 forwards 还是没效果
常见失效原因不是语法错，而是被其他 CSS 规则覆盖或触发条件不满足：
- 动画根本没有真正执行：检查
animation-name是否拼写正确、对应@keyframes是否存在且有内容；空 keyframes 或只有100%没0%会导致backwards失效 -
forwards只保留最后一帧的声明属性，未在 keyframes 中显式写出的属性不会被保留（例如 keyframes 里只改了opacity，但期望transform也冻结？不行） - 父级或同级样式优先级更高：比如元素本身写了
transform: none，就会盖掉forwards从 keyframes 继承来的transform: translateX(300px) - 使用了简写
animation属性但漏掉了animation-fill-mode：简写会重置为none，必须显式补全或改用分开写法
多动画场景下 animation-fill-mode 怎么配
当一个元素同时跑多个动画（比如 animation: fade 1s, slide 2s），animation-fill-mode 支持逗号分隔写法，但分配规则很关键：
- 值的数量必须与
animation-name数量一致，否则按顺序循环匹配（animation-fill-mode: forwards, backwards→ 第一个动画用forwards，第二个用backwards） - 如果只写一个值（如
animation-fill-mode: both），它会统一应用到所有动画 - 混合写法如
animation-fill-mode: forwards, none, backwards是合法的，但调试成本高，建议拆成单独的 class 控制更可控
容易被忽略的兼容性和副作用
animation-fill-mode 在现代浏览器中支持良好（Chrome 43+、Firefox 16+、Safari 9+、Edge 12+），但仍有两个硬伤要注意：
- 它不可继承，也不能被 JavaScript 的
getComputedStyle()实时读取“动画中”的中间值（只能读到最终冻结态或初始态） - 与
animation-play-state: paused共存时：paused状态下，forwards仍有效（保持暂停帧），但backwards不再起作用（因为 delay 已过，不算“开始前”） - 动画被 JS 移除（如
el.style.animation = ''）后，forwards冻结的样式会立刻消失——这不是 bug，是规范行为；如需持久保留，得把最终样式手动写进 class 或 style
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
