THE DEFINITIVE GUIDE

Your First CSS Animation

So you want to get started with CSS Animations

Photo by Pankaj Patel on Unsplash

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
• Adding the animation to an element

That’s all you’ll need 😄

Creating an animation using keyframes

So what is a keyframe exactly? Wikipedia defines it as:

A keyframe in animation and filmmaking is a drawing that defines the starting and ending points of any smooth transition. (Wikipedia)

Smooth.

Transition.

Keyframes in CSS create a smooth transition between two CSS properties. Let’s say you want to fade in an object. You define its initial opacity and the new value of the opacity, after which CSS magically creates this smooth transition between the 2 points.

Let’s see how that could look in our CSS file.

First, the keyframes is called with the new animation’s name:

@keyframes fadeIn {…