Introduction

I really appreciate a good UX. When a site I’m browsing comes to life, I really get a kick out of it. A lot of the web can be kind of, familiar. You see certain design elements so frequently that they start to feel predictable. When I encounter a great animation or find myself pleasantly surprised by an interactive element, I appreciate it. It's memorable and I find it leaves a lasting impression. It’s one of the reasons I enjoy visiting Apple’s website. They always find a way to add a refreshing flair to their pages. I almost always hear myself saying "Oh, that's cool!"

One way we can bring a similar flair in our own work is by using CSS animations. CSS provide us with a set of tools that makes it easy to add animation sequences of own design to our DOM elements. Let’s take a look at how we can use animations in our work to make our pages and components more interesting.

Before We Get Started

I've included a several examples. If you want to see the code in action, you can check out the CodePen here. Fork yourself a copy and experiement!

General Concepts

The Animation and Transition Properties

When animating things in CSS we are given two properties to handle the task. Transition and Animation. Each has their own advantages and disadvantages and choosing which to use depends on what you’re trying to accomplish.

Transition

The quickest way to get an animation working is with the transition property. It gives us the ability to describe how an element changes from one state to another. You can think of these as "A to B" animations. Usually, these are used in conjunction with pseudo-selectors like :hover, because they can be used to easily trigger a state change.

Transitions are easy to understand and use, but are limited when you want to add more complexity to an animation. If you need more control over the timing and other characteristics of your animation we need to use the animation property instead.

Animation

The animation property lets us configure things like the timing, duration, and other details of how our animation should progress. animation is actually a shorthand for animation-name which also has several sub-properties that we can use to further configure our animation sequence. These sub-properties along with the use of keyframes allow us to do things that are not possible with the transition property alone.

A list of animations sub-properties can be found here

despite the added flexibility we gain from using animation and its sub-properties, it's not often that we find ourselves needing all of them. Actually, we really only need to give it a name and duration (A duration is not technically required either, but the initial value is 0s. So, if you want your animation to play, you need to specify a duration). Because of this, I opt to use the animation shorthand property on its own, only change the properties I need and allow the browser to handle the rest.

Keyframes

Another fundamental concept to understand when it comes to animations, of Keyframes.

What is a Keyframe anyway?

Take a moment to think about a classic, “flip-book” style animation. There is a slightly different drawing on each page, then as the reader quickly flips through the pages, the images appear one after the other, giving the appearance of motion. Each of these individual pages is called a frame.

A Key frame (or keyframe) then, is essentially a moment in time in our animation. We can use keyframes to define what we want to happen in our animation, and when it should occur. The browser then uses a process called tweening to calculate what should be happening between the keyframes we’ve defined, and fills them in for us, this is how the illusion of motion is created.

Keyframes are used to control the steps in an animation sequence, by allowing us to define the styles for that particular frame.

Did You Know?

The concept of keyframes goes well beyond CSS! Keyframes are an essential part of both animation and filmmaking. You can read more about keyframes here

How To Use Keyframes

Using keyframes is fairly simple. We define our animation by giving it a name, and specifying where our keyframes exist in our animation sequence, by using a percentage of time. Within each keyframe we can define the styles of our element.

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

This creates an animation called slidein. We’ll use this name to reference the animation later in our CSS rule. Notice how rather than using a percentage above, I’ve used the values from and to. This is another way of saying 0% (from) and 100% (to), in a more readable way.

@keyframes slidein {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}

What Have We Learned So Far?

We now know that we have two primary options when it comes to using animations in CSS. The transition property let’s us make simple “a to b” animations, and the animation property gives us complete control over our animations along with some added complexity.

We can then use keyframes or a pseudo selector to trigger our animation on the proper element.

Now that we have basic understanding of the fundamentals, let’s see them in action.

Examples

In our example we have a box that we are going animate by using two methods we just learned about.

Using the Animation Property

First we use the animation property to apply our animation to the box element.

We do this by using the same name that we define in our keyframes, which references the animation we want to use.

.box {
    animation: colorChange 3s
}

@keyframes colorChange {
    from {
        background-color: blue;
    }
    to {
        background-color: green;
    }
}

Notice that because we are using the animation property, which is a shorthand we can specify the other parameters we need and omit what we don’t and the browser will handle the rest. We’ve specified a name ( colorChange) and and duration (3s) for our animation.

Below our box element we’ve defined our colorChange animation using the keyframes at-rule. We also use the aliases “from” and “to”. Because we want our box to go from (0%) blue to (100%) green.

Using the Transition Property

And here is the exact same animation but this time we use the transition property to achieve the same results.

.box {
  background-color: blue;
    transition: all 3s linear;
}

.box:hover {
  background-color: red;
}

Rather than use keyframes, like we do when using the animation property. When using transition we don't need a separate name or keyframe rule for the animation. Instead, since we are just changing our element’s color from one state to another, we can make use of pseudo-selectors, in this case :hover, to act as the trigger for our animation.

Adding Complexity w/ the Animation Property

As I mentioned earlier, the animation property can be used to add additional complexity to our animation sequences that the transition property is not equipped to handle.

Let’s revisit our earlier example, but this time, I want to make it so that the box changes colors a few more times. Lets change it to cycle though all of the colors of the rainbow. (ROYGBIV)

After some quick math, we know that each color change should take roughly 14% of our total animation. (100 / 7 = 14.28). Lets add the remaining keyframes and test our new animation.

.box {
  animation: colorChange 3s;
}

@keyframes colorChange {
  0% {
    background-color: red;
  }

  14% {
    background-color: orange;
  }

  42% {
    background-color: yellow;
  }

  56% {
    background-color: green;
  }

  70% {
    background-color: blue;
  }

  84% {
    background-color: indigo;
  }

  98% {
    background-color: violet;
  }
}

After adding the remaining keyframes and telling our CSS what color we’d like our element to be at each one, we’ll see our updated animation come to life. Our box element will cycle through each of the colors, playing our animation sequence just as we’ve defined it in our keyframes.

The End

By now you should have a better understanding of CSS animations. Some nice animations can be the difference between an average site and a pleasant one, so take the time to dive into the topic even further. This is a good start, but what we've covered here is only the beginning of what is possible.

Thanks for reading!

Live Examples

If you want to see the examples in this article in action, you can fork the CodePen here.