dynamically modify webkit animation with javascript

Question

I would like to use webkit animation with @-webkit-keyframes but being able to dynamically modify the values on the rule, so that the animation is not static. All the samples I found use a static @-webkit-frames, is there a way to customize with Javascript?

Answer 1

I had to create a new style rule in the loaded style sheets. Seems to work great in chrome 5.0.342.9 beta (at least)

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

and then assign the animation name using element.style

element.style.webkitAnimationName = newName;

Answer 2

I wish I could credit for this, but here's a link to someone who managed to modify an existing animation, as opposed to creating a new animation.

http://gitorious.org/webkit/webkit/commit/438fd0b118bd9c2c82b6ab23956447be9c24f136

I've ran this to verify that it does, indeed, work.