Handle css3 keyframes using Javascript

Question

@-webkit-keyframes bb{
    from{
        -webkit-transform:translate(0px,0px);
    }
    to{
        -webkit-transform:translate(0px,-100px);
    }
}

How can I change the translate value dynamically with javascript and add a rotate attribute too?

It sounds like you want a transition, not an animation. The former also has better support regardless, so definitely try that instead. — Ry-, Mar 07 '12 at 19:41
I wanna use a random number everytime and insert it as value for translate. — Katti, Mar 07 '12 at 20:10

score 0 · Answer 1 · edited May 23 '17 at 12:29

From reading the spec, it looks like you can't directly change animation styles by simply changing a property, you have to call some rule manipulation methods, so I think it's going to be something like:

bb.deleteRule( 0 | 1);
bb.insertRule( MyNewRule );

where MyNewRule is a string starting with 0 or 1 depending on whether you wanted to change the from or to rule, and the rest of the string is the style declaration which obviously you'll have to construct first.

But my read of the spec is probably as good or as bad as anyone else's

UPDATE: A MUCH BETTER AND MORE COMPREHENSIVE ANSWER

Handle css3 keyframes using Javascript

1 Answers1