Web Animations API：负播放速率是否影响动画循环次数？

核心原因 #

给设置了iterations: Infinity的动画修改播放速率为负值时，浏览器会判定动画「完成」并触发finish事件——这是因为负速率下，动画的播放方向变为反向，而无限迭代的动画没有明确的反向起始边界（相当于要跳转到负无穷的时间点），浏览器无法处理这种无限反向的状态，只能将当前时刻视为动画的终止点，从而触发finish。

正速率下，无限迭代的动画会持续向「无穷远的结束点」播放，没有明确终止条件，因此不会触发finish；只有当速率符号反转时，才会触发这个边界判定逻辑。

关于play()报错的说明 #

动画触发finish后，其currentTime会被设置为无限大（正速率）或无限小（负速率）。此时调用play()，浏览器需要将动画拉回起始点，但无限动画的起始点在无穷远处，无法完成跳转，因此抛出Cannot play reversed Animation with infinite target effect end错误。

解决方案 #

1. 用极大有限值替代Infinity
   将迭代次数设为一个足够大的有限数（比如1e9），让动画反向播放时有明确的起始边界，避免触发意外的finish：

   const sceneryBgOptions = {
     duration: 360000,
     iterations: 1e9
   }
   

2. 触发finish后重置动画状态
   若必须使用Infinity，在finish事件中先重置currentTime并修正播放速率，再调用play()：

   sceneries.forEach(sc => {
     sc.addEventListener('finish', () => {
       sc.currentTime = 0;
       sc.playbackRate = Math.abs(sc.playbackRate);
       sc.play();
     })
   })
   

3. 调整关键帧顺序替代速率反转
   如果需要反向动画效果，直接修改关键帧的顺序，保持播放速率为正，这样无限迭代的逻辑依然有效：

   // 反向关键帧
   const reversedSceneryKeyframes = [
     { transform: 'translateX(-100%)' },
     { transform: 'translateX(100%)' }
   ]
   

内容的提问来源于stack exchange，提问作者Aaron Parisi