The fill mode of the animation

Animation Fill Mode

The fill mode of CSS animations (animation-fill-mode) determines how styles are applied to the target element before and after the animation executes. It controls whether the animation retains the styles from keyframes during the delay period or after completion, or reverts to the original state. The fill mode is crucial for the smoothness and visual effects of animations.

Values of Fill Mode

animation-fill-mode has four possible values:

1. none (default): The animation does not apply any styles to the element before or after execution. Before the animation starts, the element retains its original styles; after the animation ends, the element immediately reverts to its original styles.
2. forwards: After the animation ends, the element retains the styles of the last frame.
3. backwards: Before the animation starts (including during the delay period), the element applies the styles of the first frame.
4. both: Combines the effects of forwards and backwards.

Practical Applications of Fill Mode

Example Using none

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: move 2s;
  animation-fill-mode: none;
}

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

In this example, before the animation starts, .box remains red and untranslated; after the animation ends, .box immediately returns to its original position.

Example Using forwards

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: move 2s;
  animation-fill-mode: forwards;
}

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); background: blue; }
}

After the animation ends, .box stays at translateX(100px) and retains the blue background.

Example Using backwards

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: move 2s 1s;
  animation-fill-mode: backwards;
}

@keyframes move {
  from { transform: translateX(0); opacity: 0; }
  to { transform: translateX(100px); opacity: 1; }
}

During the 1-second delay period, .box immediately applies the styles of the first frame (opacity: 0), then begins the animation.

Example Using both

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: move 2s 1s;
  animation-fill-mode: both;
}

@keyframes move {
  from { transform: translateX(0); opacity: 0; }
  to { transform: translateX(100px); opacity: 1; background: blue; }
}

During the delay period, .box applies the styles of the first frame (opacity: 0); after the animation ends, it retains the styles of the last frame (translateX(100px), opacity: 1, and blue background).

Relationship Between Fill Mode and Animation Lifecycle

The fill mode directly affects the three stages of an animation:

1. Animation delay stage: backwards or both causes the element to immediately apply the styles of the first frame.
2. Animation execution stage: All fill modes behave the same.
3. Animation end stage: forwards or both causes the element to retain the styles of the last frame.

Considerations in Practical Development

1. Interaction with animation-iteration-count: When the animation iteration count is infinite (infinite), forwards and both have no effect because the animation never ends.

   /* In an infinite loop animation, forwards is ineffective */
   .box {
     animation: move 2s infinite;
     animation-fill-mode: forwards;
   }
   

2. Coordination with JavaScript Animation Control: When dynamically controlling animations with JavaScript, the fill mode affects the element's state after the animationend event is triggered.

   document.querySelector('.box').addEventListener('animationend', function() {
     // If fill-mode is forwards or both, the element will retain the animation's end state
   });
   

3. Performance Considerations: Some fill modes may require the browser to maintain additional element states, but in modern browsers, this performance difference is usually negligible.

Advanced Applications of Fill Mode

Chaining Multiple Animations

When multiple animations are applied sequentially to the same element, the fill mode ensures smooth transitions:

.box {
  animation: 
    fadeIn 0.5s forwards,
    move 1s 0.5s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}

Here, the forwards of the first animation ensures the element retains opacity: 1 when the second animation begins.

Coordination with Transform Origin

The fill mode can preserve properties like transform origin:

.box {
  transform-origin: left center;
  animation: rotate 2s forwards;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

After the animation ends, the element remains rotated 360 degrees, and the transform origin stays at the left center.

Browser Compatibility and Fallback Solutions

All modern browsers support animation-fill-mode, including:

• Chrome 43+
• Firefox 16+
• Safari 9+
• Edge 12+
• Opera 30+

For older browsers that do not support CSS animations, consider using JavaScript animation libraries as fallbacks or ensuring critical functionality does not rely on the animation's final state.

Debugging Fill Mode Issues

When the fill mode does not behave as expected, check:

1. Whether the keyframes are correctly defined
2. Whether the animation duration or delay is set correctly
3. Whether higher-specificity CSS rules override the animation styles
4. The "Animations" panel in browser developer tools can visualize the animation timeline and fill mode effects

/* Example of rules that may override animation styles */
.box {
  animation: move 2s forwards;
  transform: translateX(0); /* This rule will override the forwards effect */
}

Advanced Usage: Combining with CSS Variables

The fill mode can be combined with CSS variables to create more dynamic effects:

.box {
  --end-position: 100px;
  animation: move 2s forwards;
}

@keyframes move {
  to { transform: translateX(var(--end-position)); }
}

JavaScript can dynamically change --end-position, and forwards ensures the element stays at the modified end position.