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
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:
- Set up a
@keyframesat-rule that dictates the behavior of the animation. - Assign the name of your
@keyframesrule to the target element as itsanimation-name. - On the element, specify the
animation-durationand any other animation specific properties, e.g.animation-iteration-count.
Ta-da!
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!
Example 3: Ric Flair Fly-In List
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!
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?