为什么 Web Animation API reverse() 会导致我的动画跳转？

Question

Docs everywhere说在动画播放的时候调用reverse()和把playbackRate设置为-1是一样的，但是我的动画在使用reverse()的时候就跳疯了. playbackRate 工作正常。我真的很想使用 reverse() 因为它与状态无关，但恐怕我不明白。

我在 codesandbox 上有一个旋转正方形的小例子：

https://codesandbox.io/s/small-browser-1bkdt?file=/src/index.js

是我做错了什么还是reverse()没那么简单？

更新:

• 这可能是一个 Codesandbox 错误，因为@Kaiido 的 this fiddle 工作正常。

• 我使用的是 Firefox 75.0 和 MacOS。 Chrome 似乎工作正常。

Answer 1

从 this codesandbox issue 中可以清楚地看出，在 sandbox.config.json 中禁用 "Infinite loop protection" 可以解决跳动行为。在它开始完美运行之前，我还不得不 fork 这个项目。这可能不是 Firefox 的问题。