Loading lesson path

CSS•Advanced Styling

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