animation-fill-mode: forwards 必须显式声明，因其默认值为 none，动画结束后会立即丢弃关键帧样式并“闪回”原始状态；需在触发动画的规则中与 animation 同级书写，且关键帧中须完整声明所有需保留的属性，同时注意 display、visibility 及高优先级样式的覆盖影响。
animation-fill-mode: forwards 为什么必须显式写
因为它的默认值是 none，动画一结束就丢掉所有关键帧里声明的样式，元素立刻“闪回”到原始状态。这不是 bug，是规范行为。你写了 @keyframes 定义了 to { opacity: 1; transform: translateY(-20px); }，但没配 forwards，浏览器根本不会帮你记住这行。
常见错误现象包括：按钮淡入后瞬间变透明、图标上移后突然砸回原位、加载动画结束时元素“消失”。这些都不是动画没播完，而是播完就被撤销了。
实操建议：
-
animation-fill-mode: forwards必须写在触发动画的 CSS 规则里，和animation同级或写进简写中（如animation: slideIn 0.4s ease forwards;） - 不要只靠继承或父类传递——它不继承，也不级联，写漏了就无效
- 如果用 JS 动态增删 class 控制动画，确保那个 class 的样式块里已包含
forwards，否则每次增删都可能重置状态
为什么加了 forwards 还是闪回？关键帧写法要完整
加了 forwards 却没效果，大概率是因为关键帧里漏写了需要保留的属性。CSS 不会“智能合并” transform、filter 等复合属性，它只照搬你在 100% 或 to 里写的那一条。
立即学习“前端免费学习笔记（深入）”；
比如元素原本有 transform: scale(0.95) rotate(2deg)，动画只写了 to { transform: translateX(100px); }，那结束时 scale 和 rotate 就被清空为 none，视觉上就是“缩回原形”或“转正”。
实操建议：
- 在
to或100%中显式写出所有需保留的值：transform: translateX(100px) scale(0.95) rotate(2deg); - 避免依赖初始样式“自动延续”，CSS 动画没有这种机制
- 若动画前用了
transform: none，而你想保留某项变换，必须在关键帧中重新声明，不能省略
animation-iteration-count: 1 是隐性前提
forwards 只保证“本次动画结束后保持”，但它不管动画播几次。如果你设了 animation-iteration-count: infinite，那每次循环结束都会停在最后一帧——看起来像卡住，而不是平滑循环。
而更隐蔽的问题是：某些框架或重置 CSS 会把 animation-iteration-count 设为 inherit 或覆盖成其他值，导致你以为只播一次，实际反复执行，forwards 每次都生效，但逻辑已错乱。
实操建议：
- 明确写出
animation-iteration-count: 1，比依赖默认值更可靠 - 若需手动重复播放（如点击触发动画），务必在 JS 中先移除动画 class，再重加——否则浏览器可能跳过重绘，状态不更新
- 避免和
animation-direction: alternate混用却不配iteration-count: 1，否则正向播完停住，反向根本没机会触发
display/visibility 冲突会让 forwards “失效”
forwards 能锁住 opacity、transform、margin 等，但它锁不住 display: none。如果动画前元素是 display: none，哪怕 opacity 变成 1，它依然不可见。
同理，父容器设了 visibility: hidden 或 opacity: 0，子元素即使 forwards 保住了自己的 opacity: 1，也会被遮蔽。
实操建议：
- 要用隐藏/显示控制入场，优先选
visibility: hidden+opacity: 0组合，而非display: none - 检查 DevTools 的 Computed 面板，确认最终生效的
display和visibility值，别只盯 animation 相关属性 - 动画元素若套在
position: fixed或transform父容器里，注意层叠上下文是否意外裁剪了内容
真正容易被忽略的是：forwards 不是万能开关，它只作用于 animation 层面；一旦有更高优先级的样式（比如内联 style、JS 直接 setAttribute、或 !important 规则）覆盖了关键帧里的值，它就守不住。调试时别只查动画有没有播完，得查“播完之后，那个值到底有没有被别的规则干掉”。
