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

div {

width: 100px;
  height: 100px;

position: relative;
  background-color: red;

animation-name: myAnimation;

animation-duration: 4s;
  animation-direction:
reverse;
}

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

Example

div {

width: 100px;
  height: 100px;

position: relative;
  background-color: red;
  animation-name:
  myAnimation;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction:
alternate;
}

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

Example

div {
  width: 100px;
  height: 100px;

position: relative;
  background-color: red;
  animation-name:
  myAnimation;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction:
alternate-reverse;
}

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

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

    animation-fill-mode: forwards;

  }

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

div {
  width: 100px;
  height: 100px;

  background: red;
  position: relative;

animation-name: myAnimation;

animation-duration: 3s;

animation-delay: 2s;
  animation-fill-mode: backwards;

  }

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

div {
  width: 100px;
  height: 100px;
  background: red;

    position: relative;

animation-name: myAnimation;

animation-duration: 3s;

animation-delay: 2s;
  animation-fill-mode: both;

  }

CSS Animation Shorthand Property

The example below uses six of the animation properties:

Example

div
{

animation-name: myAnimation;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

}

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

Example

div
{

    animation: myAnimation 5s linear 2s infinite alternate;

}

CSS Animation Properties

The following table lists the @keyframes rule and all the CSS animation properties: