animation-fill-mode不生效的主因是animation-name缺失或错误，必须与animation-duration配对使用；forwards仅保留动画内声明属性，易被外部样式覆盖；backwards仅在animation-delay期间生效，需显式定义0%关键帧。
animation-fill-mode 不生效？检查是否漏了 animation-name
很多情况下 animation-fill-mode 看起来没用，根本原因是动画压根没跑起来——animation-name 没写，或者写错了名字，浏览器直接忽略整个动画声明。它不会报错，但也不会执行填充逻辑。
常见错误现象：animation-fill-mode: forwards 写了，元素动画一结束就跳回初始状态；或者完全没反应。
- 必须配对使用：
animation-name+animation-duration是最低要求，缺一不可 - 名字大小写敏感，且不能带引号（除非含空格或特殊字符）：
@keyframes slideIn对应animation-name: slideIn，不是"slideIn" - 如果用 CSS-in-JS 或构建工具，注意 keyframes 是否被正确注入或重命名
forwards 为什么有时还是回退？可能是 transform 被其他样式覆盖
animation-fill-mode: forwards 确实会让元素保留最后一帧的样式，但它只作用于动画内声明的属性。如果外部 CSS、JS 或后续规则又改了同一个属性（比如 transform），就会覆盖动画留下的值。
典型场景：一个按钮用 transform: translateX(100px) 动画移入，结束后想停在右侧；但父容器设置了 transform: scale(1)，或 JS 又执行了 el.style.transform = ''。
- 优先级上，内联样式 > CSS 动画填充 > 外部样式表，所以 JS 直接赋值会赢
- 检查 DevTools 的 computed 样式面板，看最终生效的
transform值来自哪条规则 - 避免混用：动画控制
transform，就别在其他地方再写同名属性；必要时用!important（仅调试用）或改用 class 切换
backwards 和 both 的实际效果差异在哪
backwards 只在动画延迟期间（animation-delay）起作用，把第一帧样式提前应用；both 是 forwards + backwards 的组合。它们都依赖动画定义里是否有明确的 0% 关键帧。
容易踩的坑：很多人以为 backwards 能让元素“从动画开始前就显示初始态”，其实它只生效于 delay 阶段；如果 animation-delay: 0s，backwards 就等于没写。
- 若动画有
animation-delay: 1s，且@keyframes中 0% 设了opacity: 0，则元素会在延迟的 1 秒内保持透明 - 若 0% 没定义，浏览器会尝试从元素当前样式推断，结果不可控——务必显式写全 0% 和 100%
-
both在入场动效中很实用，比如先淡入再位移，可让元素在 delay 期就透明，动画结束也保持最终位置
和 transition 同时存在时，fill-mode 的优先级怎么算
当元素既有 animation 又有 transition，且控制同一属性（如 opacity），动画的 forwards 会生效，但 transition 仍可能在后续状态变化中触发——这不是冲突，而是分阶段作用。
例如：一个卡片用 animation 淡入并停在 opacity: 1，之后用户 hover 触发 transition: opacity .2s，这时 opacity 会从 1 开始过渡到新值。
-
animation-fill-mode只影响动画生命周期内的“静止态”，不锁死属性；它不阻止后续任何样式变更 - 如果想彻底禁用某属性的 transition，得临时清掉：
transition: none，或用transition-property: all显式排除 - 性能提示：同时大量使用
transform动画和transition可能导致重排/重绘，建议统一用transform+opacity配合will-change（谨慎）
真正难搞的不是填不填充，而是填充后又被别的样式悄悄抹掉——盯紧 computed 样式，别信“我写了就应该生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
