animation-fill-mode: forwards 并非万能开关，其失效主因是浏览器未获取到可保留的终值，常见于关键帧缺失、动画未真正结束、高优先级样式覆盖、简写重置、复合属性未写全及JS触发时机不当。
animation-fill-mode: forwards 是唯一能阻止动画结束后自动重置的合法手段，但它不是“一加就灵”的开关——漏写、错位、关键帧不全或被覆盖，都会让它彻底失效。
为什么写了 animation-fill-mode: forwards 还是闪回
根本不是属性写错了，而是浏览器没拿到可保留的终值。常见原因包括：
-
@keyframes里缺100%或to块：只写了0%和50%，浏览器会用元素原始transform补终态，forwards锁住的就是这个错误值 - 动画根本没“结束”：比如
animation-iteration-count: infinite，或被animation-play-state: paused拦在中途，forwards不触发 - 高优先级样式覆盖：内联样式
style="opacity: 0"、带!important的类、或后续 CSS 规则（如.disabled { opacity: 0; }）直接压过forwards保持的值 -
animation-direction: alternate配合了多次循环：比如animation-iteration-count: 2，forwards会停在第 2 次反向播放的终点（即起始帧），看起来像“回去了”
animation 简写里必须显式包含 forwards
animation 简写会重置所有未写出的子属性，包括把 animation-fill-mode 强制设回 none。单独声明 animation-fill-mode: forwards 很容易被覆盖或遗漏。
- ✅ 正确写法（推荐）：
animation: slideIn 0.4s ease forwards;（注意分号前有空格） - ❌ 错误写法：
animation: slideIn 0.4s ease;+ 单独一行animation-fill-mode: forwards;—— 后者可能被简写覆盖或未生效 - 如果必须分开写，确保
animation-fill-mode: forwards;和animation-name、animation-duration在同一选择器、同一样式权重下
@keyframes 的 100% 必须写全所有要保留的属性
transform、filter 等是复合属性，CSS 动画不会叠加或继承原始值，只照搬你在 100% 或 to 里写的那一行。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误示例：元素原本有
transform: scale(0.95) rotate(2deg)，动画只写to { transform: translateX(100px); }→ 结束时scale和rotate变为none，视觉上“缩回原形” - ✅ 正确写法：
to { transform: translateX(100px) scale(0.95) rotate(2deg); } - 移动端建议显式写
100%而非to，部分 Android WebView 对to解析不稳定
JS 动态触发动画时最容易忽略的三件事
用 JS 添加 class 或设置 style.animation 时，forwards 极易失效，因为时机和作用域不对。
- 别只改
element.style.animation，必须同步设element.style.animationFillMode = 'forwards'，否则内联样式里没有fill-mode - 用 class 控制动画时，确保那个 class 的样式块里已包含
forwards，不能指望父类继承或靠 JS 后续补 - 想重播动画？不能直接改
animation-name，得先设el.style.animation = 'none'，再读el.offsetHeight强制重排，最后恢复完整animation值
最常被忽略的点是：即使 forwards 生效，它也只固化动画结束那一刻的计算值；如果之后父容器尺寸变化、媒体查询切换或视口滚动，这些外部变动仍会触发重排，让“保持住的样式”看起来又变了——这时问题已不在 animation-fill-mode，而在响应式上下文本身。
