animation-fill-mode: forwards 生效需满足三条件：关键帧必须完整定义100%终值、不能被内联样式或高优先级CSS覆盖、须与animation同作用域且未被重置；否则仍会闪回。
animation-fill-mode: forwards 是解决回弹的必要条件，但光加这一行大概率没用——问题几乎都出在关键帧定义、样式覆盖或 JS 触发时机上。
为什么写了 forwards 还是闪回
根本原因不是属性写错了，而是浏览器没拿到“可保持的终值”。常见情况包括：
- @keyframes 里漏了
100%或to块：比如只写了0%和50%，没写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 forwards;—— 注意分号前的空格，部分浏览器解析敏感 - 如果分开写，确保
animation-fill-mode: forwards;和animation在同一选择器下，且后面没出现animation-fill-mode: none;之类重置 - 它不继承，父级设了对子元素无效；也不级联，写漏了就等于没写
关键帧里必须写全 100% 的所有目标属性
forwards 不会“补全”未声明的属性，也不会继承原始 transform 值。例如：
立即学习“前端免费学习笔记（深入）”；
- 元素原本有
transform: scale(0.9) rotate(2deg)，动画只写了to { transform: translateX(100px); }，那结束时scale和rotate就归none - 正确写法是：
to { transform: translateX(100px) scale(0.9) rotate(2deg); } - 同理，
filter、opacity、color等只要你想保留，就必须在100%或to中显式写出
JS 触发时最容易忽略的三个坑
用 class 控制动画时，forwards 生效的前提是动画真正走到了终点：
- 刚加 class 就立刻
remove，动画根本没开始播，forwards永远没机会执行 - 在
animationend事件里读取getComputedStyle，可能拿到的是过渡中的中间值，不是终态 - 重复快速添加/移除同一 class，可能触发浏览器跳过动画，直接应用初始样式
最易忽略的一点：animation-fill-mode: forwards 只维持动画结束那一刻的计算值；如果之后父容器尺寸变化、媒体查询切换或视口滚动导致重排，已“定格”的样式仍可能视觉偏移——这时候问题已不在 forwards，而在响应式上下文本身。
