如何解决移动端CSS动画结束后的状态重置_设置animation-fill-mode:forwards-css教程-PHP中文网

animation-fill-mode: forwards 有效需满足：@keyframes 必须显式定义100%终值、动画须真正结束、无高优先级样式覆盖、与animation同规则声明，且移动端注意display/visibility及safari渲染问题。

如何解决移动端css动画结束后的状态重置_设置animation-fill-mode:forwards

加 animation-fill-mode: forwards 是对的，但只加这一行大概率没用——问题几乎全出在关键帧定义、样式覆盖或 JS 触发方式上。

根本不是属性写错了，而是浏览器没拿到“可保持的终值”。常见情况包括：

@keyframes 里漏了 100% 或 to 块：比如只写了 0% 和 50%，没写 100%，浏览器会用初始值“补”终态，forwards 锁住的就是这个错误值
动画被 animation-iteration-count: infinite 或 animation-play-state: paused 拦住，根本没“结束”，forwards 不触发
元素有内联样式（如 style="opacity: 0"）或高优先级类（如 .disabled { opacity: 0; }），直接覆盖了 forwards 保持的 opacity: 1
用了 animation-direction: alternate 却没配 animation-iteration-count: 1，动画播完停在反向最后一帧（即起始帧），看起来像“回去了”

它不是独立开关，而是依附于正在运行的动画。很多人把它单独写在另一个 CSS 规则里，或写在被 JS 覆盖的样式块中，结果无效。

纯css无限循环渐变曲线动画效果，该特效很适合网页制作，无限循环的动画效果。

下载

推荐直接用简写：animation: slideIn 0.3s ease-out forwards;，避免遗漏或覆盖
如果必须分开写，确保 animation-fill-mode 和 animation-name/animation-duration 在同一选择器、同一权重下声明
JS 动态设置动画时，别只改 element.style.animation，记得同步设 element.style.animationFillMode = 'forwards'，否则内联样式会丢掉 CSS 文件里的 fill-mode

forwards 只照搬你在 100% 或 to 里写的那一条，不会“智能合并”或继承原始 transform 值。

比如元素原本有 transform: scale(0.95) rotate(2deg)，动画只写了 to { transform: translateX(100px); }，那结束时 scale 和 rotate 就会被清空为 none
正确写法是在 100% 中一次性写出全部：transform: translateX(100px) scale(0.95) rotate(2deg);
避免用 to 代替 100%——部分老旧 Android WebView 对 to 解析不稳定，显式写 100% 兼容性更稳

移动端对 transform、display、visibility 更敏感，且 JS 读取时机容易出错：

display: none 或 visibility: hidden 会中断动画，导致 forwards 失效；改用 opacity: 0 + pointer-events: none 更稳妥
JS 在 animationend 回调里直接读 getComputedStyle，可能拿不到终值——加一层 requestAnimationFrame 延迟读取
Safari ≤14.1 对多属性 transform（如 scale+rotate 同时存在）偶有渲染残留，可在末帧额外加 transform: translateZ(0) 强制重绘