尝试更改Safari中元素的动画持续时间时遇到错误

Question

我遇到了一个错误，在Safari中，如果我尝试使用Java脚本更改特定元素的动画持续时间，则该错误未显示持续时间的变化，在我看来，这是动画加速的原因。我已经在Chrome上尝试了相同的代码，并且可以在其中运行，所以我不确定是否必须编写一些Safari特定的CSS代码。

此jsfiddle中提供了一个示例。

JavaScript：

function ChangeStyle() {
  document.getElementById("background").style.animation = "rotate 0.1s linear infinite normal";
}

CSS：

#mydiv{
  transform: rotate(0deg) translate3d(0, 0, 0);
  animation: rotate 3s linear infinite normal;
}

@keyframes rotate {
  from {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }

  to {
    transform: rotate(360deg) translate3d(0, 0, 0);
  }
}

我添加了translation3d来强制硬件加速，因为该动画在Safari上非常不稳定。

我在上面测试过的Safari版本是13.1.1，而我在上面测试过的Chrome版本是83.0.4103.116。我在macOS Catalina上。