Home

CSS Animations Quick Start Guide

Pratham

Learn the basics of CSS animations to catch the attention of your website visitors.

Animations on your website can help catch the attention of visitors landing on your web pages.

You can create some amazing animation using just CSS. In this post, we will explore some animation basics so you can start adding animations to your site today!

Understanding Keyframes

Animation is all about changing one or more CSS rules over some interval or length of time. To understand how this works we must first take a look at the @keyframes rule.

CSS Keyframes Diagram

The @keyframes rule has four main components:

  • @keyframes at-rule keyword, which tells CSS that we are defining styles for keyframes. Learn more here.
  • The animation name, which is a unique name to describe one particular set of keyframes.
  • A series of defined rule sets. These are percentages (of 100%) that describe a set of rules at that point in the animation. from and to (in the image above) are built-in aliases to represent 0% and 100%, respectively.

Confusing? Don't worry! Let's move further everything will be crystal clear.

Implementing an Animation

You can implement an animation using the animation property. Here's a super simple example:

.element {
animation: move 4s;
}

This is specifying that elements with the class element should apply the keyframe rules called move, and that the animation should take 4s.

animation is a shorthand property, meaning that it combines several properties together. In other words, we just specified animation-name and animation-duration in the same line. The long way of writing this would be this:

.element {
animation-name: move;
animation-duration: 4s;
}

Here's a more complex example:

CSS Animation Shorthand Property

The animation property is nice and concise, but takes a little time to become familiar with it. It's worth the effort, though. It'll save you time in the long run.

A Simple Animation

The animation property is used to bind keyframes with a particular element.

For example, suppose I want to move my element 500px from left to right in four seconds. The CSS would look something like this:

@keyframes move {
from {
left: 0;
}
to {
left: 500px;
}
}

.element {
animation: move 4s;
}

That results in this behavior:

Simple Animation

Adding Custom Percentages

Suppose that I wanted to change the background-color of an element, and that I wanted to do that five times throughout the animation. The keyframes animation might look like this:

@keyframes move {
0% {
background-color: black;
}
25% {
background-color: red;
}
50% {
background-color: yellow;
}
75% {
background-color: green;
}
100% {
background-color: blue;
}
}

.element {
animation: move 4s;
}

This is the result:

Animation with Custom Percentages

Adding a Delay

You can also specify the delay in your animation with animation-delay. This describes an amount of time to wait before starting the animation.

Say you wanted to wait two seconds before beginning the animation. The shorthand property looks like this:

.element {
animation: move 4s 2s;
}

The longer one looks like this:

.element {
animation-name: move;
animation-duration: 4s;
animation-delay: 2s;
}

Repeating Animations

Our animation currently only runs once. This is because we haven't applied the animation-iteration-count property, which specifies the number of times an animation should run.

If you wanted to run the animation twice, you could use 2 at the end of your shorthand rule:

.element {
animation: move 4s 2s 2;
}

Which translates to this:

.element {
animation-name: move;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: 2;
}

Note: You can also pass infinite to animation-iteration-count to continuously run the animation in a loop.

Also note that the delay only takes effect before the loop begins. The delay will not occur on each animation.

Take a look here:

Repeating CSS Animation

Smoothing out Animations

Creating a smooth animation can really clean up the experience. animation-timing-function property for that.

This property specifies the speed curve of an animation. There are many functions that you can use:

  • ease (slow start, then fast, then slow)
  • linear (same speed)
  • ease-in (slow start)
  • ease-out (slow end)
  • ease-in-out (slow start and slow end)
  • cubic-bezier (customizable)

Check out this code for a better understanding. And here's a quick preview:

CSS Animation Timing Function

Applying Styles Before and After Animations

Animations do not affect the styling of the element before or after the keyframes are executed. In order to persist the styling based on last or first keyframe, we have animation-fill-mode.

It accepts following values:

  • forwards (element will retain last keyframe styling)
  • backwards (element will get the first keyframe value even in animation-delay period)
  • both (both of the above)

Take a look at this example:

CSS Animation Fill Mode

As you can see, the blue box stopped at left: 500px because forwards is begin applied on it. And the orange box has a black background even when it's in a delay period of 2s.


That rounds out an introduction to CSS animations. I hope you increased your knowledge of animations and are now ready to go create a great, interactive experience with your website visitors.

This content was originally sourced from @Prathkum's Twitter thread on the subject. Follow @Prathkum for more great CSS teachings.

Let's Connect

Keep Reading

100 Free CSS Resources

There are countless ways to learn CSS. Here are 100 resources in various categories to get you started.

Pratham Oct 14, 2021

A Beginner's Guide to Z-Index

The z-index is a powerful yet confusing concept of CSS. Let's make it easy!

Pratham Jun 04, 2021

Everything You Need to Know about CSS Position Property

Dive deep into CSS position with real examples.

Pratham Aug 19, 2021