animation-fill-mode: forwards 未生效是因为缺少100%关键帧、被高优先级样式覆盖、animation-iteration-count非1、简写中未显式声明forwards，或终值未在to/100%中完整定义。
animation-fill-mode: forwards 为什么没生效
写了 animation-fill-mode: forwards 却还是“闪回”原始状态，根本不是属性写错了，而是浏览器压根没拿到可保持的终值。常见原因有：
-
@keyframes里漏了100%或to块：只写了0%和50%，浏览器会用元素原始样式（比如transform: none）补全终态，forwards锁住的就是这个错的值 - 被更高优先级样式覆盖：内联
style="opacity: 0"、带!important的类、或后续 CSS 规则（如.disabled { opacity: 0; }）都会直接压过forwards保留的值 -
animation-iteration-count没设为1：若用了infinite或alternate，动画结束时可能停在反向最后一帧（即0%），看起来像回退 -
animation简写里没显式含forwards：只写animation: fadeIn 0.3s ease;，forwards会被重置为none
必须和 100% 关键帧一起写全所有想保留的属性
forwards 不会补全、不继承、不推测——它只忠实地锁住你明确写在 100% 或 to 里的那几行样式。例如：
@keyframes slideIn {
from { transform: scale(0.8) rotate(-5deg); }
to { transform: translateX(100px); } /* ❌ 缺少 scale/rotate，结束时这些值变 none */
}
正确写法是把所有想保留的属性都显式带上：
@keyframes slideIn {
from { transform: scale(0.8) rotate(-5deg); }
to { transform: translateX(100px) scale(0.8) rotate(-5deg); } /* ✅ */
}
同理，filter、opacity、color 等只要你想保留，就必须在 100% 中写出完整声明。
简写 animation vs 单独设置 fill-mode 的坑
两种写法都可行，但顺序和覆盖关系极易出错：
- 简写必须包含
forwards：animation: slideIn 0.4s ease forwards;（注意分号前有空格） - 分开写时，
animation-fill-mode: forwards;必须和animation在同一选择器下，且后面不能出现animation-fill-mode: none;这类重置 - 旧版 WebView（如 Android 4.4 内置浏览器）不支持
forwards，需加-webkit-animation-fill-mode: forwards;
JS 动态触发动画时的时机问题
用 JS 切换 class 启动动画，如果先设 animation 再设 animation-fill-mode，中间存在样式计算间隙，浏览器可能按旧规则执行动画。最稳做法是：
- 把
animation和animation-fill-mode放在同一个 class 里一次性应用 - 或者用
getComputedStyle强制重排后再触发动画（但通常没必要） - 避免在 JS 中拆开设置多个 animation 子属性，尤其不要跨帧修改
最容易被忽略的是：forwards 只管“动画结束后”，不管“动画中途暂停”或“被 JS 中断”。如果需要暂停后也保持当前帧，得用 animation-play-state: paused 配合 JS 记录进度，而不是依赖 fill-mode。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
