This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Exercise 7: Sitting Tuna Down" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Rachel Nabors: I wanna give you the chance to use some animation stacking on your own. We're gonna 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.
[00:00:27] 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 gonna run sit-down after the walk-cycle has finished. And it's gonna look a little something like this. So first, we start by adding a comma. And we're gonna do sit-down, and let's see.
[00:00:52] It's gonna 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?
[00:01:16] 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.
[00:01:38] 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.
[00:02:00] 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 gonna start sitting and he does what he is told. Good kitty.
[00:02:22] We will give you a cookie after class. Although, I don't think cats like cookies but whatever. He'll get one.