animation-fill-mode: forwards 未生效的主因是@keyframes缺少100%关键帧或被display:none等样式覆盖；需显式定义末帧、避免强制隐藏、检查样式优先级，并注意JS直接赋值会覆盖CSS动画末帧。
animation-fill-mode: forwards 为什么没生效
常见情况是加了 animation-fill-mode: forwards，但元素动画一结束就跳回初始位置。根本原因通常是：动画本身没有定义结束帧（@keyframes 里缺 100% 或 to），或者动画被其他样式（比如 display: none、visibility: hidden）强制覆盖。
实操建议：
-
@keyframes必须显式写出100% { ... }，不能只写0% { ... }就指望浏览器自动保持 - 避免在动画运行中或结束后手动设置
display: none—— 它会直接从渲染树移除元素，forwards失效 - 如果要用隐藏效果，改用
visibility: hidden+opacity: 0，它们不影响布局位置 - 检查是否有更高优先级的 CSS 规则（如内联样式、
!important）覆盖了动画结束后的属性值
forwards 和 none / backwards / both 的区别
animation-fill-mode 控制动画时间范围外的样式表现。forwards 只影响动画结束后（即播放完成、暂停或取消时）是否保留最后一帧；而 none（默认）完全不保留，backwards 只在延迟阶段（animation-delay 期间）应用第一帧，both 是前两者叠加。
关键差异点：
立即学习“前端免费学习笔记（深入）”；
-
forwards不改变动画开始前的状态，只管“之后” - 若设了
animation-delay: 1s且fill-mode: backwards，元素会在延迟的 1 秒内就显示0%样式 -
both在延迟期显示首帧、结束后保持末帧，但容易和 JS 动态样式冲突，调试更复杂
JS 控制动画后如何安全移除元素
动画结束想彻底删掉元素？别在 animationend 事件里直接 el.remove() —— 这会让 forwards 来不及生效就被砍掉。正确做法是让动画自然结束，再用 setTimeout 延迟移除，或改用 opacity + transform 配合 pointer-events: none 实现视觉消失但 DOM 仍在。
推荐方案：
- 监听
animationend，然后加一个transition渐隐，等过渡完再remove() - 用
getComputedStyle(el).getPropertyValue('opacity')确认末帧值已应用，再操作 DOM - 更稳妥：动画末帧设
opacity: 0; transform: scale(0.99);（避免缩放为 0 导致点击区域丢失）
兼容性与现代替代方案
animation-fill-mode: forwards 在所有现代浏览器都支持，包括 iOS Safari 9+。但老版本 Android WebView（4.4 以下）有 bug：对 transform 属性的末帧保持不稳定。
如果必须兼容极旧环境：
- 动画结束时用 JS 手动写入末帧样式：
el.style.transform = 'translateX(100px)'; - 用
requestAnimationFrame确保样式写入在重绘前完成 - CSS-in-JS 方案（如 styled-components）可配合
shouldForwardProp避免干扰动画属性
真正容易被忽略的是：动画属性一旦被 JS 直接赋值（如 el.style.left = '200px'），就会覆盖 CSS 动画的末帧，forwards 形同虚设。保持控制权统一，要么全 CSS，要么全 JS。
