为什么CSS动画结束后元素会恢复初始状态？-css教程-PHP中文网

animation-fill-mode 默认为 none，需显式声明 forwards 才生效；简写 animation 会重置未声明子属性，故须写成 animation: fadein 0.3s ease forwards；关键帧必须完整定义 100% 终态，js 触发时需确保动画播完且避免样式覆盖。

为什么css动画结束后元素会恢复初始状态？

因为 animation-fill-mode 默认值是 none，不是 bug，是浏览器按规范执行的必然行为。

animation-fill-mode: forwards 必须显式写进 animation 简写里

很多人只写 animation: fadeIn 0.3s ease;，再另起一行加 animation-fill-mode: forwards;，结果无效。原因在于 animation 简写会重置所有未显式声明的子属性，animation-fill-mode 就被强制设回 none。

✅ 正确写法：animation: fadeIn 0.3s ease forwards;（注意分号前有空格）
✅ 分开写也行，但必须确保 animation-fill-mode: forwards; 和 animation 在同一选择器、同一样式块里，且后面没出现 animation-fill-mode: none; 这类覆盖
❌ 单独声明 animation-fill-mode 又没控制好层叠顺序，很容易被后续规则或内联样式覆盖

@keyframes 里漏了 100% 就锁不住终态

forwards 不会“猜”你想停在哪——它只照搬你在 100% 或 to 块里写的那几行。漏写，就用元素原始值补，forwards 锁住的就是这个错值。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

必须显式写出完整终态，比如：100% { opacity: 1; transform: translateX(100px) scale(1); }
不能只写 0% 和 50%，也不能只改 transform 却漏掉 opacity
移动端建议统一用 100%，部分 Android WebView 对 to 解析不稳定

JS 触发时最容易忽略的三个时机问题

用 JS 控制 class 添加/移除是最容易让 forwards “看起来没用”的场景——不是属性失效，而是动画根本没走到终点。

刚加 animate 类就立刻 remove，动画甚至没开始，forwards 永远不触发
在 animationend 回调里直接读 getComputedStyle(el).transform，可能拿到中间值；建议用 requestAnimationFrame 延迟一帧再读
动态设置内联样式时，只改 el.style.animation = 'slideIn 0.4s' 不够，还得同步写 el.style.animationFillMode = 'forwards'，否则 CSS 文件里的 forwards 会被内联样式覆盖