The full video and many others like it are all available as part of our Frontend Masters subscription.

Rachel Nabors

Rachel Nabors is a CSS animations fanatic and award-winning cartoonist. A regular conference speaker, she ignites new technology with her experience in visual storytelling.

Rachel Nabors

Web Animation

In this exercise, you will use the animationend event to add the .sit class after Tuna is done walking.

Get Unlimited Access Now

Rachel Nabors: This is the crowning achievement of this class. We are going to use those animation event listeners to listen for Tuna's animation end and then give him a .sit class after that's fired. So remember how earlier. Before we launch into this, I do want to make one note that is pretty interesting.

Earlier we were doing some fun things and someone in the front here had used a set timeout to change the animations class after the three second animation had run by setting a three second long set timeout on it. That kind of works but it's a very brittle thing.

Most of us know that set timeout is a code smell. Truth is, imagine a future where people do have control over the playback rate of their browser and they can universally set it to be faster or slower for their own appreciation. Then that set timeout would fire too early or too late and it would be really tough.

You would have messed up animations all over your site. These fire when the animation is finished. No matter how long it takes no matter whether or not some universal change has occurred on the page. So I just wanted to point out that using CSS animation event listeners, they're actually pretty bulletproof.

So if you're going to listen for animations ending, these are the future forward way to do it. All right, now get up there, use animation end to listen for when the animation is finished, and then slap that .sit class on Tuna.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now