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 make the cate wag it’s tail using the advanced CSS animation properties.
- https://cdpn.io/AfDBF

Get Unlimited Access Now

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 going to to do is we going to change the default CSS animation properties of tuna. So I'm going to actually go to the site and I'm going to check to make sure.

So what we want is we want to 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, because you're hovering.

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 going to be doing is manipulating animation direction and paused using classes and hover.

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