移动端 CSS 动画结束后为何自动重置？检查 animation-fill-mode 属性
当移动端网页上的动画播放完毕后，元素状态自动恢复到初始值，这通常是因为未设置动画填充模式。
动画结束后元素状态自动恢复的原因
CSS 动画默认在执行期间应用关键帧定义的样式，一旦动画结束，浏览器会移除这些样式，使元素恢复到应用在元素上的其他 CSS 规则所定义的初始状态。这种默认行为会导致动画播放完毕后，元素的位置、颜色或大小瞬间跳回动画开始前的样子。要防止这种重置，需要使用 animation-fill-mode 属性来指定动画在执行前后应如何应用样式。
animation-fill-mode 属性决定了动画在执行前和执行后如何应用样式。它有四个可选值：none（默认值，不应用任何样式）、forwards（保留动画结束时的计算值）、backwards（在动画延迟期间应用第一关键帧的值）以及 both（同时应用 forwards 和 backwards 的规则）。在移动端开发中，通常希望动画结束后元素停留在最终状态，因此需要将此属性设置为 forwards 或 both。
如何设置动画填充模式以保持最终状态
可以通过直接在元素上设置 animation-fill-mode 属性来实现。例如，将 animation-fill-mode 设置为 forwards 可以让元素在动画结束后保留动画最后一帧的样式。如果希望动画在延迟期间也显示初始状态，则应使用 both 值。需要注意的是，当为同一个元素设置多个动画时，animation-fill-mode 的值需要与动画名称的顺序相对应。
在代码中，可以通过简写属性 animation 来一次性设置所有动画相关属性，包括动画名称、持续时间、时序函数、延迟和填充模式。例如，animation: slide 1s ease-in 1 forwards; 这行代码定义了一个名为 slide 的动画，持续 1 秒，使用 ease-in 缓动函数，延迟 1 秒，并设置填充模式为 forwards。这样，即使动画播放结束，元素也会保持在动画最后一帧的位置或样式。
验证动画填充模式是否生效的检查步骤
首先，在移动设备或浏览器的开发者工具中打开网页，找到应用了动画的元素。然后，使用浏览器提供的开发者工具检查该元素的 computed styles（计算样式），查看 animation-fill-mode 属性的值是否正确设置为 forwards 或 both。接着，手动触发动画（例如通过点击或悬停），观察动画播放过程。最后，等待动画播放完毕，检查元素是否停留在动画结束时的状态，而不是跳回初始状态。
如果动画结束后元素没有停留在最终状态，可能是因为 animation-fill-mode 属性未正确设置，或者其值与动画名称的顺序不匹配。此外，如果使用了简写属性 animation，确保在简写属性中正确指定了填充模式。如果问题依然存在，可以尝试将 animation-fill-mode 属性单独设置在元素上，以排除简写属性可能带来的冲突。
不同填充模式对动画行为的具体影响
none 是默认值，意味着动画在执行期间应用关键帧样式，但在动画开始前和结束后，元素将使用其他 CSS 规则定义的样式。forwards 模式会让元素在动画结束后保留动画最后一帧的计算值，这对于需要元素在动画结束后保持特定状态的场景非常有用。backwards 模式则会在动画延迟期间应用第一关键帧的值，确保元素在动画开始前就处于动画的初始状态。
both 模式是 forwards 和 backwards 的组合，它既会在动画延迟期间应用第一关键帧的值，也会在动画结束后保留最后一帧的值。这种模式适用于需要动画在延迟期间和结束后都保持特定状态的场景。需要注意的是，当指定多个动画时，animation-fill-mode 的值需要与动画名称的顺序相对应，否则可能导致填充模式应用错误。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。