3

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)

2
  • I can't deduce a specific question here, but for animation, jQuery's various effect calls are good places to start... 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? Commented Oct 12, 2012 at 20:26

1 Answer 1

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);
}
Sign up to request clarification or add additional context in comments.

5 Comments

the question is why his code only works in WebKit, not what he should replace it with.
@Zoltan Toth I would use this ^^ if I could remove the attribute when it is done animating.
@s0ulp1xel updated with the idea how you can remove the class after the animation
@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.
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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.