{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}
The AnimationEffectTiming
interface of the Web Animations API is a dictionary object of timing properties returned by the timing
attribute of a {{domxref("KeyframeEffect")}}. It inherits its properties from {{domxref("AnimationEffectTimingReadOnly")}}, but in a non-read only form.
Syntax
var animationDuration = animation.effect.timing.duration;
Properties
This interface inherits its properties from its parent, {{domxref("AnimationEffectTimingReadOnly")}}, in a non-read only form.
- {{domxref("AnimationEffectTimingReadOnly.delay")}}
- The number of milliseconds to delay the start of the animation. Defaults to
0
. - {{domxref("AnimationEffectTimingReadOnly.endDelay")}}
- The number of milliseconds to delay after the end of an animation. This is primarily of use when sequencing animations based on the end time of another animation. Defaults to
0
. - {{domxref("AnimationEffectTimingReadOnly.fill")}}
- Dictates whether the animation's effects should be reflected by the element(s) state prior to playing (
backwards
), retained after the animation has completed playing (forwards
), orboth
. Defaults tonone
. - {{domxref("AnimationEffectTimingReadOnly.iterationStart")}}
- Dictates whether the animation's effects should be reflected by the element(s) state prior to playing (
backwards
), retained after the animation has completed playing (forwards
), orboth
. Defaults tonone
. - {{domxref("AnimationEffectTimingReadOnly.iterations")}}
- The number of times the animation should repeat. Defaults to
1
, and can also take a value of infinity to make it repeat infinitely. - {{domxref("AnimationEffectTimingReadOnly.duration")}}
- The number of milliseconds each iteration of the animation takes to complete. Defaults to
0
. - {{domxref("AnimationEffectReadOnly.direction")}}
- Whether the animation runs forwards (
normal
), backwards (reverse
), switches direction after each iteration (alternate
), or runs backwards and switches direction after each iteration (alternate-reverse
). Defaults tonormal
. - {{domxref("AnimationEffectTimingReadOnly.easing")}}
- The rate of the animation's change over time. Accepts the pre-defined values
linear
,ease
,ease-in
,ease-out
, andease-in-out
, or a custom cubic-bezier value likecubic-bezier(0.42, 0, 0.58, 1)
. Defaults tolinear
.
Examples
In the Growing and Shrinking Alice example, we set Alice's animation — aliceChange
— at halfway complete by getting the duration of its effect
's timing
attribute, which is an AnimationEffectTiming
object:
aliceChange.currentTime = aliceChange.effect.timing.duration / 2 ;
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('Web Animations', '#animationeffecttiming', 'AnimationEffectTiming' )}} | {{Spec2('Web Animations')}} | Editor's draft. |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{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
- KeyframeEffect Interface
- Web Animations API
- Inherits from {{domxref("AnimationEffectTimingReadOnly")}}