Question

我想使用带有@ -webkit-keyframes的webkit动画，但能够动态修改规则上的值，以便动画不是静态的。我找到的所有样本都使用静态@ -webkit-frames，有没有办法用Javascript自定义？

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

Answer 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中对此进行了测试

使用javascript动态修改webkit动画

2 个答案:

修改