为什么不能用 JavaScript 改变 CSS 动画的速度答案

【问题标题】：Why can't speed be changed on CSS animation with JavaScript为什么不能用 JavaScript 改变 CSS 动画的速度
【发布时间】：2014-08-09 00:14:45
【问题描述】：

我制作了一个 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/

【问题讨论】：

似乎是 Chrome 中的一个错误，它设置了 -webkit-animation: 40s 而不是 -webkit-animation-duration: 40s。
嗯...即使在开发工具中应用样式也不会生效，直到我关闭动画然后重新应用它
并且应用整个动画快捷方式没有效果，尽管开发工具表明它已被应用。 jsfiddle.net/usJv8/2
这个问题有帮助吗？ stackoverflow.com/questions/15368087/…
它应该适用于 Webkit，但尝试将 JavaScript 属性中的第一个字符大写...浏览器前缀可能很奇怪：blogs.msdn.com/b/thebeebs/archive/2012/01/11/…

标签： javascript html css animation

【解决方案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）

【讨论】：

由于@PhilipK 可能不打算立即更改 onload 中的属性，但在单击或延迟时，这会破坏动画，我的猜测是，Philip 想要这样，球将继续其动画以较低的速度在中途。