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 失效或表现异常。
立即学习“前端免费学习笔记（深入）”；
