How can I start CSS animations with js? the first line (webkitAnimation) works but the other ones don't.

anim_logo.style.webkitAnimation="threesixty 3s";
anim_logo.style.mozAnimation="threesixty 3s";
anim_logo.style.oAnimation="threesixty 3s";
anim_logo.style.animation="threesixty 3s";

why?

live preview (Click on the Ninja Star)

How can I start CSS animations with js? the first line (webkitAnimation) works but the other ones don't.

anim_logo.style.webkitAnimation="threesixty 3s";
anim_logo.style.mozAnimation="threesixty 3s";
anim_logo.style.oAnimation="threesixty 3s";
anim_logo.style.animation="threesixty 3s";

why?

live preview (Click on the Ninja Star)

• javascript
• html
• css
• animation
• css-animations

Share Improve this question Follow edited Oct 12, 2012 at 20:26 atomikpanda asked Oct 12, 2012 at 20:10 atomikpandaatomikpanda 1,88655 gold badges3535 silver badges4747 bronze badges 2

• I can't deduce a specific question here, but for animation, jQuery's various effect calls are good places to start... – blackcatweb Commented Oct 12, 2012 at 20:14
• 1 Could you please check if you put the second or the last one first if it works in firefox? – xception Commented Oct 12, 2012 at 20:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You better make a separate class with that animation and simply attach it to your element when needed:

anim_logo.setAttribute("class", yourAnimationClass);

UPDATE

To remove the newly added class you can use a delayed function:

function animateMe() {
    anim_logo.setAttribute( "class", yourAnimationClass );
    setTimeout( function() {
        anim_logo.setAttribute( "class", "" );
    }, 3000);
}