This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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 {{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 itsplayState
isfinished
, 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
isfinished
. "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
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 any {{domxref("AnimationEffectTimingReadOnly.endDelay", "endDelay")}}, {{domxref("AnimationEffectTimingReadOnly.delay", "delay")}} and/orpending
orfinished
{{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
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'AnimationEffectTimingReadOnly.fill' in that specification. |
Working Draft | Editor's draft. |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatGeckoDesktop(48)}} | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatNo}} |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{ CompatUnknown}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
See also
- Web Animations API
AnimationEffectReadOnly.timing
returns aAnimationEffectTimingReadOnly
object...- ...while
AnimationEffect.timing
returns a mutableAnimationEffectTiming
object. - CSS's
animation-fill-mode