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 4: 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 4.

Get Unlimited Access Now

Transcript from the "Exercise 4: Solution" Lesson

>> [MUSIC]

>> 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, cuz cats beat their tails against things when they're angry with you.

[00:00:21] 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 gonna be animating, just the tail. And we are gonna scope, scope our animations to it. We've already got a tail wag animation running. And we want to give it infinite iteration count.

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

[00:01:04] Down here, it's gonna 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.

[00:01:28] Somebody got it. [LAUGH] I made a joke. So what we're gonna do is we're gonna go tail, pseudo class hover and we're gonna 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.

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

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

[00:02:31] I'm Rachel Neighbors on the Twitters. I'd love to see what people come up with.