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';

有关详细信息http://jsfiddle.net/usJv8/1/

，请参阅此JS小提琴

Answer 1

看起来它是一个渲染问题（您需要重新渲染元素以显示更改）。我带来了一个＆＃34;解决方案＆＃34;我不知道它是否适合你，因为它基于删除然后将元素重新附加到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）

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

1 个答案: