AnimationEffectTimingReadOnly.fill

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

Syntax

// Getting the delay in milliseconds
var animationDelay = animation.effect.timing.fill;

// Setting the delay in milliseconds 
animation.effect.timing.fill = 'both';

Value

A {{domxref("DOMString")}} indicating the fill type to use in order to properly render an affected element when outside the animation's active interval (that is, when it's not actively animating). The default is "auto".

"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 {{domxref("Animation.playState", "playState")}} is pending with a {{domxref("AnimationEffectTimingReadOnly.delay", "delay")}}, when its playState is finished, or during its {{domxref("AnimationEffectTimingReadOnly.endDelay", "endDelay")}} or {{domxref("AnimationEffectTimingReadOnly.delay", "delay")}}. In other words, if the animation isn't in its active interval, the affected element is not visible.

"forwards"

The affected element will continue to be rendered in the state of the final animation framecontinue to be applied to the after the animation has completed playing, in spite of and during any {{domxref("AnimationEffectTimingReadOnly.endDelay", "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 {{domxref("AnimationEffectTimingReadOnly.delay", "delay")}} and pending {{domxref("Animation.playState", "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 {{domxref("AnimationEffectTimingReadOnly.endDelay", "endDelay")}}, {{domxref("AnimationEffectTimingReadOnly.delay", "delay")}} and/or pending or finished {{domxref("Animation.playState", "playState")}}.

"auto"

If the animation effect the fill mode is being applied to is a keyframe effect ({{domxref("KeyframeEffect")}} or {{domxref("KeyframeEffectReadOnly")}}), "auto" is equivalent to "none". Otherwise, the result is "both".

Examples

In the Growing and Shrinking Alice example, the cake has an animation that shows it getting eaten up:

var nommingCake = document.getElementById('eat-me_sprite').animate(
 [
   { transform: 'translateY(0)' },
   { transform: 'translateY(-80%)' }   
 ], {
   fill: 'forwards',
   easing: 'steps(4, end)',
   duration: aliceChange.effect.timing.duration / 2
 });
 nommingCake.pause();

Because the animate() method takes an array of timing properties and values to create an AnimationEffectTiming object behind the scenes, we could also write the above like so (in fact, go ahead and try it in the CodePen):

var nommingCake = document.getElementById('eat-me_sprite').animate(
[
  { transform: 'translateY(0)' },
  { transform: 'translateY(-80%)' }   
], aliceChange.effect.timing.duration / 2);
nommingCake.pause();

nommingCake.effect.timing.fill = 'forwards';
nommingCake.effect.timing.easing = 'steps(4, end)';

Specifications

Browser compatibility

{{CompatibilityTable}}

See also

• Web Animations API
• AnimationEffectReadOnly.timing returns a AnimationEffectTimingReadOnly object...
• ...while AnimationEffect.timing returns a mutable AnimationEffectTiming object.
• CSS's animation-fill-mode