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 a sprite sheet to create a walk-cycle animation.

Get Unlimited Access Now

Rachel Nabors: This is one of those things where I will let you try to figure it out on your own and encourage you to check the curriculum notes. However, steps is very tricky and I don't expect everyone to get it right from the get go. If you don't get it, don't worry, I'll walk us through it.

But you will become more familiar with how steps works and some of its drawbacks. What I want you to do is to make your own walk cycle. I've given you this sprite, this super cool, handmade, all-American sprite. Boom, look at that. It's got 1, 2, 3, I think it has 12 frames in total.

Very important, Tuna is 200 pixels tall. And there are 12 of these, giving it a total height of 2,400 pixels.
Rachel Nabors: And you are going to move, you're going to transition its background position, of this Tuna element to make him walk. And you're going to use the steps timing function.

I'm going to give you ten minutes to work on this. And then, you get to watch me suffer through it.
Speaker 2: Would telling us how to move a background position be cheating?
Rachel Nabors: Well, you move it the same way you would-
Speaker 2: I mean, just position it, how is it-

Rachel Nabors: Background-position is the property you're going to want to transition. I mean not transition, you're going to want to animate the background position. Yes, good question, thank you.
Rachel Nabors: That is not cheating.
Speaker 2: Okay, thanks.
Rachel Nabors: If at any time you are lost, I do encourage you also to read the comments in the CodePen as there are various hints listed throughout it.

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