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 AnimationEffectTimingReadOnly
dictates how and when the animation's effects should be reflected by the element(s) visual state.
Note: In AnimationEffectTiming
, a mutable subclass of AnimationEffectTimingReadOnly
used with KeyframeEffects
, the property acts as both a getter and a setter.
Syntax
// Getting the delay in milliseconds var animationDelay = animation.effect.timing.fill; // Setting the delay in milliseconds animation.effect.timing.fill = 'both';
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 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
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'AnimationEffectTimingReadOnly.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
AnimationEffectReadOnly.timing
returns aAnimationEffectTimingReadOnly
object...- ...while
AnimationEffect.timing
returns a mutableAnimationEffectTiming
object. - CSS's
animation-fill-mode