Jhey Tompkins

Posted on Dec 20, 2019 • Edited on Apr 5, 2020

A Guide to CSS Animation - Part 2

#css #animation #beginners #webdev

Hey! You’re back 🙌

In part 1, we got things moving. Now we will dig into applying animations. We already introduced animation-name and animation-duration, but there’s much more to look at.

Don’t forget, all the code is available in the following CodePen collection 👍 That way you can edit and play around with the examples.

animation-iteration-count

Let’s pick up from where we left off with by modifying our first animation. If you need a little refresher, this is what we had.

But the animation only ran once. What if we wanted the animation to run many times or never stop? In the case of loading animations, we may want the animation to be infinite. This is where animation-iteration-count comes into play.

Let’s say we wanted the animation to run five times giving us ten seconds of animation.

div {
  animation-duration: 2s;
  animation-name: spin;
  animation-iteration-count: 5;
}

It’s that easy! Let’s turn our spinning square into a loading spinner. To do this, animation-iteration-count also accepts the keyword infinite 👍

div {
  animation-duration: 2s;
  animation-name: spin;
  animation-iteration-count: infinite;
}

Which gives us the following 🎉

animation-timing-function

Let’s take another look at that spinning square. The square does keep on spinning. But not without a little break after every spin. This is due to the animation-timing-function.

The animation-timing-function property defines the speed characteristics of an animation. It accepts a few different values.

cubic-bezier(x1, y1, x2, y2) - provides ability to define custom speed
ease - start and end slowly but speedier in the middle(default)
ease-in - start slowly
ease-in-out - start and end slowly but not the same as ease
ease-out - end slowly
linear - maintain speed throughout
steps(number, direction <optional>) - provides a way to split the animation into equal steps. direction values can either be start or end. start means that the first step happens at the start of the animation. end means that the last step happens at the end of the animation. end is the default value.

So which one do you choose? Different scenarios will call for different easing. The following is a nice short resource about the basics of easing.

You can experiment with different easings to find what feels right in your applications. This pen shows how animation-timing-function can affect the same animation.

The ease that might be trickier to grasp is cubic-bezier. In essence, the cubic-bezier function defines a cubic bezier curve. There is a good explanation of the cubic-bezier function in this article.

Or, you may prefer to play with the cubic-bezier function and compare it to the other easing values. cubic-bezier.com has you covered 👍

So returning to our spinning square. How do we remove that little break?
We can apply linear timing to replace the default ease timing.

div {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: spin;
  animation-timing-function: linear;
}

This would give us

Sweet 🍭

animation-play-state

Play state is pretty simple. You can pause animations or have them running. We use the animation-play-state property to control this. For our spinning square we could introduce a checkbox that toggles the play state. Using the sibling selector, we can toggle the play state 👍

div {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: spin;
  animation-play-state: paused;
  animation-timing-function: linear;
}

:checked ~ div {
  animation-play-state: running;
}

When it’s :checked we set the play state to running 👟

animation-delay

Next up is delaying animations. Like animation-duration, animation-delay takes a time value in milliseconds or seconds.

Let’s add some extra squares and have them all spin side by side once. Note we’ve changed the animation-timing-function value to ease-out.

If we add a delay to each square could we create a staggered effect?

div {
  animation-duration: 1s;
  animation-name: spin;
  animation-timing-function: ease-out;
}
div:nth-of-type(1) {
  animation-delay: 0s;
}
div:nth-of-type(2) {
  animation-delay: 0.5s;
}
div:nth-of-type(3) {
  animation-delay: 1s;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

The answer is yes! 👍

But, if we then wanted the squares to keep spinning we would lose the staggered effect. This is because animation-delay is only applied once before the animation begins 👎 It does not apply to every iteration of an animation. At this point, we have two choices. We could experiment with different delays using the Animations Inspector. Or we could try stalling the first half of the animation by delaying the spin.

@keyframes spin {
  0%, 50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

In fact, if we leverage CSS variables, we can create some interesting effects with delay. For example, using negative delays. This can give the effect of our animation already being in full swing at a certain point. A great use case is staggering animations without staggering elements into animated states. Move the slider in this demo to see some of the different effects we can achieve.

animation-fill-mode

Next up is animation-fill-mode. This one’s magic 🎩

By default, when we apply an animation to an element, it has no effect before or after it has run. animation-fill-mode changes that.

The values for animation-fill-mode that we can use;

none - element retains no styling
forwards - element retains animation styling
backwards - element retains style from the first keyframe
both - element retains styling in both directions

Let’s consider an animation where we shrink an element to half its size. The animation-fill-mode is set to none.

Without using animation-fill-mode the element returns to initial size at the end of the animation. But using animation-fill-mode means we can keep the element at half size once the animation ends 👍

div {
  animation-delay: 1s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: shrink;
  animation-timing-function: ease-out;
}
@keyframes shrink {
  to {
    transform: scale(0.5);
  }
}

Now a more common scenario for using animation-fill-mode is when showing and hiding elements. Consider a scenario where we have three elements that we want to fade in.

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

We’d prefer a staggered effect so we give each element a different animation-delay.

But the outcome is not quite as desired because we didn’t use animation-fill-mode 👎 Applying animation-fill-mode: backwards will fix it!

For another demo consider this walk sign using animation-fill-mode 🚶

animation-direction

Last but not least is animation-direction. No surprises that this property allows you to define the direction of your animation. There are four main keywords;

alternate - the direction of the animation alternates on each iteration
alternate-reverse - same as alternate but starts in reverse
normal - self-explanatory
reverse - the animation is played in reverse

For example we could use alternate for something that opens and closes.
How about a clapper board?

Using an animation-iteration-count of 2 with animation-direction alternate saves us writing separate animations.

animation shorthand

If you’ve got this far, that’s all the animation properties 🎉 You know them all now 🤓 There’s now an opportunity to tidy up your animation code by using the shorthand property. That’s right, you don’t need to write out all the properties each time 😅

This

div {
  animation-delay: 1s;
  animation-direction: normal;
  animation-duration: 0.5s;
  animation-fill-mode: normal;
  animation-iteration-count: infinite;
  animation-name: spin;
  animation-play-state: running;
  animation-timing-function: ease-out;
}

Is equivalent to this

div {
  animation: spin 0.5s 1s ease-out infinite normal none running;
}

Sweet 🍭

animation: [NAME] [DURATION] [DELAY] [TIMING-FUNCTION] [ITERATION-COUNT] [DIRECTION] [FILL-MODE] [PLAY-STATE];

Those properties are optional so we can use whichever combination required 👍

But that’s not all. Using the animation property makes it a little easier to apply many animations to an element.

Consider an element that we make come in from below and then rotate by 45 degrees.

div {
  animation-delay: 0s, 0.5s;
  animation-duration: 0.5s, 0.75s;
  animation-fill-mode: forwards;
  animation-name: flyIn, rotate;
}
@keyframes flyIn {
  from {
    opacity: 0;
    transform: translateY(300%) scale(0);
  }
}
@keyframes rotate {
  to {
    transform: rotate(45deg);
  }
}

You can use comma-separated values for your animation properties. But you could also do this

div {
  animation: flyIn 0.5s forwards, rotate 0.5s 0.75s forwards;
}

This opens up a whole plethora of opportunities 🤓

That’s it for Part 2! 🎉

We’ve gone through the different animation properties and their behavior.

You should now be in a pretty good place with CSS animation 💪 I hope you’ll join me in Part 3 where we wrap up by looking at different ways of using CSS animations.