移动端 CSS 动画暂停后恢复为何不从头开始
暂停的动画恢复播放时会从暂停时的状态继续，而不是重置到初始状态，这由 animation-play-state 属性控制。
检查动画是否设置了暂停状态
在移动端网页开发中，如果希望动画在加载时处于静止状态，需要在 CSS 中为元素添加 animation-play-state: paused 属性。该属性直接控制动画的播放与暂停，当设置为 paused 时，动画会立即停止在当前帧。需要注意的是，这个属性是直接应用在元素上的，而不是在关键帧中定义的。如果元素没有设置该属性，或者被设置为 running，动画将默认从开始播放。
排查时首先确认目标元素是否应用了暂停样式。可以通过浏览器开发者工具的元素检查功能，查看计算后的样式（Computed）中是否包含 animation-play-state: paused。如果该属性不存在或被覆盖为 running，动画将无法处于暂停状态。此外，检查伪元素 ::before 和 ::after 是否也继承了该属性，因为该属性适用于所有元素及其伪元素。
验证恢复播放时的状态衔接
当动画被暂停后再次恢复播放时，浏览器会从暂停的那一帧继续执行动画，而不是重新从 0% 开始。这是 animation-play-state 属性的核心行为之一。例如，如果一个无限循环的旋转动画在旋转到 180 度时被暂停，再次运行时会从 180 度继续旋转。这种机制保证了动画过程的连续性，避免了突然跳回起点造成的视觉突兀。
要验证这一行为，可以在 CSS 中添加一个悬停效果，将暂停的动画在鼠标悬停时恢复为 running。例如，设置 .box:hover { animation-play-state: running; }。当用户在移动设备上触摸元素时，如果支持触摸悬停，动画会从暂停的位置继续播放。如果不支持触摸悬停，可以通过 JavaScript 监听 touchstart 事件来临时切换状态，观察动画是否从当前位置继续。
确认动画名称与属性值的对应关系
当元素应用了多个动画时，animation-play-state 属性的值需要与动画名称的顺序严格对应。该属性接受一个逗号分隔的列表，列表中的值会按照动画名称出现的顺序依次应用。例如，如果元素同时应用了动画 A 和动画 B，那么 animation-play-state: paused, running 的含义是：动画 A 暂停，动画 B 运行。如果属性值的数量与动画名称的数量不匹配，浏览器会根据规范处理缺失的值。
在移动端调试时，如果发现只有部分动画暂停或恢复异常，可能是属性值列表与动画名称列表不匹配导致的。可以通过检查 @keyframes 定义和 animation-name 属性，确保两者的数量和顺序一致。例如，如果定义了两个关键帧动画，但只设置了一个暂停状态值，浏览器可能会将缺失的值视为 running，导致部分动画无法按预期暂停。
检查属性继承与计算值
animation-play-state 属性默认是不继承的，这意味着父元素的暂停状态不会自动传递给子元素。如果希望子元素继承父元素的暂停状态，需要显式设置 animation-play-state: inherit。在移动端布局中，如果发现子元素的动画行为与父元素不一致，可能是由于继承规则导致的。可以通过开发者工具查看子元素的继承样式，确认是否需要手动设置继承。
此外，该属性的初始值是 running，这意味着如果未显式设置，动画默认处于播放状态。在移动端性能优化中，有时需要通过 JavaScript 动态修改该属性来控制动画的启停。例如，在页面滚动到特定区域时暂停动画以节省资源。此时需要确保修改的是计算后的样式，而不是原始样式，以避免被其他规则覆盖。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。