使用javascript动态修改webkit动画

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

我必须在加载的样式表中创建一个新的样式规则.似乎在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;

我希望我能相信这一点,但这里有一个链接到设法修改现有动画的人,而不是创建一个新动画.

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