Start CSS Animations JavaScript

Question

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)

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

Zoltan Toth · Accepted Answer · 2012-10-12 20:53:03Z

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

edited Oct 12, 2012 at 20:53

answered Oct 12, 2012 at 20:14

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

11684 Over a year ago

the question is why his code only works in WebKit, not what he should replace it with.

atomikpanda Over a year ago

@Zoltan Toth I would use this ^^ if I could remove the attribute when it is done animating.

Zoltan Toth Over a year ago

@s0ulp1xel updated with the idea how you can remove the class after the animation

Zoltan Toth Over a year ago

@11684 When you hang around a little bit more on SO you'll know that sometimes the straight answer to the OP's question is not the best one and you're free (and actually encouraged) to suggest a cleaner/better solution.

user1675187 Over a year ago

You can use the property className instead of setAttribute("class", ...), by the way 😊 Also, any browser supporting CSS animations supports classList, I believe, so: anim_logo.classList.add(yourAnimationClass);

Collectives™ on Stack Overflow

Start CSS Animations JavaScript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related