直接原因是animation-fill-mode默认为none，动画一结束即回退到初始状态；常见失效原因包括关键帧缺100%、动画未真正结束、高优先级样式覆盖、简写漏写forwards、transform未全量声明及多动画未单独设置。
animation-fill-mode: forwards 为什么动画结束后元素不保持最终样式？
直接原因：默认值是 none，动画一结束，元素立刻回退到动画开始前的状态（或继承/初始样式），根本不会保留 @keyframes 里定义的最终帧样式。
常见错误现象：opacity 动画淡入后又瞬间消失、transform 位移后弹回原位、color 变化后复原——全是因为没设 animation-fill-mode 或设错了值。
-
forwards是唯一能保留最后一帧样式的取值；backwards只影响动画前（延迟期间）的起始帧，both是前两者叠加，但不能替代forwards的“结束锁定”作用 - 必须和
animation-duration配合使用；如果动画本身没执行完（比如被animation-play-state: paused中断），forwards不会生效 - 多个动画同时作用时，每个都要单独设置
animation-fill-mode，CSS 不会继承或合并
如何正确写 animation-fill-mode 的声明顺序？
它属于 animation 复合属性的一部分，但容易被忽略或放错位置。错误写法如 animation: slide-in 0.3s ease; animation-fill-mode: forwards; —— 这在某些旧浏览器中可能被覆盖或失效。
推荐始终用复合写法，把 fill-mode 放在最后：
element {
animation: fade-in 0.4s ease-out 0.1s forwards;
}
其中第5个参数就是 animation-fill-mode。各参数顺序固定为：name duration timing-function delay fill-mode iteration-count direction play-state。
- 如果用了
animation-iteration-count: infinite，forwards就无效——因为没有“结束状态”，动画永远循环 - 用
animation: none重置动画时，animation-fill-mode不会被清除，需显式写animation-fill-mode: none
forwards 和 CSS 终态样式冲突怎么办？
当动画最后一帧的样式（比如 transform: translateX(100px)）和元素自身的 class 或后续规则（比如 transform: rotate(90deg)）共存时，浏览器按层叠规则处理：动画生成的样式优先级等同于内联样式，会覆盖普通 CSS 规则，但会被 !important 打败。
这不是 forwards 的问题，而是样式优先级问题。解决思路：
- 避免在动画结束后再用其他规则修改同一属性；如需后续控制，改用 JS 操作
style.transform或切换 class - 如果必须叠加效果，把动画里的变换写进最终 class 里，而不是依赖
forwards锁定——forwards只负责“还原动画终点”，不是“接管样式控制权” -
transform类属性尤其敏感：两个transform声明不会合并，后声明的会完全覆盖前一个，包括动画生成的
JavaScript 触发动画后如何可靠监听结束并做后续操作？
animationend 事件触发时机与 forwards 无关，但二者常一起用。关键点在于：事件在动画真正结束（含 delay）后触发，此时 forwards 已生效，DOM 的 computed style 已反映最终值。
实操注意：
- 监听时必须加浏览器前缀兼容：
animationend、webkitAnimationEnd、oAnimationEnd - 事件对象的
animationName属性可区分多个动画，避免误响应；不要只靠时间戳或计时器去“猜”动画是否结束 - 如果动画被 JS 中断（
el.style.animation = 'none'），animationend不会触发，forwards效果也会丢失——这是最易被忽略的边界情况
复杂点在于：forwards 是纯渲染行为，不改变 DOM 结构或触发 layout/reflow，所以无法靠 getBoundingClientRect() 等方法反向验证它是否生效；唯一可靠方式是读取 getComputedStyle(el).transform 这类属性，且必须在 animationend 后调用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
