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

In this exercise you will find a way to walk the cat without using the expensive background positioning technique.
- http://cdpn.io/QbwXry

Get Unlimited Access Now

Rachel Nabors: Background images aren't the most performant thing to animate. Their positions are not the most performant thing to animate. There should be. I totally lied, there is one, one more, one more coding opportunity here, but it's super, super fun. It's all CSS. So you can totally show off how much you know.

We get to walk the cat again. This time, find a way to walk the cat without using expensive background positioning. I'm going to give you a big, fat, hairy clue here. You're going to to want to use transform and you have a sprite image. What could you do to, sa,y move that image around, instead of repositioning it as a background image?

It should be mentioned, by the way, that the solution for this in the curriculum is a little bit different from the solution I'm going to show you. So let me show you how I would do it today. And if you really want to see some fancy work involving a pseudo class you can check out the solution tomorrow.

So let's see what we've got here. We've got a background-position and it's set on the sprite here. The first thing we're going to do, because animating this background position is pretty darn non-performant. And the background position triggers all kinds of stuff. It would be a lot nicer if we move this over to a transform.

We can move a transform around in more browsers more efficiently than we can move this background position. So how do we get this image out from that background position and into a place where we can physically manipulate it with transforms? We do that by physically putting it inside the tuna class.

So we're going to do img src=. There is the sprite, he's still walking. We've gotta stop that. We remove the background image. Actually, this is what it looks like if I remove the background image. You can see, it's just the cat. But I'm going to give him a red background so we can see exactly where the tuna div is.

Now the tuna div that he is sitting inside has a height and width of 200 and 400. We want to only see the things inside that window so we do overflow: hidden. And this will automatically, automagically hide the image that overflows. But for now I'm going to leave that commented out with some illegal CSS.

And now, we're going to see what we can do to animate it. So let's get rid of this animation on the tuna div, we're going to put it on tuna's image. Well walk cycle, if we've noticed, is still using background positions and there's no background position on that image. We want it to use transforms.

So what's that going to look like? Well you know I don't even think we need this 0%. Let's do this, just use 100%. Transform: translate, we're going to use translate. And we're going to use translateY because we're translating on the y axis. And we're going to try one 100%. Let's see what that does.

Okay, we need to use- 100%. Boom. So now all we've got to do is come up here. Turn on overflow hidden, and get rid of the background. And tuna is walking. It is the same animation only instead of using background position, it's now actually using an image. And moving that image around on the page.

Doesn't disrupt the layout, doesn't trigger repaints in Chrome, pretty nice.

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