CSS animation-fill-mode Property

Description

The CSS animation-fill-mode property defines how an element should apply styles defined in an animation before it starts and after it ends. Without this property, an animated element will only display styles during the actual execution of the animation; once the animation finishes, the element immediately reverts to its original state as defined by its standard CSS rules. By using animation-fill-mode, developers gain fine-grained control over how the end or beginning states of an animation persist, allowing for smoother transitions and more predictable layouts when elements animate in or out of view. This is particularly useful when combined with keyframe animations that involve complex transformations or opacity changes.

One practical use of animation-fill-mode is in controlling the "holding" of styles from a keyframes animation after the animation completes. For example, an element that fades in using opacity changes can retain its final opacity value if the fill mode is set appropriately, instead of instantly reverting to being fully transparent. Similarly, an element that slides across the screen can remain in its final position rather than snapping back to its starting location, which ensures a more seamless user experience, especially in interactive interfaces where elements might need to stay visible or maintain certain visual states.

Additionally, animation-fill-mode can influence the initial state of an animation. If a developer wants an element to start in a specific style before the first keyframe executes, setting the fill mode allows the element to "adopt" the initial animation state immediately, rather than waiting for the animation to progress. This can help avoid visual glitches, such as flickering or sudden jumps, when an animation is triggered dynamically via JavaScript or on page load. Combined with other animation-related properties like animation-delay and animation-direction, animation-fill-mode becomes a powerful tool to precisely choreograph how elements appear, move, and interact in complex web animations.

Definition

Initial value: none
Applies to: All elements, :before and :after pseudo elements
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.animationFillMode

Interactive Demo

animation-fill-mode: none;

animation-fill-mode: forwards;

animation-fill-mode: backwards;

animation-fill-mode: both;

Syntax

animation-fill-mode: <single-animation-fill-mode> [ ',' <single-animation-fill-mode> ]*

Values

<single-animation-fill-mode> = none | forwards | backwards | both

noneThe animation will not apply any styles to the target before or after it is executing.
forwardsThe target will retain the computed values set by the last keyframe encountered during execution.
backwardsThe animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period.
bothThe animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.

Example

HTML

<div class="container">

  <h2>animation-fill-mode demo</h2>

  <div class="grid">

    <div class="item">

      <div class="box fill-none"></div>

      <div class="label">animation-fill-mode: none</div>

    </div>

    <div class="item">

      <div class="box fill-forwards"></div>

      <div class="label">animation-fill-mode: forwards</div>

    </div>

    <div class="item">

      <div class="box fill-backwards"></div>

      <div class="label">animation-fill-mode: backwards</div>

    </div>

    <div class="item">

      <div class="box fill-both"></div>

      <div class="label">animation-fill-mode: both</div>

    </div>

  </div>

</div>

CSS

/* Layout */
.container {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 24px;
}

.container h2 {
  margin: 0 0 14px 0;
  font-size: 18px;
  color: #222;
}

.grid {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.label {
  margin-top: 10px;
  font-size: 13px;
  color: #444;
}

/* Box style and animation */
.box {
  width: 80px;
  height: 80px;
  background: #ddd;
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(0);
}

@keyframes slide {
  0% {
    transform: translateY(0);
    background: #3498db; /* blue at start */
    opacity: 1;
  }
  100% {
    transform: translateY(80px) scale(1.05);
    background: #e74c3c; /* red at end */
    opacity: 0.7;
  }
}

/* Each demo uses the same animation but different fill-modes
   animation-delay: 1s is set so you can see the "before" state
   (during delay) and the "after" state (after animation ends). */
.fill-none {
  animation: slide 1s ease 1s 1 none;
}

.fill-forwards {
  animation: slide 1s ease 1s 1 forwards;
}

.fill-backwards {
  animation: slide 1s ease 1s 1 backwards;
}

.fill-both {
  animation: slide 1s ease 1s 1 both;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS animation-fill-mode property. Hover over a browser icon to see the version that first introduced support for this CSS property.