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?
Add a comment
|
2 Answers
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;
2 Comments
trainoasis
I know this is a bit late, but still: how would I use this without assigning the animation at the end? I don't want the animation to run then; I am using addClass/removeClass to start the animations with jQuery
case nelson
once you have an animation name you can have an existing class that sets the animation. in your style sheet:
.animate {-webkit-animation-name: newName;}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.
I've ran this to verify that it does, indeed, work.
EDIT
So that link is dead and I don't trust Gitorious to maintain URLS anymore so here's a link to a JSFiddle I created to answer a similar question: http://jsfiddle.net/russelluresti/RHhBz/3/
This contains script to find an existing animation, update its values, and assign it to an element to make the animation occur. I have tested this in Chrome 18 and Safari 5.1
2 Comments
Crashalot
Hi Russell, when you verified this, which browsers did you test in? Thanks!
case nelson
Because of cascading creating a new animation will effectively overwrite existing ones with the same name.