移动端 CSS 动画结束后为何恢复原状？检查 animation-fill-mode 属性
动画结束后元素恢复初始状态是默认行为，使用 forwards 值可让元素保持最终样式。
动画结束后恢复原状的原因
CSS 动画默认在执行完毕后会移除应用的所有样式，元素会恢复到未添加动画类之前的原始状态。这是 animation-fill-mode 属性的默认行为，即 none 值。当动画播放结束时，浏览器会应用其他 CSS 规则，导致元素尺寸、颜色或位置等属性回到初始设定。这种机制确保了动画不会永久改变元素的布局，但有时开发者希望动画结束后保持最终效果。
MDN 文档指出，none 值表示动画在未执行时不会向目标应用任何样式，元素将使用其他 CSS 规则显示。这意味着动画结束后，元素会立即回到原始状态。如果希望动画结束后保持最终状态，需要显式设置 animation-fill-mode 属性。默认行为与开发者预期不符时，通常是因为未指定该属性或使用了默认值。
使用 forwards 值保持最终状态
设置 animation-fill-mode: forwards 可以让元素在动画结束后保留最后关键帧的样式。该值会保留动画执行过程中遇到的最后一个关键帧的计算值。例如，如果动画将字体大小从 0 变为 40px，设置 forwards 后，元素在动画结束后将保持 40px 的字体大小。这对于需要动画持续生效的交互效果非常重要。
MDN 提供的示例展示了 forwards 的效果。在示例中，.grows-and-stays 类设置了 animation-fill-mode: forwards，而 .grows 类未设置该属性。当鼠标悬停在灰色框上时，两个元素都会播放相同的动画，但只有设置了 forwards 的元素在动画结束后保持最终状态。这验证了 forwards 值的作用，即让元素在动画结束后保持最后关键帧的样式。
检查与设置 animation-fill-mode 属性
要排查动画结束后恢复原状的问题，首先检查 CSS 中是否设置了 animation-fill-mode 属性。如果未设置或设置为 none，元素将恢复原状。可以通过在浏览器开发者工具中检查元素的 computed styles，确认该属性的值。如果需要保持最终状态，将值设置为 forwards 或 both。
MDN 文档建议使用简写属性 animation 来一次性设置所有动画相关属性，包括 animation-fill-mode。例如，animation: grow 3s forwards。这样可以避免遗漏其他动画属性。在移动端开发中，确保动画属性在关键帧定义和元素样式之间正确应用，是解决动画恢复原状问题的关键步骤。
验证动画保持最终状态
验证动画是否保持最终状态的方法是观察元素在动画结束后的表现。如果设置了 forwards，元素应保持动画结束时的样式。如果未设置，元素应恢复到原始状态。可以通过添加调试样式，如边框或背景色，来区分原始状态和动画状态。例如，在关键帧中设置不同的背景色，并在动画结束后检查元素的颜色。
MDN 示例中，.grows-and-stays 类设置了 animation-fill-mode: forwards，而 .grows 类未设置。当鼠标悬停时，两个元素都会播放动画，但只有 .grows-and-stays 在动画结束后保持最终状态。通过对比这两个元素的行为，可以验证 forwards 值的效果。在移动端测试时，确保动画在触摸或悬停事件中正确触发，并检查元素的状态变化。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。