Check out a free preview of the full CSS In-Depth, v2 course:
The "Stopping Animations & Events" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Use the animation play state to stop or pause the animation. DOM events are thrown on the elements that you can listen to and interact with the element using JavaScript.

Get Unlimited Access Now

Transcript from the "Stopping Animations & Events" Lesson

[00:00:02]
>> Estelle Weyl: So can you stop an animation? Yes, you can. On hover, it says right there, :pencil:hover animation-play-state:paused. So you can just play the catch the pencil game, it's not actually that fun. So the two values are paused and running, which is why that naming a function running, naming an animation running is a problem.

[00:00:25] And here is the game catch the pencil. And just to show that I'm hovering over it, I've made it green. Okay, in terms of the animation, the api within the css specification. There is an animation api which is different. There are some events that happen that you could capture.

[00:00:45] There is the animationstart, animationend and animationiteration. The animationstart occurs when the animation starts, the animationends when the animation ends. And the animationiteration happens at the end of every iteration, except for if it's at the exact same time as the animation end, then it will not be thrown. So if you start an animation three-quarters of the way through the animation, you will get the animation end.

[00:01:15] But if you do exactly one animation, you'll never get an animation iteration. Or if you stop at a point nine, you will never get an animation. So, one of the things you can do because of that issue that I talked about, it being the last thing on the UI thread is you can start an animation.

[00:01:34] If you need to sequential animations, you can start the second animation after the first one ends by actually doing an event on the animation and event. You can remove a class and re-add the class. All right, that's actually how I sometimes reiterate once but you want to, if you do a classroom move and a class re-add at the same time, that's almost time for the browser to realize that the animation was, the class was added or removed at the same time.

[00:02:03] And so there's not enough time to restart the animation. So I put 100 milliseconds, I think you probably do five milliseconds and it would work. So here, we're gonna just open this up. We're gonna open up the console and we're gonna see that, all you see is it looks like it's blue.

[00:02:25]
>> Estelle Weyl: And then it looks like it's green.
>> Estelle Weyl: And then, it's gonna look like it's red.
>> Estelle Weyl: And the reason is, the blue one is the one that you see on top right cuz it's the last one to clear? But it lasts nine seconds cuz it's three seconds times three iterations, that's nine seconds.

[00:02:43] The green one lasts 16 seconds cuz there's four iterations of four seconds each and the red one shows last, because it lasts a total of 25 seconds. But you have three animation starts, cuz they all started. Then you have five animation iterations, before the animation end of the blue.

[00:03:04] Then you have another three, before the animation end of the green. And then you have one more animation iteration of the red before it ends five seconds later. So that's the events.