Loading lesson path

CSS•Advanced Styling

CSS Animation Properties

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind CSS Animation Properties?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___: 100px;

3Order

Put the learning moves in the order that makes the concept easiest to apply.

CSS animation-fill-mode Property

CSS animation-direction Property

CSS Animation Properties

This page covers the CSS animation direction, fill mode, and the shorthand property.

CSS animation-direction Property

The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.

The animation-direction property can have the following values:

normal - The animation is played as normal (forwards). This is default
reverse - The animation is played in reverse direction (backwards)
alternate - The animation is played forwards first, then backwards
alternate-reverse - The animation is played backwards first, then forwards

The following example will run the animation in reverse direction (backwards):

Example

Formatted code

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
  animation-direction: reverse;
}

Live preview

The following example uses the value "alternate" to make the animation run forwards first, then backwards:

Example

Formatted code

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Live preview

The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards:

Example

Formatted code

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Live preview

CSS animation-fill-mode Property

CSS animations do not affect an element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.

The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).

The animation-fill-mode property can have the following values:

none - Default value. Animation will not apply any styles to the element before or after it is executing
forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions

The following example lets the <div> element retain the style values from the last keyframe when the animation ends:

Example

Formatted code

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Live preview

The following example lets the <div> element get the style values set by the first keyframe before the animation starts (during the animation-delay period):

Example

Formatted code

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Live preview

The following example lets the <div> element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:

Example

Formatted code

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Live preview

CSS Animation Shorthand Property

The example below uses six of the animation properties:

Example

Formatted code

div {
  animation-name: myAnimation;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Live preview

The same animation effect as above can be achieved by using the shorthand animation property:

Example

Formatted code

div {
  animation: myAnimation 5s linear 2s infinite alternate;
}

Live preview