Animation properties

Before we work on more animation examples, let’s take a look at each of the animation properties.

Like the transition property, the animation property can be written using shorthand, or any of these properties can be specified individually.

animation-delay

Similar to transition-delay, we can use this property to make the animation wait before starting. This can be particularly useful in situations where there are multiple animations taking place.

If the animation loops, the delay does not apply each time it loops. The delay only applies to when the animation is applied to the element.

It’s actually possible to give this property a negative value, such as -1s. This would cause the animation to start as if a second has already elapsed.

animation-direction

Animations normally begin at 0% and finish at 100%. Using animation-direction we use the values normal, reverse, alternate and alternate-reverse to control the direction.

“Reverse” causes it to play (and loop) from 100% to 0%, while “alternate” plays from 0% to 100% and back again to 0%.

animation-duration

This is the length of the animation. Similar to transition-duration, this takes a value such as 1s for one second or 200ms for two hundred milliseconds.

animation-fill-mode

By default, an animation will play and then the element returns to its normal state. Using animation-fill-mode we can have the animation “stick” at either the end or beginning state.

Using the value forwards tells the animation to finish and stay on the last keyframe. The value backwards returns to the first keyframe when the animation finishes.

An example of this is the bouncer animation on Hop.ie. The animation plays once and finishes on the last frame. This is using the value forwards.

animation-iteration-count

This is the number of times the animation plays. By default it will play once. You can specify a number, or “infinite” to have it loop forever.

animation-name

The animation-name refers to the keyframes associated with the animation. For example, if the animation-name is set to “foo”, it would use a set of keyframes like:

@keyframes foo {
  ...
}

animation-play-state

If you ever need to pause or resume an animation, this property lets you do so. It takes the values of running or paused, with the default being running. One idea might be to set this value on an animation using JavaScript.

animation-timing-function

This takes the same values the timing function property in transitions, but behaves a little differently. While a timing function, such as ease-out applies to the entire transition, the timing function of an animation applies between each keyframe.

This means that the following keyframes would see the animation starting fast and slowing toward 50%, then picking up fast and slowing down before 100%.

@keyframes foo {
  0% {
    /* Animation starts fast and ease-out makes it slow down before 50% */
  }
  50% {
    /* Again, starts fast and slows toward 100% */
  }
  100% {
    /* fin */
  }
}

This can be tricky to work with. Often when creating keyframe animations I’ll choose the linear timing function and handle the way the animation is paced using keyframes.

Having said that, cubic-bezier timing functions can create some great effects when used with animations, so have a go.

Using timing functions within keyframes

It’s worth noting that when you specify a timing function for an animation, the timing function applies to each keyframe of the animation.

This means that if you were to specify four keyframes, the timing function would apply to each. An ease-out function would slow down as it approached each keyframe.

For that reason we would usually define the timing function for animations as linear, and control the pacing on a per-keyframe basis:

@keyframes my-animation {
  0% {
  ...
  animation-timing-function: linear;
  }
  50% {
  ...
  animation-timing-function: ease-out;
  }
}

In this case the first half of the animation will be linear, and the second half would use the ease-out timing function.

Homework

I’ve created a simple keyframe animation here on CodePen. The properties are listed in the CSS. Try changing some of these properties, and see what happens.