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

Web Animation

Rachel walks through the solution to exercise 3.

Get Unlimited Access Now

Rachel Nabors: This will be fun. This is your chance to sit back, enjoy coffee, and enjoy watching my foibles. I got the editor view. I'm going to change the view to make it over here. There we go. So, we don't need to see the HTML. We don't need to see the JavaScript, but we do need this CSS.

Yes. So, we've got this background image, which is 12 tunas tall, 2400 pixels, because he's 200 pixels tall. And it's position 0, 0. We're going to animate the background position. Yes, we can do that. So, what would that look like? Well, I guess I'll start with the keyframes block.

So, interesting thing about naming keyframes block. You can't give it a name like running, because that's actually a CSS animations property. And they don't want you to put running as an animation name. I learned this when a bunch of my examples failed one day. They don't want you to use running as a keyframes name, so you couldn't give it like a name of 200ms.

You couldn't do that. I don't think you can even use numbers as names. So, we're going to give him, I like to use a subject verb type naming convention. This would be tunaWalk, boom. We got a 0% value, and we got a 100% value. And this will be background-position.

And we're going to go from 0 0,
Rachel Nabors: To 0 2400 pixels. 0 -2400 pixels that moves it vertically upwards. All right, that makes sense, right? But, let's go back here and take a look.
Rachel Nabors: Some people get this right on the first try by accident. You just keep in mind that 2400 pixels is, actually when you do this, the sprite sheet is now somewhere off screen.

To keep it on screen, you do 2200 pixels, -2200 pixels, or you can move it to 100%. Which works slight different from moving things from pixels, as it's now making sure that it's still within that bottom frame. This will change exactly how it animates in a strange and unusual way.

So, why would we have that empty frame there? Hm-mm. Hm-mm. Well, funny thing about steps, and I'll show you. But first, let's make a zoetrope. Animation: catWalk 4s, and we're going to give it linear. This is how we make a zoetrope.
Speaker 2: It's tunaWalk
Rachel Nabors: You're right, it is tunaWalk.

We're using first names already. And we would want to use 2200 pixels, because we don't need that empty frame. So, this is kind of what that would look like if we speed it up, and we want it to go infinitely. I hope there's no one who gets seizures in the classroom, don't look at the screen.

So, this is kind of what it would look like if it were a zoetrope, not so great. It doesn't look so good on screens. Let's get a better timing function. We'll use steps, and we have 12 frames. We're going to do steps (12), but it's not quite lining up, why is that?

Well, funny thing about steps, it always eats the last frame. So, if you started with -2400 it worked perfectly for you. Even though your math was probably not quite right, if you'd started by putting 2400 pixels in there. In your original background position, you'd have seen that it was an empty frame.

And this is because steps actually always, because of the way it's written, it's child. Steps (12) is short first steps, and what this little bit means that ,end means, which frame do you want to sacrifice? The first one, which we would do with it with step start. Notice that now we've got that blink as eats the first frame.

Or steps end, you can sacrifice the last frame. If we wanted to do step start, we probably do our sacrifice up here with a -200 px. Not, 1200, 200. Let me see if I got it right. No I didn't, that's okay. Maybe it would be 200 px, yeah, there we go.

But, what we're doing here is we're actually sacrificing the first frame, steps. It gets even more fun when we do 100%. Because now, let me see, if we go to steps end, which is two by default steps end, as you can see it's not quite working. We would have to do, I think it steps like 112.5% or something like that to get it perfect.

Maybe it's 110.5%, there's a specific set of maths that you can do for this. It's in the course. Or, you could do steps (11).
Rachel Nabors: It's a little confusing. There's a trick to it. I encourage you to play around with it to study the spec to see exactly what the math is involved.

You're probably not going to use steps a whole lot. But it is a fun trick to show your coworkers and get them an and to at the office at the Christmas party.
Rachel Nabors: When would you possibly use steps in the wild? Well, this is the CSS equivalent of Twitter's back when we had stars instead of hearts.

Let me do that again. So, here, this is a little demo of how CSS animation rocks. You can use a sprite animation to recreate some of these things without using SVG. Little complicated kind of traditional animations. Over here on my site, you'll notice that the more and nix this, those are actual handwritings.

I wrote those in art program. You also notice that the hands swirling around, those are also sprites. If I had made a GIF, I don't remember. If I had made an aminated GIF out of that animation it would have been huge, several megabytes, because if you'll notice in my actual site.

Rachel Nabors: You'll notice that she goes on to say many different things. Her expression changes. This is all sprites. These are images overlaid over her face. The hands are constantly going. Her expression starts changing. She starts laughing. This all using CSS sprites and CSS animation, and steps, a lot of steps.

And it's quite lightweight on the page, compared to say an animated GIF doing the same thing, which would be quite large. So, yes, sometimes it's useful, not all the times, but sometimes you might want to use this for some reason. In which case, it'll be worth faffing about with figuring out how that steps end thing is going to work.

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