Motion Design with CSS

Motion Design with CSS Exercise 4: Wag the Cat

Topics:
Rachel Nabors
Rachel Nabors
Rachel Nabors, LLC

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: Wag the Cat" 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:

In this exercise, you will make the cate wag it’s tail using the advanced CSS animation properties.

Get Unlimited Access Now

Transcript from the "Exercise 4: Wag the Cat" Lesson

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

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