如何修复CSS动画animation-fill-mode在旧版内核的回弹Bug？-css教程-PHP中文网

animation-fill-mode: forwards 在 android 4.4 webview 和 ios safari ≤14.1 中存在兼容性问题，需显式写入 animation 简写、用 100% 替代 to、避免 alternate、在 keyframes 中重复全部 transform 值、js 设置动画时同步设置 animationfillmode，并确保动画真实执行完毕。

如何修复css动画animation-fill-mode在旧版内核的回弹bug？

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 的终态快照不完整。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

在 @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，验证浏览器是否真返回了终态值；若返回空或初始值，说明动画没真正完成