Detect which CSS animation just ended in JavaScript?

Question

How can you detect which CSS animation just finished in JavaScript?

The ultimate need is to re-trigger a CSS animation. Due to our HTML hierarchy, we prefer not checking the element's class but instead taking action only when a particular animation ends. If you have a method that allows re-triggering an animation without removing/adding a class, please let us know.

Otherwise... our code:

    page.find( '.button.letter' ).on( 'webkitAnimationEnd', function() {
        $( this ).removeClass( 'tap_animation' );

        console.log( 'Hi: ' + this.style.webkitAnimationName );

        if ( !write_mode() ) {
            do_write( this );
        }
    });

this.style.webkitAnimationName always returns the empty string.

Are we doing something wrong?

We need the code for WebKit browsers, specifically Mobile Safari.

Thanks!

If you want to loop an animation, that's already supported in CSS3. If that isn't what you want, could you elaborate a bit more? — Shmiddty
– Shmiddty, Commented Sep 19, 2012 at 16:11
Not to loop an animation, just retrigger it without removing/adding a class. We trigger an animation by adding a class then some undetermined time later, we need to retrigger it. If removing/adding a class is the only method, then we need to solve the question listed here. — Crashalot
– Crashalot, Commented Sep 19, 2012 at 16:17

David Thomas · Accepted Answer · 2012-09-19 16:34:34Z

5

From jQuery you can access the originalEvent object, and, from there, the animationName property:

$('body').on('webkitAnimationEnd', function(e){
    var animName = e.originalEvent.animationName;
    console.log(animName);
});

(Webkit-only) JS Fiddle demo.

From there, simply use an if to check what the animation name is/was (past-tense, I suppose, given that it ended).

The above updated, to give possibly a better illustration:

$('div').on('webkitAnimationEnd', function(e){
    var animName = e.originalEvent.animationName;
    if (animName == 'bgAnim') {
        alert('the ' + animName + ' animation has finished');
    }
});

(Webkit-only) JS Fiddle demo.

This demo uses the following HTML:

<div><span>text</span></div>

And CSS:

@-webkit-keyframes bgAnim {
    0%, 100% {
        color: #000;
        background-color: #f00;
    }
    50% {
        color: #fff;
        background-color: #0f0;
    }
}

@-webkit-keyframes fontSize {
    0%, 100% {
        font-size: 100%;
    }
    50% {
        font-size: 300%;
    }
}

div {
    font-weight: bold;
    -webkit-animation: bgAnim;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 2;
}

span {
    font-size: 100%;
    font-weight: bold;
    -webkit-animation: fontSize;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
}

edited Sep 19, 2012 at 16:34

answered Sep 19, 2012 at 16:26

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

5 Comments

Crashalot Over a year ago

You're too awesome, but you and your 51.4k points already know that. :) You don't happen to know another way to re-trigger CSS animations (after some user action) without adding/removing classes do you?

David Thomas Over a year ago

Why thank you! As for restarting an animation, no; I think (though I've not really explored the subject as yet) that adding/removing/toggling classes is the only way to go, unfortunately.

Crashalot Over a year ago

Thanks, David. We have a related question, which we're hoping you know the answer to as well: stackoverflow.com/questions/12499335/…. If you have a chance, we would love your thoughts!

David Thomas Over a year ago

I've had a look, and posted a potential solution. Though I'm not particularly convinced that it's either a great solution, or any better than the one you already had.

Michael Mullany Over a year ago

One method (if your animation lends itself to it) is to have an infinite iteration animation and toggle its animation-playstate property between paused and running. (But playstate is sort of buggy right now)

AJak · Accepted Answer · 2012-09-19 16:16:03Z

0

An event listener for webkitAnimationEnd should work. Something along the lines of:

    $object.addEventListener('webkitAnimationEnd', function(){
        console.log( 'End Detected' );
    }, false);

answered Sep 19, 2012 at 16:16

AJak

3,8931 gold badge22 silver badges28 bronze badges

1 Comment

Crashalot Over a year ago

Thanks, but how do you detect which animation ended. Multiple animations run against the same object.

Collectives™ on Stack Overflow

Detect which CSS animation just ended in JavaScript?

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related