CSS Animations

CSS animations give you a second way to animate your elements. They’re like transitions, but they’re way more powerful.

How powerful?

You can create animations like this heartbeat here if you know it well. :)

Creating the animation

To create an animation, you need to write the animation with the @keyframes syntax. It looks like this:

@keyframes animation-name {
  0% {
    margin-left: 0px;
  }

  50% {
    margin-right: 400px;
  }

  100% {
    margin-left: 0px;
  }
}

In the keyframes above, the 0%, 50% and 100% values are points on an animation timeline. It means the following:

1. Start the animation (0%); set margin-left to 0px
2. Start to middle of animation (50%); change margin-left to 400px
3. Middle to end of animation (100%); change margin-left to 0px

You can add any number of points on the @keyframes declaration. Each point should be a percentage value.

@keyframes animation-name {
  0% {
    /* ... */
  }
  25% {
    /* ... */
  }
  50% {
    /* ... */
  }
  75% {
    /* ... */
  }
  100% {
    /* ... */
  }
}

Using the animation

To use the animation, you use the animation property. Like transition, animation is a shorthand (but for 8 properties!).

.element {
  animation: name duration timing-function delay iteration-count direction
    fill-mode play-state;
}

The eight properties are:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.element {
  animation-name: name;
  animation-duration: duration;
  animation-timing-function: timing-function;
  animation-delay: duration;
  animation-iteration-count: count;
  animation-direction: direction;
  animation-fill-mode: fill-mode;
  animation-play-state: play-state;
}

You should already be familiar with four of them:

1. animation-name is the name of the animation. It’s the same name you create with @keyframes.
2. animation-duration is the duration of the animation. It is written in seconds with the s suffix, like 3s.
3. animation-timing-function is the timing-function used for the animation. It the same as transition-timing-function.
4. animation-delay is the duration to wait before the animation starts. This delay is also applied every time the animation repeats.

These four properties are slightly new:

1. animation-iteration-count determines how many times the animation should repeat. If you want the animation to loop infinitely (until you say stop), use infinite.
2. animation-direction is the direction of the animation. More on animation-direction below.
3. animation-fill-mode tells CSS what to do when the animation ends. We won’t cover this property.
4. animation-play-state determines whether the animation is playing or paused.

Animation-direction

animation-direction determines how the animation is played. You can set it to four values:

1. normal
2. reverse
3. alternate
4. alternate-reverse

Here’s the difference between each of them:

1. normal: starts at 0% and ends at 100%
2. reverse: starts at 100% and ends at 0%
3. alternate: Every odd iteration starts at 0% and ends at 100%. Every even iteration starts at 100% and ends at 0%
4. alternate-reverse: Every odd iteration starts at 100% and ends at 0%; every even iteration starts at 0% and ends at 100%

See this CodePen for a demo: https://codepen.io/zellwk/pen/eGxBWP?editors=1100.

Animation-play-state

CSS plays animations immediately when the page loads. If you want to pause your animations, you need to set animation-play-state to paused.

/* Pause an animation */
.element {
  animation-play-state: paused;
}

If you want to play the animation, you need to set animation-play-state to running.

/* Plays animation when a user hovers over the element */
.element:hover {
  animation-play-state: running;
}

See this pen for a demo: https://codepen.io/zellwk/pen/WZPRva.

Note: pause your CSS animations when you don’t need them. This saves precious computing power!

Animating two or more properties.

You can use multiple animations at the same time. Just do the same as what you do with CSS transitions and you’ll be fine 🤓.

.selector {
  animation-name: slideIn, fadeIn;
  animation-duration: 2s;
}

When to use CSS Animations

CSS animations can be complicated. I recommend using them only if the following conditions are met:

1. You need to change a property more than once in the animation
2. You need to change more than 2 properties at once
3. You want to trigger the animation when the screen loads (without listening for any JavaScript event)
4. The animation has less than 4 points (the percentage thing)

If your animations are simpler than the conditions above, use CSS Transitions.

If your animation is more complicated than the conditions above, use JavaScript to animate.

Exercise

1. Create a @keyframes declaration
2. Write the animation with the animation shorthand
3. Experiment with animation-iteration-count
4. Experiment with animation-direction
5. Pause and play our CSS animation with animation-play-state