移动端 CSS 动画暂停后恢复为何从断点继续播放
移动端网页中 CSS 动画暂停后恢复播放时，动画会从暂停时的状态继续执行，而不是重新开始。
动画暂停后恢复为何不从开头重新播放
animation-play-state 属性用于控制动画的运行或暂停状态。当动画处于暂停状态时，浏览器会停止动画的渲染更新。当该属性值从 paused 变为 running 时，浏览器会从动画序列中暂停的位置继续执行，而不是重置到初始帧。这种机制确保了动画的连续性，使得用户在交互过程中能够获得平滑的视觉体验。MDN 文档明确指出，恢复暂停的动画会从暂停时离开的位置开始，而不是从动画序列的开头重新开始。
这一行为是由 CSS 动画规范定义的，与动画的迭代次数或方向设置无关。无论动画设置了 infinite 循环还是单次播放，只要动画处于暂停状态，恢复播放时都会保持当前的时间进度。这意味着如果动画在播放到 50% 的位置被暂停，恢复播放后将继续从 50% 的位置向 100% 的位置过渡。这种设计避免了动画在暂停和恢复之间出现突兀的跳转，提升了用户体验的连贯性。
如何通过 CSS 实现动画的暂停与恢复
要实现动画的暂停与恢复，需要在 CSS 中为元素设置 animation-play-state 属性。该属性可以接受 running 或 paused 关键字值。例如，可以为元素设置默认状态为暂停，然后通过伪类选择器（如 :hover）在用户交互时将状态切换为运行。MDN 提供的示例展示了如何将动画默认设置为 paused，并在鼠标悬停时将其设置为 running，从而实现交互式的动画控制。
在移动端开发中，这种交互方式常用于提升用户体验。例如，可以将长动画设置为默认暂停状态，用户点击或触摸元素时再恢复播放。需要注意的是，animation-play-state 属性可以应用于单个动画或多个动画。当应用于多个动画时，需要使用逗号分隔的列表，并确保动画名称与属性值的顺序一致。MDN 文档指出，当在动画属性上指定多个逗号分隔的值时，它们会按照动画名称的顺序应用于相应的动画。
检查动画暂停与恢复效果的步骤
要验证动画暂停后恢复是否从断点继续播放，可以按照以下步骤进行操作。首先，在 CSS 中定义一个动画，并设置 animation-play-state: paused 为默认状态。然后，通过 JavaScript 或伪类选择器将状态切换为 running。接着，观察动画在恢复播放时的行为。如果动画从暂停时的位置继续播放，而不是重新开始，则说明配置正确。
可以使用浏览器开发者工具的动画面板来进一步验证。在动画面板中，可以查看动画的时间轴和当前状态。当动画被暂停时，时间轴会停止更新；当状态切换为 running 时，时间轴会从暂停点继续推进。如果动画重新开始，时间轴会重置到 0%。通过对比时间轴的变化，可以确认动画是否按照预期从断点继续播放。
常见问题与注意事项
在使用 animation-play-state 属性时，需要注意动画的继承性和计算值。该属性默认不继承，但可以通过设置 inherit 值使其继承父元素的动画状态。此外，该属性的初始值为 running，这意味着如果没有明确设置，动画默认会运行。在移动端开发中，建议明确设置动画的初始状态，以避免意外的行为。
另一个常见问题是动画属性值的匹配。当为多个动画设置 animation-play-state 属性时，必须确保动画名称与属性值的数量和顺序一致。如果属性值的数量少于动画名称的数量，多余的动画将使用默认值 running。如果属性值的数量多于动画名称的数量，多余的值将被忽略。MDN 文档建议参考“设置多个动画属性值”的规范，以确保动画状态的正确应用。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。