CSS Animations

Surely you’ve seen that there’s no animation, that’s because I’ve defined an initial paused animation state animation-play-state: paused;, and with a hover on the body I change the animation state to running. Try putting the cursor, sorry to people reading this from a mobile device 😅, in the Result area. You’ll see that the animation executes and pauses depending on whether you hover over the document body or not.

Shorthands and default values

The animation shorthand

Generally when we see CSS code with an animation we’ll see something like this:

.logo {
  animation: scale 2s infinite ease-in;
}

It’s the abbreviated way of defining an animation. The specification defines an order for the parameters, to facilitate compatibility between browsers when implementing it.

.logo {
  animation: "animation-name" "animation-duration" "animation-timing-function"
    "animation-delay" "animation-iteration-count" "animation-direction"
    "animation-fill-mode";
}

I’m putting them one under the other to improve readability, but they’re all defined on the same line without separating them with a comma. Although that’s the order defined by the W3C, if the order is changed, browsers are smart enough to understand what each value refers to. One thing to keep in mind is duration and delay, if there’s only one time value, the browser will interpret it as duration and if there are two, the first will be duration and the second will define delay.

Default values

In the examples we’ve been seeing, I’ve defined values for all properties for educational purposes, but we must keep in mind that the absence of any of these properties will be represented with their default value.

For example, there’s no need to define animation-timing-function: ease or animation-delay: 0s, as they are the default values.

The @keyframes

Until now we’ve seen all the properties of time, function, iterations, etc… to add animation to a class, but where do we create or define the animation?

This is where @keyframes come into play. As we saw in the CSS Transitions article, with transitions we can make the browser interpolate between two states and thus achieve an animation. But when we want to have an animation with more than 2 states we have to use @keyframes.

Keyframes refer to animation frames, and we can define as many as we need, let’s look at the code of the animation we’ve been using as an example.

@keyframes logoAnimation {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  20%,
  80% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100px);
  }
}

The first thing we see is that we’re not defining a selector, but an at-rule (like @media, @support, @font-face, etc…), it’s @keyframe followed by the name we want the animation to have. That name is the identifier we’re using in the animation-name property. We continue with a block, as we also do in classes, but this time we don’t define CSS properties, we define keyframe blocks where inside we’ll write the CSS properties we want to animate… now is when the exciting part begins 😊.

To define keyframes, we have two ways of doing it, through keywords or with percentages.

@keyframes <identifier> {
  [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}

from equals 0% and to equals 100%.

These two animations are equivalent, it’s completely indifferent from the browser’s point of view.

@keyframes logoAnimation_keyworks {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes logoAnimation_percentage {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

We can even mix keywords and percentages.

@keyframes logoAnimation {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  20%,
  80% {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}

Multiple animations

Just like transitions, animations support defining multiple animations. This gives us greater control if we want to make a sequential animation.

In this example I’ve created a sequence of 4 animations.

.logo {
  animation: fadeIn 1s ease-in forwards, growth 1s 1s ease-in forwards,
    fadeOut 1s 2s ease-out forwards, logoAnimation 500ms 3s ease-in forwards;
}

We control the animation sequence with the animation-delay property, adding the time of previous animations.

This is very artisanal work and not scalable at all, but we’ll see that when we work with animations in JavaScript.

Conclusion

So far we’ve seen the basics of CSS animation, in implementation we’ll find some cases where we need to know well the possibilities of CSS properties. In future chapters we’ll see implementation examples, debugging, optimization and best practices.