Fill
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
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.
Note: Element.animate()
, KeyframeEffectReadOnly.KeyframeEffectReadOnly()
, and KeyframeEffect.KeyframeEffect()
all accept an object of timing properties including fill.
The value of fill
corresponds directly to AnimationEffectTimingReadOnly.fill
in timing
objects returned by AnimationEffectReadOnly
, KeyframeEffectReadOnly
, and KeyframeEffect
.
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
ispending
with adelay
, when itsplayState
isfinished
, or during itsendDelay
ordelay
. - forwards
- The animation's effects should be retained after the animation has completed playing, in spite of and during any
endDelay
or when itsplayState
isfinished
. - backwards
- The animation's effects should be reflected by the element(s) state prior to playing, in spite of and during any
delay
andpending
playState
. - both
- Combining the effects of both
forwards
andbackwards
: 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 anyendDelay
,delay
and/orpending
orfinished
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
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'fill' in that specification. |
Working Draft | Editor's draft. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Yes) | 48 (48) | No support | (Yes) | No support |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? | No support | No support | No support |
See also
- Web Animations API
Element.animate()
,KeyframeEffectReadOnly.KeyframeEffectReadOnly()
, andKeyframeEffect.KeyframeEffect()
all accept an object of timing properties including this one.- The value of this property corresponds to the one in
AnimationEffectTimingReadOnly
(which is thetiming
object forAnimationEffectReadOnly
,KeyframeEffectReadOnly
, andKeyframeEffect
). - CSS's
animation-fill-mode
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/animationeffecttimingproperties/fill