animation-fill-mode的核心作用是控制动画时间范围外是否应用关键帧样式；它在延迟期间或播放结束后生效，需满足duration>0、有明确终点帧、避免简写覆盖等前提才能使forwards生效。
animation-fill-mode 的核心作用不是“控制动画结束后的状态”，而是决定动画时间范围外是否应用关键帧样式。它只在动画未播放时生效——比如延迟期间（animation-delay）或播放结束后（animation-iteration-count 完成后）。如果你只设了 animation-duration 但没设 animation-iteration-count，那默认只播一次，结束后就进入“动画不播放”的状态，这时 animation-fill-mode 才起作用。
为什么设了 forwards 还是跳回原样？
常见错误是漏掉必要前提：
-
animation-duration必须大于 0；设为0s或省略，动画根本不会执行，forwards也就无从谈起 -
@keyframes中必须有明确的终点定义（如to或100%），否则浏览器无法知道“最后一帧”是什么 - 不要用简写
animation覆盖animation-fill-mode：简写中若没显式包含该值，会重置为none - 避免与其他动画属性冲突，比如
animation-play-state: paused会让元素停在当前帧，此时forwards不触发
forwards 在真实场景中的典型写法
想让淡出后元素保持隐藏，不能只靠 opacity: 0 动画本身：
@keyframes fadeOut {
to { opacity: 0; }
}
.element {
animation: fadeOut 0.5s ease-out;
animation-fill-mode: forwards; /* 必须单独写，或放在简写末尾 */
}
注意两点：
-
animation-fill-mode推荐独立声明，避免被简写覆盖 - 如果同时用
animation-direction: alternate，forwards只保留最后一次迭代的终点样式（即to帧），不是来回切换后的状态
兼容性与前缀陷阱
2026 年主流浏览器已原生支持 animation-fill-mode，但 Safari 15.4 之前、Chrome 43 之前仍需 -webkit-animation-fill-mode：
- 旧版 iOS Safari（≤15.3）可能忽略
both中的backwards部分，只生效forwards - IE10–IE11 支持
forwards和none，但不支持backwards和both - 不要依赖
initial或inherit值——它们在部分安卓 WebView 中行为不一致
真正容易被忽略的点是：这个属性不改变动画过程中的任何行为，只管“前后”。哪怕你写了 forwards，只要动画还没结束（比如被 animation-play-state: running 中断、或 animation-iteration-count: infinite 没停），它就完全不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
