移动端网页 CSS 动画反向播放时为何停在起始位置？检查 animation-direction 属性
当动画方向设置为反向时，元素在动画结束后会停留在起始关键帧位置，这是由 animation-direction 属性的默认值 normal 决定的。
确认反向播放时的关键帧逻辑
CSS 动画在反向播放模式下，其起始和结束关键帧的定义会根据 animation-direction 的值发生互换。当设置为 reverse 时，动画会从结束关键帧开始向起始关键帧播放。然而，动画结束后元素的状态取决于 animation-fill-mode 的设置。如果未设置保留样式，元素将恢复到应用动画前的初始状态，这通常不是用户期望的最终效果。
在移动端网页开发中，这种逻辑差异常导致交互体验不一致。例如，一个卡片在正向播放时从透明变为可见，反向播放时从可见变为透明，但动画结束后卡片可能突然消失或恢复原状。理解反向播放模式下关键帧的映射关系，是排查此类问题的关键第一步。
设置 alternate 属性实现往返效果
将 animation-direction 设置为 alternate 可以让动画在正向和反向之间交替播放。在这种模式下，动画的起始关键帧会根据播放次数的奇偶性自动切换。例如，奇数次播放从 0% 开始，偶数次播放从 100% 开始。这种机制常用于移动端菜单的展开和收起动画，确保每次交互都能平滑过渡。
要实现往返效果，只需在 CSS 中为元素添加该属性。例如，animation-direction: alternate; 会让动画在正向和反向之间循环。需要注意的是，该属性仅控制动画的播放方向，不会影响动画结束后的状态保留，仍需配合 animation-fill-mode 使用。
设置 alternate-reverse 属性实现反向往返
animation-direction: alternate-reverse 是 alternate 的反向版本，动画会从反向开始，然后正向播放，再反向，以此类推。在这种模式下，起始关键帧的映射逻辑与 alternate 相反。例如，奇数次播放从 100% 开始，偶数次播放从 0% 开始。这种机制适用于需要从特定状态开始的循环动画，如移动端轮播图的切换。
该属性特别适用于需要从特定状态开始的场景。例如，一个移动端轮播图在初始状态下显示第一张图片，使用 alternate-reverse 可以确保每次切换都从最后一张图片开始，然后正向播放到第一张。这能显著提升用户体验的连贯性。
验证动画方向与关键帧映射效果
要验证 animation-direction 是否生效，可以在移动端浏览器中打开网页并触发动画。例如，点击一个按钮或悬停一个元素，观察动画的播放方向和起始位置是否符合预期。如果动画方向与预期不符，说明该属性未正确设置或被其他样式覆盖。
可以通过开发者工具检查元素的 computed style，确认 animation-direction 属性是否被正确应用。此外，确保动画名称、时长等属性与 animation-direction 配对使用，因为多个动画属性需要按顺序匹配。例如，如果动画名称是 slide，则 animation-direction 应设置为 alternate 或 alternate-reverse。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。