animation-fill-mode: forwards 是保持动画最终状态的必要设置，否则动画结束后元素会跳回初始样式；backwards 可使延迟期间显示首帧，both 则同时启用二者。
animation-fill-mode: forwards 是保持最终状态的必要设置
动画结束后元素跳回初始样式，不是动画写错了，而是默认 animation-fill-mode: none 在起作用。不显式声明 forwards，CSS 就不会保留最后一帧的样式——哪怕关键帧里写了 to 或 100% 也没用。
常见错误现象：滑入动画播完后“啪”一下弹回原位；淡出动画结束瞬间 opacity 又变回 1；旋转动画停住后立刻归零角度。
-
forwards只影响动画结束后状态，对延迟阶段（animation-delay）无影响 - 它保留的是最后一次迭代的末帧，和
animation-iteration-count的值无关 - 多个动画叠加时，每个动画需单独设置
animation-fill-mode，不能靠父级继承
backwards 能让元素在 delay 期间就进入起始态
如果你设置了 animation-delay: 1s，又希望元素在等待那 1 秒时就显示动画第一帧（比如提前移到左侧、设为透明），就得用 backwards。否则那段时间元素还是原始样式，动画一启动就“突然出现”，视觉割裂。
使用场景：下拉菜单展开前先定位到顶部、加载图标在延迟期间就旋转起来、悬停动画提前准备入场位置。
-
backwards仅在animation-delay存在时生效；没有 delay，它等价于none - 它应用的是
from或0%关键帧的样式，注意方向（animation-direction）会影响哪一帧被当作“起始” - 若同时需要 delay 前的起始态 + 结束后的末态，直接上
both，别叠两个规则
both 不是“更高级”，而是 forwards + backwards 的组合行为
both 看似全能，但容易误用。它不是让动画“全程生效”，而是分段控制：delay 期间用首帧样式，播放结束后用末帧样式。中间动画过程不受影响。
典型适用场景：按钮悬停缩放动画——鼠标移上瞬间就开始放大（backwards 提前应用 transform: scale(1.2)），松开后动画播完仍保持放大态（forwards）；或者表单验证提示框，出现前已定位好位置，消失后保持 opacity: 0。
-
both不等于“动画永远生效”，它只管前后两段空白期，动画本身仍受animation-duration和iteration-count控制 - 当首帧和末帧样式冲突（比如
transform和opacity同时变化），both会如实应用，不会自动调和 - 调试时建议先分别测试
forwards和backwards，再合并，避免状态覆盖难排查
浏览器兼容与前缀问题常被忽略
现在主流浏览器都支持标准 animation-fill-mode，但 Safari 15.4 之前、Chrome 43 之前仍需 -webkit-animation-fill-mode。如果动画在 iOS 或旧版安卓 WebView 中“不保持”，大概率是漏了前缀。
另外，IE10–IE11 支持该属性，但 IE9 及更早版本完全不识别，且无任何前缀可 fallback。
- 现代项目可用 Autoprefixer 自动补全，但要确认其配置包含
animation-fill-mode（部分旧版 preset 默认不包含） - JavaScript 动态设置时，用
element.style.animationFillMode = 'forwards'即可，无需前缀 - 不要混用标准写法和前缀写法在同一声明块中，CSS 解析器会按顺序覆盖，可能意外失效
fill-mode 会相互干扰，必须逐个验证。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
