h5动画播完“打回原形”的根本原因是animation-fill-mode默认为none，必须显式设为forwards且与animation同级声明；100%关键帧需写全所有要保留的属性，否则归零。
在 H5 页面中，动画播完瞬间“打回原形”——比如滑入后突然跳回起点、淡出后又变回不透明、旋转停止后角度归零——根本原因不是动画写错了，而是 animation-fill-mode 默认值为 none，浏览器压根不会保留最后一帧的样式。
必须显式写 forwards，且写对位置
只加一行 animation-fill-mode: forwards; 很可能无效。关键在于它必须和 animation 同时生效、同级声明：
-
推荐写法（简写中直接包含）：
animation: fadeIn 0.3s ease forwards;—— 注意分号前有空格，部分移动端解析敏感 -
分开写需谨慎：若用
animation-name和animation-duration分开声明，animation-fill-mode: forwards;必须在同一选择器、同一 CSS 块内，且后面不能被其他规则重置（例如不能出现animation-fill-mode: none;） -
JS 动态设置时别漏掉：如果用
element.style.animation = 'fadeIn 0.3s ease';，记得同步写element.style.animationFillMode = 'forwards';，否则内联样式会覆盖 CSS 中的声明
@keyframes 的 100% 必须写全所有要保留的属性
forwards 不会“继承”或“补全”原始样式，它只照搬你在 100% 或 to 里明确写的那一行。漏写 = 归零：
- ❌ 错误示例：元素原本有
transform: scale(0.95) rotate(2deg)，动画只写100% { transform: translateX(100px); }→ 结束时scale和rotate都变成none - ✅ 正确写法：
100% { transform: translateX(100px) scale(0.95) rotate(2deg); } - 同理，
opacity、filter、color等只要想保持，就必须在100%中显式写出；不要依赖“原来就有”
避开移动端常见失效陷阱
H5 在 iOS Safari 和安卓 WebView 中对 forwards 更挑剔，稍不注意就闪回：
-
不用
to，统一用100%：部分老旧 WebView 对to解析不稳定，100%兼容性更稳 -
禁用
animation-direction: alternate：尤其搭配多次循环时，forwards会停在反向终点（即起始帧），看起来像回退；改用normal+iteration-count: 1 -
避免动画中变更
display或visibility：forwards只作用于动画层，不改变布局流；display: none会直接让元素消失，终态无法“定格” -
旧版 Safari（≤14.1）中 transform 复合值易丢失：可在
100%中重复写出全部原始transform值，或加will-change: transform;提升终态缓存可靠性
检查是否真“结束”了
forwards 只在动画真正走完最后一帧时才生效。以下情况会导致它完全不触发：
- 动画设了
animation-iteration-count: infinite或被animation-play-state: paused拦住 - JS 控制 class 时，刚加就删，动画根本没开始播放
- 快速连续触发同一动画，浏览器可能跳过渲染，直接应用初始样式
- 高优先级样式覆盖：如内联
style="opacity: 0"、带!important的类、或后续 CSS 规则（如.disabled { opacity: 0; }）都会压过forwards的效果
