Motion Design with CSS

Motion Design with CSS Exercise 3: Making a Walk-Cycle

Topics:
Rachel Nabors
Rachel Nabors
Rachel Nabors, LLC

This course has been updated! We now recommend you take the CSS Animations and Transitions course.

Check out a free preview of the full Motion Design with CSS course:
The "Exercise 3: Making a Walk-Cycle" Lesson is part of the full, Motion Design with CSS course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, you will use a sprite sheet to create a walk-cycle animation.

Get Unlimited Access Now

Transcript from the "Exercise 3: Making a Walk-Cycle" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> 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.

[00:00:18] 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.

[00:00:38] 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 gonna use the steps timing function.

[00:01:01] I'm gonna 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-

[00:01:23]
>> Rachel Nabors: Background-position is the property you're going to want to transition. I mean not transition, you're gonna wanna animate the background position. Yes, good question, thank you. [LAUGH]
>> Rachel Nabors: That is not cheating.
>> Speaker 2: [LAUGH] 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.