animation-fill-mode: forwards 只在动画播放完成时生效，需配合 animation-duration 等明确结束时间的属性；若使用 infinite、缺末帧或被简写覆盖则无效。
animation-fill-mode: forwards 为什么没生效
直接加 animation-fill-mode: forwards 却发现动画结束还是跳回初始状态，大概率是漏了关键前提：这个属性只对「已播放完成的动画」起作用，而默认情况下，CSS 动画在结束时会重置元素样式（除非显式保留）。
- 必须配合
animation-duration或animation-delay等让动画有明确的“结束时间点”，否则浏览器无法判断何时该应用forwards - 如果用了
animation-iteration-count: infinite，forwards完全无效——因为动画永不停止 - 若动画本身没定义末帧（比如
@keyframes只写了0%没写100%），浏览器可能 fallback 到初始值，forwards也就无从保留
正确写法：必须同时声明 duration 和 forwards
单独写 animation-fill-mode: forwards 是不够的，它只是“策略”，真正触发保留行为的是动画执行完毕这一事实。所以至少要配一个可终止的动画时长。
button {
animation: slideIn 0.3s ease-out;
animation-fill-mode: forwards;
}
@keyframes slideIn {
from { transform: translateX(-20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
注意：animation 简写属性里不包含 animation-fill-mode，所以必须单独写；如果用简写覆盖了整个动画声明（比如后面又写了一次 animation: ...），animation-fill-mode 会被重置为默认值 none。
和 visibility / display 冲突时的常见坑
很多人想“动画完隐藏元素但保留最终位置”，于是加 visibility: hidden 或 display: none 到末帧，这会导致 forwards 失效或表现异常。
立即学习“前端免费学习笔记（深入）”；
-
visibility: hidden在末帧中是有效的，元素仍占位，forwards能保留该状态 -
display: none在末帧中虽能写入，但浏览器通常不会真正应用它——因为display是非过渡属性，且forwards不保证强制渲染该值；更稳妥的做法是动画结束后用 JS 设置display: none - 如果动画过程中父容器设置了
overflow: hidden，而末帧位置超出可视区，看起来像“消失了”，其实只是被裁剪了
替代方案：transition + class 切换更可控
当动画逻辑变复杂（比如需要 JS 控制时机、多状态切换、或兼容老版本 Safari），纯 CSS animation + forwards 容易失控。这时候用 transition 配合类名增删反而更稳。
.box {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s, transform 0.3s;
}
.box.active {
opacity: 1;
transform: translateY(0);
}
JS 触发：element.classList.add('active')。这种方式天然“保留在最终状态”，没有 forwards 的语义边界问题，也更容易调试和中断。
真正容易被忽略的是：CSS 动画的“完成”依赖于时间轴和迭代次数，而不是视觉结果；哪怕你肉眼看到动完了，只要浏览器内部还没走到 timeline 终点（比如被 JS 中断、或硬件加速未就绪），forwards 就不会生效。
