CSS animation-fill-mode Property

The animation-fill-mode property in CSS defines how a CSS animation should apply styles to its target before and after it is executed. It allows you to control whether the animation’s keyframes have effects outside its execution time.

Syntax of animation-fill-mode

</>

Copy

animation-fill-mode: none | forwards | backwards | both | initial | inherit;

Values

Value	Description
`none`	No styles are applied to the target before or after animation execution. This is the default value.
`forwards`	The target retains the styles defined in the last keyframe after the animation ends.
`backwards`	The target applies the styles defined in the first keyframe immediately upon applying the animation, before the animation starts.
`both`	The target applies the styles of the first keyframe before the animation starts and retains the styles of the last keyframe after the animation ends.
`initial`	Sets the property to its default value (`none`).
`inherit`	Inherits the value from the parent element.

Default Value

none

Examples for animation-fill-mode

Using the CSS animation-fill-mode Property

The following examples demonstrate how the animation-fill-mode property can be used to control how animations apply styles before and after their execution.

</>

Copy

/* Apply no styles before or after animation */
.element {
  animation-fill-mode: none;
}

/* Retain styles from the last keyframe after animation */
.element {
  animation-fill-mode: forwards;
}

/* Apply styles from the first keyframe before animation */
.element {
  animation-fill-mode: backwards;
}

/* Apply styles from the first and last keyframes */
.element {
  animation-fill-mode: both;
}

Example for Applying animation-fill-mode

The following example demonstrates the use of animation-fill-mode with animations that move elements horizontally.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  @keyframes move {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(200px);
      background-color: green;
    }
  }

  .none {
    animation: move 2s;
    animation-fill-mode: none;
  }

  .forwards {
    animation: move 2s;
    animation-fill-mode: forwards;
  }

  .backwards {
    animation: move 2s;
    animation-fill-mode: backwards;
  }

  .both {
    animation: move 2s;
    animation-fill-mode: both;
  }

  .box {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: red;
    line-height: 100px;
    color: white;
    font-weight: 600;
    text-align: center;
  }
</style>
</head>
<body>

<h1>CSS animation-fill-mode Example</h1>

<div class="box none">None</div>
<div class="box forwards">Forwards</div>
<div class="box backwards">Backwards</div>
<div class="box both">Both</div>

</body>
</html>

Explanation of `animation-fill-mode` for each class:

none

The animation-fill-mode is set to none.
The element does not retain any styles from the animation before or after its execution.
During the animation, the box moves from its initial position to translateX(200px) and changes its background color to green.
After the animation ends, the box reverts to its initial position and style (translateX(0) and background color red).
The result is a box that animates but resets completely after the animation ends.

forwards

The animation-fill-mode is set to forwards.
The element retains the styles from the last keyframe (to) of the animation after it completes.
During the animation, the box moves from translateX(0) to translateX(200px) and its background color changes to green.
After the animation ends, the box remains at translateX(200px) with the background color green.
The result is a box that animates and stays in its final position and style after the animation ends.

backwards

The animation-fill-mode is set to backwards.
The element immediately applies the styles from the first keyframe (from) of the animation as soon as the animation is applied, even before it starts running.
During the animation, the box transitions from translateX(0) to translateX(200px) and its background color changes to green.
After the animation ends, the box reverts to its initial position and style (translateX(0) and background color red).
The result is a box that starts in its initial animated state (from keyframe) and resets after the animation ends.

both

The animation-fill-mode is set to both.
The element applies the styles from the first keyframe (from) before the animation starts and retains the styles from the last keyframe (to) after the animation ends.
During the animation, the box transitions from translateX(0) to translateX(200px) and its background color changes to green.
After the animation ends, the box remains at translateX(200px) with the background color green.
The result is a box that starts with its initial animation state and retains its final animation state after completing the animation.

Browser Support

The animation-fill-mode property is supported in most modern browsers. Below is a compatibility table:

Browser	Version
Chrome	43
Edge	10
Firefox	16
Safari	9
Opera	30

TutorialKart

CSS animation-fill-mode Property