Check out a free preview of the full CSS In-Depth, v2 course:
The "Steps" 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:

The steps timing functions allow you to animate between keyframes in a specified number of steps rather than easing between them. Steps are great for sprite character animations.

Get Unlimited Access Now

Transcript from the "Steps" Lesson

[00:00:02]
>> Estelle Weyl: So here's steps, it's a different type of, it's not a cubic bezier function. All of the other ones we looked at were cubic bezier functions. Steps says, how many steps should this take to get from this 0% mark to the 100% mark. So if you have five steps, right?

[00:00:18] It's either gonna be from 0 to 100%. It's gonna be 0, 20, 40, 60, 80 or it's gonna be 20, 40, 60, 80, 100. So you're either gonna drop the 0 or you're gonna drop the 100% mark. And so that's where the key words start or end comes in.

[00:00:35] Basically it's the one you're gonna drop. So if we do end, its going to go 0, then 20, then 40, then 60, then 80. No, its actually 10 steps its going to be, so 10, 20, 30, 40, 0, 10, 20, 30, 40. And if you start, you see how it's hanging out on the 10% mark?

[00:01:00] Cuz it's dropping the start position. So what's the point of cubic bezier? Why would you want steps? Generally, you want something to be smooth, right? But sometimes you wanna do character animation. And so, where he might, where he go. There he is, he is dancing over there. Okay, so that is Psy and he is dancing

[00:01:29]
>> Estelle Weyl: Somewhere. He is off the page.
>> Estelle Weyl: Let's give him a little bit more room to dance around. So how did I animate this? You are kind of like I have no clue how this works. I actually the sprite of a dancing Psy and it has 23 frames in it 22 frames.

[00:01:53] And I basically move the background position. And instead of doing a linear, right? If I do linear this is gonna hurt you eyes, so just be warned.
>> Estelle Weyl: There he is on the side there, right? It's then I do steps and I just show 23 steps. From the 0% mark to 120 thirds the way in, 220 thirds the way in to 320 thirds of the way in.

[00:02:24] Let's get rid of Psy.
>> Estelle Weyl: There we go, okay. So then I have a bicycle animation and this is a little bit easier to show abut less interesting as an animation, so at the 0% mark, I'm showing the first key frame. At the 25% mark, I'm showing the second key frame.

[00:02:42] At the third, I'm showing the 50% mark and the fourth I'm showing the 75. I don't wanna show the 100% mark because if the image is way off the page, then you're not going to see it so that's why I used steps end because I'm dropping the end mark.

[00:02:58] If I had done step start, I would have dropped the first one and kept the 100% and that doesn't look good.
>> Estelle Weyl: So I'm dropping the end mark.
>> Estelle Weyl: That looks like a guy bicycling around right? And you could add a second animation then, cuz you can have him move across the screen.