animation-fill-mode: forwards 有效需满足关键帧含100%、动画正常结束、无高优先级样式覆盖、与animation同作用域；JS触发时须避免立即remove、重复添加及在animationend中读取计算样式。
animation-fill-mode: forwards 是解决 CSS 动画“回弹”最直接有效的手段，但光加这一行常常没用——问题几乎都出在关键帧定义、样式优先级或 JS 触发时机上。
为什么写了 animation-fill-mode: forwards 还是闪回
根本原因不是属性写错了，而是浏览器压根没拿到“可保持的终值”。常见情况包括：
-
@keyframes里漏了100%或to块：比如只写了0% { transform: translateX(0); }和50% { transform: translateX(100px); }，没写100%，浏览器会用初始值补全，forwards就锁了个空壳 - 动画被
animation-iteration-count: infinite或animation-play-state: paused拦住，根本没“结束”，forwards不触发 - 元素有内联样式（如
style="opacity: 0"）或高优先级类（如.disabled { opacity: 0; }），直接覆盖了forwards保持的opacity: 1 - 用了
animation-direction: alternate却没配animation-iteration-count: 1，动画播完停在反向最后一帧，不是你预期的位置
如何正确声明 animation-fill-mode 才生效
它必须和 animation 同时作用于同一个元素，且不能被后续规则重置。推荐两种写法：
- 写在
animation简写里（最稳）：animation: slideIn 0.4s ease-out forwards; - 分开写时确保在同一选择器下，且顺序不被覆盖：
.el { animation: slideIn 0.4s; animation-fill-mode: forwards; }，避免后面又出现animation-fill-mode: none
别把它单独提出来写在通用重置样式里（比如 * { animation-fill-mode: forwards; }），那对没动画的元素无效，还可能干扰其他逻辑。
JS 触发动画时容易忽略的三个时机陷阱
用 element.classList.add('animate') 启动动画很常见，但以下操作会让 forwards 彻底失效：
- 加完 class 立刻又
remove：比如在 click 回调里连续写add和remove，浏览器来不及渲染第一帧，动画根本不启动 - 动画未结束就再次添加同一 class：CSS 动画不会重播，除非先清掉再加，可用
el.style.animation = 'none'; setTimeout(() => el.style.animation = 'slideIn 0.4s forwards'); - 在
animationend事件里读取getComputedStyle(el).transform：这时值仍是初始值，因为forwards只改渲染层，不更新计算样式；要读真实位置，得等requestAnimationFrame下一帧
和 transition 混用时的冲突点
两者机制完全不同：transition 是响应属性变化的即时补间，animation 是预设路径。混用时特别容易跳变：
- 如果元素默认样式含
transition: transform 0.3s，而动画结束后 JS 又改了transform，浏览器会按 transition 补回旧值，造成“二次回弹” - 解决方案：把
transition写在动画 class 里（如.animate { transition: transform 0.3s; }），而不是元素默认状态中 - 或者动画结束后手动加
el.style.transition = 'none';，等一帧后再恢复，避免过渡干扰
真正难处理的不是怎么写 forwards，而是当动画结束态需要被 JS 读取、被用户交互响应、又被后续样式覆盖时，那一瞬间的渲染层与计算样式的错位——这时候靠纯 CSS 已经不够，必须用 animationend 事件固化最终值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
