javascript - 为什么不能使用 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 fiddle 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)