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

Rachel walks through the solution to exercise 4.

Get Unlimited Access Now

Rachel Nabors: Let's do this little experiment together now, and you can compare what I get with what you got. So here we've got Tuna, and we want him to wag his tail anytime we hover on his tail. So whenever we hover on his tail he starts wagging it, because cats beat their tails against things when they're angry with you.

I know this. I have the scars to prove it. So this, initially, we've got this tail element. And that's the thing that we're going to be animating, just the tail. And we are going to scope, scope our animations to it. We've already got a tail wag animation running. And we want to give it infinite iteration count.

We want it to run constantly. It just snaps back, that looks terrible, right? We don't want it to just be like thumping down and up, it looks unnatural. If we set it to alternate though, that background position is going to move from 0% to 100% over and over again.

Down here, it's going to go back and forth, back and forth. Giving him that wonderful kind of pendulous tail swing. However we don't want him to be running his little tail swing by default. We only want him to do that when he's been hovered. So let's give them an animation-play-state of paused, get it, paused.

Somebody got it. I made a joke. So what we're going to do is we're going to go tail, pseudo class hover and we're going to grab that animation-play-state. I'm a copy and paste coder what can I say. You'll see all my typos if I try to write it out and then we'll be here forever looking for them.

And so we set it to running when it's being hovered, watch what happens. So anytime I pet him, he's like stop it, I'm watching birds. Stop it, stop it. All right, so that's a cute thing. You might use this, for instance, if you have a very fancy button effect or something like that.

Which I'm not saying you should make really fancy button effects, but if you did, you might have it only run when people hover over it.
Rachel Nabors: I don't know, I think you could do some cool things with it, if you do feel free to send them my way.

I'm Rachel Neighbors on the Twitters. I'd love to see what people come up with.

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