Member-only story
THE DEFINITIVE GUIDE
Your First CSS Animation
So you want to get started with CSS Animations
Let’s say you’re building your very first website. You’ve created your basic elements using HTML, added some pretty styling using CSS. Maybe you have even added some media-queries.
But there’s still something missing .
A little flair.
A little personality.
That’s where CSS Animations come into play!
Introduction
CSS Animations sure are something pretty. Using just a few lines of code we can make elements bounce, move, rotate, or even disappear.
Every single animation consists of 2 parts.
The first step is creating the animation using so called “keyframes”.
The second one is adding this animation to an element and setting its animations “properties”.
Follow Along
So to follow along with this article you can open up your own text editor, but I also created a couple of Sandboxes for you to follow along without having to touch any code yourself.
These are the steps we will be following:
- Creating an animation using keyframes