DEV Community

Cover image for It’s alive! Simple CSS animations in CodePen
Brett Stevens
Brett Stevens

Posted on

30 11

It’s alive! Simple CSS animations in CodePen

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

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (1)

Collapse
 
nikosdev profile image
Nikos Kanakis

Looks amazing ;)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more