animation-fill-mode: forwards 在旧浏览器中不被支持或不可靠，需采用组合式兼容策略：双写带前缀的 keyframes 和 animation、用 100% 替代 to、显式写入简写、js 同步设置、避免 class 快速切换。
animation-fill-mode: forwards 在旧版浏览器中失效，不是你写错了，而是这些环境根本不支持该声明，或仅在特定条件下才部分生效。必须放弃“加一行就解决”的思路，转为组合式兼容策略。
旧浏览器根本没解析 animation-fill-mode
Safari ≤14.1、Android 4.4 WebView（Blink 40–44）、IE9 及以下，压根不识别 animation-fill-mode 这个属性名——开发者工具里看不到它，CSS 规则体被直接跳过。这不是“不生效”，是“不认识”。
- 不要只写
animation-fill-mode: forwards;单独一行：它会被忽略，或被后续animation简写静默重置为none - 必须显式塞进
animation简写里：animation: slideIn 0.3s ease forwards;（注意分号前空格） - IE9 及以下完全不支持
@keyframes和animation，连前缀都救不了，只能降级为transition+ JS class 切换
WebView 和 Safari 中 forwards 回弹的绕过写法
Android 4.4 WebView 和 iOS Safari ≤14.1 能识别 forwards，但终态渲染不可靠：transform 多值丢失、to 帧解析失败、alternate 导致停在 0%。
- 全部改用
100%替代to：@keyframes slideIn { 0% { transform: translateX(0); } 100% { transform: translateX(100px) scale(1) rotate(0); } } -
100%帧必须写全所有要保留的 transform 值，哪怕原始状态来自 JS 或 class —— forwards 不继承、不合并、不补全 - 禁用
animation-direction: alternate；若需反向效果，改用两个独立动画 + class 控制 - 给元素加
will-change: transform;（仅限必要场景），可提升旧 Safari 对终态缓存的可靠性
前缀缺失导致整个动画静默失败
旧 Safari（6.1–15.4）、Android 4.3 WebView 不支持无前缀的 @keyframes 和 animation，写了等于没写。
- 必须成对书写：
@-webkit-keyframes slideIn { ... }+@keyframes slideIn { ... }，内容一字不差 - 调用处也必须双写：
-webkit-animation: slideIn 0.3s ease forwards;+animation: slideIn 0.3s ease forwards; -
@-webkit-keyframes内部的transform属性也要加前缀：-webkit-transform: translateX(100px); - autoprefixer 不处理
@keyframes规则体，@-webkit-keyframes必须手写或靠postcss-keyframes插件生成
JS 动态设置时 animationFillMode 被丢弃
用 JS 设置 element.style.animation = 'slideIn 0.3s'; 后，animation-fill-mode 不会自动继承，也不会从 CSS 文件中读取。
- 必须同步设置：
element.style.animation = 'slideIn 0.3s ease forwards';，或分开写：element.style.animation = 'slideIn 0.3s'; element.style.animationFillMode = 'forwards'; - 避免快速 add/remove 同一动画 class：浏览器可能跳过动画，
animationend不触发，forwards永远不生效 - 在
animationend事件中读取终态样式时，用requestAnimationFrame延迟一帧再getComputedStyle，否则可能拿到中间值
最易被忽略的一点：旧浏览器里 forwards 的“终态”完全取决于你在 100% 帧里写了什么——少一个 scale(1)，缩放就归零；漏掉 opacity: 1，元素就透明。它不猜，不补，不继承，只照搬。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
