Simple CSS Animation Examples to Help You Figure It Out

Sometimes I want to add a little flair to a project so I start researching JavaScript libraries. Then I realize I can just do this with CSS.

Before you bring in that giant JavaScript library, consider a simple CSS animation like this one. It took me around 15 lines of code.

In the following, I’ll show you two simple examples and then I’ll also show you the slightly more complex animation from the video.

If you’d rather see the code and explanatory comments, skip to the GitHub or see it work in this CodePen.

Example 1: Waving Hand

Image for post
Image for post

This first example deals with waving a hand back and forth. I could imagine a use case where you want to draw attention to an image or button by giving it a little wiggle as the page opens.

To make this work, we’ll follow these steps:

  1. Set up a @keyframes at-rule that dictates the behavior of the animation.
  2. Assign the name of your@keyframes rule to the target element as its animation-name.
  3. On the element, specify the animation-duration and any other animation specific properties, e.g. animation-iteration-count.

Ta-da!

Image for post
Image for post

Example 2: Color Circle

The first example employs a from / to syntax of @keyframes. This time we are more precise with the timing of property changes. To do this, we specify at what point a property will change with a percentage of the duration.

Bam!

Image for post
Image for post

Example 3: Ric Flair Fly-In List

Image for post
Image for post

For the final example, I have set up a series of animations that trigger after a staggered delay. It feels like a PowerPoint when the bullets fly in from off screen. It’s kinda fun.

Woooooo!

Image for post
Image for post

Caveat

There are cross browser issues with animations that typically resolved with a browser-specific vendor prefix. Check out this article on Stack Overflow for more info.

Conclusion

CSS animations intimidated me, but ultimately, they had one of the quickest learning curves. I hope you pick up on it quick and find a fun way to use one on your next project.

Thanks for reading!

Resources:

CSS Animations

https://www.w3schools.com/css/css3_animations.asp

Why Doesn’t CSS Feature Work in Browser But Not In Others?

https://stackoverflow.com/questions/25110510/why-doesnt-css-feature-work-in-browser-but-works-in-others/25110511#25110511

Written by

Software dev. Love root beer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store