Motion Design with CSS Motion Design with CSS

Exercise 3 Solution

Rachel Nabors
Rachel Nabors, LLC
Check out a free preview of the full Motion Design with CSS course:
The "Exercise 3 Solution" 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:

Rachel walks through the solution to exercise 3.

Get Unlimited Access Now

Transcript from the "Exercise 3 Solution" Lesson

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

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

[00:00:25] Yes. So, we've got this background image, which is 12 tunas tall, 2400 pixels, cuz 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.

[00:00:49] So, interesting thing about naming keyframes block. You can't give it a name like running, cuz 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.

[00:01:13] You couldn't do that. I don't think you can even use numbers as names. So, we're gonna 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.

[00:01:44] And we're gonna 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.

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

[00:02:36] 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 gonna give it linear. This is how we make a zoetrope.
>> Speaker 2: It's tunaWalk
>> Rachel Nabors: You're right, it is tunaWalk.

[00:03:01] We're using first names already. And we would wanna use 2200 pixels, cuz 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.

[00:03:18] 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 gonna do steps (12), but it's not quite lining up, why is that?

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

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

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

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

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

[00:05:31] You're probably not gonna 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.

[00:05:51] [LAUGH] 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.

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

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

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