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

Award Winning Cartoonist

In this exercise, you will use the animation-delay property to start a sitting animation after the walking animation finishes.

Get Unlimited Access Now

Rachel Nabors: I want to give you the chance to use some animation stacking on your own. We're going to use animation-delay start the sitting animation after the walking animation. Now it's time for the learning by watching portion of this exercise. Switching over to the editor view, you can see that all we have going on here is some serious CSS.

We've got Tuna on a walk-cycle right here and I've also provided us with a sit-down set of key frames as well. We're going to run sit-down after the walk-cycle has finished. And it's going to look a little something like this. So first, we start by adding a comma. And we're going to do sit-down, and let's see.

It's going to use steps. It's got five frames, we're doing steps five. And we want it to only happen once, go by default. So let's see what happens. We need to give it a duration so it can actually run. Let's give it a 0.5 seconds duration. So now he's walking, he's walking and, well, wait a minute, what happened there?

As you can see, when they run at the same time, the last animation listed runs first. So this animation is starting with him sitting down and then it launches into him walking. That's no good. So this walk-cycle up here is happening four times. You'll notice that you can actually rearrange these animation bits however you want.

It doesn't really matter where they come, just so long, the only part that matters is in what order you put your time values. So we've got 1 second times 4 iterations. So sit-down should run after a 4 second wait. So notice the first value is 0.5 seconds, the second value is 4 seconds.

That's its delay. He jumped back to his original starting position. You need to give him a fill node of forward, so he remembers his last animation value. Let's see it happens now. He's walking, he's walking, he's going to start sitting and he does what he is told. Good kitty.

We will give you a cookie after class. Although, I don't think cats like cookies but whatever. He'll get one.

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