loading...
Cover image for It’s alive! Simple CSS animations in CodePen

It’s alive! Simple CSS animations in CodePen

brettmstevens7 profile image Brett Stevens ・2 min read

After stumbling upon the Dogs of CodePen, I thought it would be fun to try animating our company mascot, Cody.*

It’s alive!

Whether you’re new to coding or just interested in making an animation for fun, here’s how you can make your own.

First, I partitioned Cody into four parts—a head, body, left arm, and tail—using Figma. These were the parts I wanted to animate in my CodePen.

Next, I exported these partitions to SVG and uploaded them to a URL encoder. Asset uploading is a pro feature of CodePen, but there are several different ways you can use Data URIs instead of uploading assets. I am using the Data URI as the background-image property.

Then I created a parent <div> element for the body and nested a child <div> element for the tail, arm, and head. I set the position of the parent element to relative and the position of each child element to absolute (if you need some refreshing on CSS positioning, here is a good guide).

I used keyframe-based syntax to create a tail wag, subtle thumbs-up motion, and a slowly unraveling tongue.

Last but not least, I made a simple Javascript function to add and remove classes when you click anywhere on Cody.

Happy coding!

*More about Cody: Cody is our robot AI puppy-persona whose mission is to help developers improve their craft. Cody is a border collie, one of the world’s smartest dogs and was created by Simon Oxley (the creator of the Twitter bird and the GitHub Octocat).

Posted on by:

Discussion

markdown guide