为什么可以'；不能使用JavaScript在CSS动画上更改速度

我制作了一个CSS动画和一些JavaScript代码来更新动画速度。看起来我的JavaScript代码是有效的，但是一旦在CSS中设置了速度，就不能再更新了。如果我不在CSS中设置速度，JavaScript工作得非常好

#circle1 {
   width: 200px;
   height: 200px;
   background: blue;
   -webkit-animation: upDown 5s infinite;  /* Safari and Chrome */
   animation: upDown 5s infinite;
}

如果删除了上面css中的最后两行，那么下面的javascript就可以工作了

document.getElementById('circle1').style.webkitAnimationName = 'upDown';
document.getElementById('circle1').style.webkitAnimationDuration = '40s';

---

有关更多详细信息，请参见此JS小提琴

它看起来像是一个渲染问题（您需要重新渲染元素以可视化更改）。我提供了一个“解决方案”，我不知道它是否适用于您，因为它基于删除元素然后将其重新附加到DOM：

document.getElementById('circle1').style.webkitAnimationDuration = '40s';

var aux = document.getElementById('circle1');
document.getElementById("maincenter").removeChild(document.getElementById('circle1'));
document.getElementById('maincenter').appendChild(aux);

---

你可以看到它在这里工作：（注意，我在中心标签上添加了一个id）

看起来像是Chrome中的一个bug，它设置了

-webkit动画：40s

，而不是

-webkit动画持续时间：40s

。嗯。。。即使在dev工具中应用样式也不会生效，除非我关闭动画，然后重新应用它，并且应用整个动画快捷方式没有效果，尽管dev工具表明它已被应用。这个问题有用吗？对于Webkit来说，这两种方式都应该有效，但请尝试将JavaScript属性中的第一个字符大写。。。浏览器前缀可能是奇怪的：因为它可能不是@ PhilipK的意图立即改变属性在负载，但点击或推迟，这将打破动画，我猜是，菲利普想要它，所以球将继续其动画在中间的方式与较低的速度。