Motion Design with CSS Exercise 4: Wag the Cat
This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Exercise 4: Wag the Cat" Lesson
>> Rachel Nabors: This one's really fun because we get to play with Tuna's tail. Who doesn't like playing with cats' tails? I'll tell you who doesn't like it, the cat. So what we're gonna to do is we gonna change the default CSS animation properties of tuna. So I'm gonna actually go to the site and I'm gonna check to make sure.
[00:00:21] So what we want is we wanna make his tail wag. Cats don't like to be pet, right? So the idea is that this tail should be wagging back and forth to show an angry cat. And when you hover over him, we want him to start wagging his tail because he's angry, cuz you're hovering.
[00:00:39] When you move your mouse away from his tail, he'll stop wagging his tail, it will go to paused. You can do this, you have the power. It's, all you're gonna be doing is manipulating animation direction and paused using classes and hover.