{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}
The AnimationEffectTimingReadOnly
interface of the Web Animations API is comprised of timing properties.
This object is returned by the timing
attribute of a {{domxref("KeyframeEffectReadOnly")}} and {{domxref("AnimationEffectReadOnly")}} interfaces.
While this object is read-only, it is inherited by the mutable {{domxref("AnimationEffectTiming")}} interface associated with {{domxref("KeyframeEffect")}}.
Properties
- {{domxref("AnimationEffectTimingReadOnly.delay")}}{{readonlyInline}}
- The number of milliseconds to delay the start of the animation. Defaults to
0
. - {{domxref("AnimationEffectTimingReadOnly.direction")}}{{readonlyInline}}
- 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.duration")}}{{readonlyInline}}
- The number of milliseconds each iteration of the animation takes to complete. Defaults to
0
. - {{domxref("AnimationEffectTimingReadOnly.easing")}}{{readonlyInline}}
- 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
. - {{domxref("AnimationEffectTimingReadOnly.endDelay")}}{{readonlyInline}}
- 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")}}{{readonlyInline}}
- 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")}}{{readonlyInline}}
- A number representing which repetition the animation begins at and its progress through it.
- {{domxref("AnimationEffectTimingReadOnly.iterations")}}{{readonlyInline}}
- The number of times the animation should repeat. Defaults to
1
, and can also take a value of infinity to make it repeat infinitely.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('Web Animations', '#animationeffecttimingreadonly', 'AnimationEffectTimingReadOnly' )}} | {{Spec2('Web Animations')}} | Editor's draft. |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatNo}} | {{CompatNo}} | {{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
- {{domxref("AnimationEffectTiming")}}
- {{domxref("AnimationEffectReadOnly.timing")}}