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.
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 its
- On the element, specify the
animation-durationand any other animation specific properties, e.g.
Example 2: Color Circle
The first example employs a
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.
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.
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.
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!
Why Doesn’t CSS Feature Work in Browser But Not In Others?