animation-fill-mode: forwards 失效主因是动画未自然结束，如框架卸载、display: none、@keyframes 未定义或拼写错误；需确保关键帧含 to/100%、避免 display: none、慎用 transition 冲突、Vue/React 中加唯一 class 后缀或 key 强制更新、Safari 下用 animationend 补 JS 设置。
animation-fill-mode: forwards 为什么没生效
最常见的原因是动画本身没执行完就重置了，比如元素被 Vue/React 卸载、display: none 突然触发、或者 animation-name 对应的 @keyframes 规则压根没定义或拼写不一致。它只在动画“自然结束”时起作用，手动中断（如 JS 改 animation-play-state）或强制移除 class 都会让 forwards 失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查元素的 computed 样式，确认
animation-fill-mode是否被覆盖（比如被更高级别的 CSS 覆盖） - 确保
@keyframes中至少定义了to或100%关键帧，空规则或只有from不会触发状态保留 - 避免在动画进行中直接设置
display: none，改用visibility: hidden+opacity: 0组合过渡
和 transition 的 end 状态冲突怎么办
animation-fill-mode: forwards 设置的最终样式，优先级低于显式声明的 inline style 或高权重 CSS，但会覆盖 transition 的中间态——如果 transition 还在跑，而动画已结束并锁定了属性值，就会出现“跳变”或“卡住”。典型场景是：先用 transition 做 hover 移入，再用 animation 做点击反馈，两者共用 transform 或 opacity。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 同一属性不要混用
animation和transition，尤其在需要精确控制终态时，优先选animation+forwards - 若必须共存，给
animation的关键帧终点值加!important（仅限调试），或用 JS 在animationend事件里手动 setStyle - 注意
transition的transition-property列表，把动画正在驱动的属性从列表里剔除，避免竞争
Vue/React 中动态 class 导致动画不触发 forwards
框架在 diff 过程中可能复用 DOM 元素，导致旧的 animation 被中断、新的 animation 从头开始，forwards 没机会应用。更隐蔽的是：class 名相同但内容不同（比如 CSS-in-JS 的 hash 变了），浏览器认为是新动画，丢弃上一次的 fill 状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给触发动画的 class 加唯一后缀（如
slide-in-v2），避免框架复用旧节点时误判 - 在 JS 中手动触发重排：动画 class 添加后，读取一次
offsetHeight，再添加动画 class，强制浏览器重新计算 - 用
key强制替换组件（React）或v-if（Vue），比v-show更可靠
兼容性与移动端 Safari 的坑
老版本 Safari（iOS 9–12）对 animation-fill-mode 的支持不稳定，尤其是配合 transform 时，常出现终态偏移、缩放错位或完全不锁定。这不是 bug，是 WebKit 渲染管线对合成层状态缓存的处理差异。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对关键动效，在
animationend事件里用 JS 补一手：获取getComputedStyle的最终值，再写回style - 避免在
forwards后继续用 JS 修改同一属性（如动画结束 moveX 到 100px，又用 JS 设为 50px），WebKit 可能丢弃 fill 结果 - 测试时务必真机连 Safari 开发者工具，模拟器无法复现部分渲染异常
真正难搞的不是怎么写 forwards，而是当它“看起来生效了”，但下一秒被 JS、框架或另一个 CSS 规则悄悄覆盖——盯紧 computed 样式面板里的实际值，比查文档管用。
