How to Animate With CSS

From the moment I first started learning CSS, I was simultaneously excited and terrified of learning CSS animations. On the one hand, animations are maybe the most exciting and fun aspect of CSS. The simplest animation can breathe life into a user interface and completely transform it.

On the other hand, it’s very hard to make really visually interesting animations. As someone relatively new to web development, I wasn’t sure that diving deep into CSS animations was the best use of my time, but ultimately I had to try them out. They turned out to be just as fun and difficult as I expected.

Animation vs. Transition

When I first started playing around with CSS animations, I thought it would be cool animate some text when you hovered over it. I had already set an animation on this piece of text, but I assumed I could set a new animation property using the :hover pseudo-class.

This resulted in some strange behavior. When I hovered over the text, it switched erratically between the two different animations. What I really wanted to use here was a transition.

Transitions are the better choice for animating transitions to pseudo-class states. Using the transition property, you can tell CSS which property’s transition to animate and for how long.

.greeting {
  color: black;
  font-size: 2rem;
}
.greeting:hover {
  transition: all 2s ease-in;  
  color: red;
  font-size: 6rem;
  cursor: pointer;
}

Here, I’m telling CSS to transition all transition-able properties for 2 seconds using the timing function ease-in. A timing function is an acceleration curve for the transition. You can read more about the different options here.

You can also specify a delay in seconds as the fourth value of the transition property.

Keyframes

Transitions are a nice way to ease in to CSS animations. But the really fun part is using the keyframes at-rule to map out a more complex animation. If an animation sequence is a trip, keyframes are the different stops along the way.

Declaring an animation sequence is as easy as saying: I want this DOM node to change from this property value to this property value:

@keyframes rainbow {
  from {
    background-color: red;
  }
  20% {
    background-color: orange;
  }
  40% {
    background-color: yellow;
  }
 
  60% {
    background-color: green;
  }
  80% {
    background-color: blue;
  }
  to {
    background-color: indigo;
  }
}

Only the from and to states are required, but you can declare any intermediate point between them using percentages. Now, this is only declaring how the animation sequence will proceed. To actually animate a specific DOM node, we have to tell that node to use this rainbow animation.

This is where the different animation properties come in. There are a lot of different properties you can use for animations, or you can use the all-inclusive animation property that works similar to the transition property used above. I’m going to use the separate, specific properties because I think it’s easier to follow.

In the above keyframes declaration, we named our animation sequence rainbow. So, to attach this animation to a DOM node, we simply tell it to use the animation rainbow:

.container {
  animation-name: rainbow;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

You can probably guess what’s going to happen based on the last property. The container will change from red to orange to yellow to green to blue to indigo in the span of one second and repeat that sequence infinitely.

The cool thing about CSS animations is that they’re reusable across different DOM nodes and each DOM node can be assigned multiple animations. To assign multiple animations to a DOM node, just separate them by commas like this:

.container {
  animation-name: rainbow, slidein;
  animation-duration: 1s, 3s;
  animation-iteration-count: infinite, 1;
}

The rainbow animation settings are the same as before. Only now, we a second animation declared named slidein with a duration of 3s and an iteration count of 1.

Those are the basic tools for creating CSS animations. As you can see, learning the how is surprisingly straightforward. Although, like most of CSS, animations are easy to learn, but hard to master. I’ll be playing around with them some more and hopefully will have something cool to share as a follow up in the near future.