CODEWITHSUNDEEP
javascripthtmlcssanimationcss-animations
atomikpanda
atomikpanda

Reputation: 1886

Start CSS Animations JavaScript

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)

Upvotes: 3

Views: 2885

Answers (1)

Zoltan Toth
Zoltan Toth

Reputation: 47667

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);
}

Upvotes: 7

Related Questions