It’s alive! Simple CSS animations in CodePen

#html #css #animations #codepen

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

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).