为什么无法使用JavaScript在CSS动画上更改速度

Question

我制作了一个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小提琴http://jsfiddle.net/usJv8/1/

Answer 1

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

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

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

您可以在这里看到它的工作原理： http: //jsfiddle.net/usJv8/9/（请注意，我在中心标签中添加了一个 id）