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 {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name:
myAnimation;
animation-duration: 3s;

  animation-fill-mode: forwards;

}

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

  background: red;
  position: relative;

animation-name: myAnimation;

animation-duration: 3s;

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

  }

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

    position: relative;

animation-name: myAnimation;

animation-duration: 3s;

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

  }

div
{

animation-name: myAnimation;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

}

div
{

    animation: myAnimation 5s linear 2s infinite alternate;

}