Fill

The fill property of the Web Animations API dictates how and when the animation's effects should be reflected by the element(s) visual state.

Syntax

// Make the animated element retain the animation's effects even after the animation finishes.
var timingProperties = {
  fill: "forwards"
}

Value

A DOMString representing the fill type to be applied. It can take one of the following values (defaults to none):

none

The animation's effects are only visible while the animation is iterating or its playhead is positioned over an iteration. The animation's effects are not visible when its playState is pending with a delay, when its playState is finished, or during its endDelay or  delay.

forwards

The animation's effects should be retained after the animation has completed playing, in spite of and during any endDelay or when its playState is finished.

backwards

The animation's effects should be reflected by the element(s) state prior to playing, in spite of and during any delay and pending playState.

both

Combining the effects of both forwards and backwards: The animation's effects should be reflected by the element(s) state prior to playing and retained after the animation has completed playing, in spite of and during any endDelay, delay and/or pending or finished playState.

Examples

In the Follow the White Rabbit example, the White Rabbit's animation is formed by coupling a KeyframeEffect with an Animation object. The keyframeEffect takes an object of timing properties, which is where we pass in fill. Forwards makes the rabbit retain its last keyframe rather than reverting to its unanimated state:

// Create a set of keyframes to slide the rabbit down the hole--and keep him down with 'fill'!
var rabbitDownKeyframes = new KeyframeEffect(
  whiteRabbit,
  [
    { transform: 'translateY(0%)' }, 
    { transform: 'translateY(100%)' }
  ], {
    duration: 3000, 
    fill: 'forwards' 
  }
);

// Set up the rabbit's animation to play on command by calling rabbitDownAnimation.play() later
var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);

Specifications

Browser compatibility

See also

• Web Animations API
• Element.animate(), KeyframeEffectReadOnly.KeyframeEffectReadOnly(), and KeyframeEffect.KeyframeEffect() all accept an object of timing properties including this one.
• The value of this property corresponds to the one in AnimationEffectTimingReadOnly (which is the timing object for AnimationEffectReadOnly, KeyframeEffectReadOnly, and KeyframeEffect).
• CSS's animation-fill-mode