animation-fill-mode: forwards 在 Android 4.4 WebView 和 iOS Safari ≤14.1 中存在兼容性问题，需显式写入 animation 简写、用 100% 替代 to、避免 alternate、在 keyframes 中重复全部 transform 值、JS 设置动画时同步设置 animationFillMode，并确保动画真实执行完毕。
animation-fill-mode: forwards 在 Android 4.4 WebView 中不生效
旧版 Android WebView（特别是基于 Blink 40–44 的版本）对 animation-fill-mode 解析存在兼容性缺陷：即使写了 forwards，动画结束后仍会回弹到初始状态。这不是你漏写了关键帧，而是内核压根没正确应用该声明。
根本原因是这些内核将 animation-fill-mode 视为“可选提示”，而非强制行为；尤其当 animation 使用简写且未显式包含 forwards 时，它会被静默忽略。
- 必须把
forwards显式写进animation简写中：animation: slideIn 0.3s ease forwards;—— 单独写animation-fill-mode: forwards;在这些内核里大概率失效 - 避免使用
to，全部改用100%：部分 WebView 对@keyframes . . . to { }解析不稳定，100%更可靠 - 禁用
animation-direction: alternate：旧内核在 alternate +animation-iteration-count: 1组合下，forwards可能停在错误帧（如 0%），直接改用normal
iOS Safari ≤ 14.1 中 transform 回弹的临时绕过法
Safari 14.1 及更早版本在同时声明多个 transform 子属性（如 scale 和 rotate）时，animation-fill-mode: forwards 可能只保留其中一部分值，其余退为 none，导致视觉上“位移还在，但缩放消失了”。
这不是样式被覆盖，而是渲染层对复合 transform 的终态快照不完整。
立即学习“前端免费学习笔记（深入）”；
- 在
@keyframes的100%帧中，必须重复写出元素原始的全部transform值（哪怕没动画）：transform: translateX(100px) scale(1.1) rotate(2deg); - 如果原始
transform来自 JS 或 class，无法在 keyframes 里预知，就放弃transform动画，改用left/top+position: relative，这类属性不受该 bug 影响 - 加一层兜底：给动画元素显式设置
will-change: transform;，可提升旧 Safari 对终态缓存的可靠性（但别滥用，影响性能）
WebView 中 JS 动态设置 animation 后 fill-mode 失效
在 Cordova、Capacitor 或微信小程序 WebView 中，用 JS 设置 element.style.animation 后，即使 CSS 文件里写了 animation-fill-mode: forwards，也常失效——因为内联 animation 声明会完全覆盖外部规则，包括分离写的 animation-fill-mode。
浏览器不会自动合并内联动画声明和外部 fill-mode，它只认当前生效的 animation 值。
- 必须同步设置内联
animationFillMode：el.style.animation = 'slideIn 0.3s forwards'; el.style.animationFillMode = 'forwards'; - 避免用
el.style.cssText += 'animation: ...'，这种拼接会抹掉已有animationFillMode值 - 若需复用动画，封装成函数，确保每次设置都带全参数：
setAnimation(el, 'slideIn', '0.3s', 'forwards')
为什么加了 forwards 还是闪回？先确认是否真“执行完了”
很多“回弹”问题其实不是 animation-fill-mode 的 bug，而是动画根本没走到终点——比如 animation-duration 被设为 0s、animation-delay 过长、或被 animation-play-state: paused 拦截。旧内核对此类异常更敏感，甚至不触发 forwards 的任何逻辑。
- 用 DevTools 的
Animations面板确认动画是否真实播放并结束（看进度条是否走到底） - 检查是否误用了
animation-iteration-count: infinite—— 它会让forwards每次循环后都“重置再保持”，视觉上仍是动个不停 - 在
animationend事件回调里打印getComputedStyle(el).transform，验证浏览器是否真返回了终态值；若返回空或初始值，说明动画没真正完成
opacity，也得在 100% 帧里写全 opacity: 1; transform: none; —— 它不会帮你推断“没动的属性该保持什么”，只会按你写的逐条应用。 
