用javascript动态修改webkit动画答案

【问题标题】：dynamically modify webkit animation with javascript用javascript动态修改webkit动画
【发布时间】：2012-04-27 12:20:19
【问题描述】：

我想将 webkit 动画与 @-webkit-keyframes 一起使用，但能够动态修改规则上的值，因此动画不是静态的。我发现的所有示例都使用静态的@-webkit-frames，有没有办法使用 Javascript 进行自定义？

【问题讨论】：

标签： javascript css webkit

【解决方案1】：

我必须在加载的样式表中创建一个新的样式规则。似乎在 chrome 5.0.342.9 beta 中运行良好（至少）

var lastSheet = document.styleSheets[document.styleSheets.length - 1];
lastSheet.insertRule("@-webkit-keyframes " + newName + " { from { top: 0px; } to {top: " + newHeight + "px;} }", lastSheet.cssRules.length);

然后使用 element.style 分配动画名称

element.style.webkitAnimationName = newName;

【讨论】：

我知道这有点晚了，但仍然：如果不最后分配动画，我将如何使用它？我不希望动画运行；我正在使用 addClass/removeClass 来使用 jQuery 启动动画
一旦你有了一个动画名称，你就可以有一个现有的类来设置动画。在您的样式表中：.animate {-webkit-animation-name: newName;}

【解决方案2】：

我希望我能将其归功于此，但这里有一个链接指向设法修改现有动画而不是创建新动画的人。

http://gitorious.org/webkit/webkit/blobs/438fd0b118bd9c2c82b6ab23956447be9c24f136/LayoutTests/animations/change-keyframes.html

我已经运行它来验证它确实有效。

编辑

所以该链接已失效，我不再信任 Gitorious 来维护 URL，所以这里有一个指向我为回答类似问题而创建的 JSFiddle 的链接：http://jsfiddle.net/russelluresti/RHhBz/3/

这包含查找现有动画、更新其值并将其分配给元素以使动画发生的脚本。我已经在 Chrome 18 和 Safari 5.1 中对此进行了测试

【讨论】：

嗨，Russell，当您验证这一点时，您在哪些浏览器中进行了测试？谢谢！
因为级联创建新动画会有效地覆盖现有的同名动画。