AnimationEffectTimingReadOnly.duration

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The duration property of AnimationEffectTimingReadOnly represents the duration in milliseconds to complete a single iteration of the animation.

Note: In AnimationEffectTiming, a mutable subclass of AnimationEffectTimingReadOnly used withKeyframeEffects, the property acts as both a getter and a setter.

Syntax

// Getting the duration of each iteration
var animationLoopDuration = animation.effect.timing.duration;

// Setting the duration of each iteration
animation.effect.timing.duration = 5000;

Value

The number of milliseconds long a single beginning-to-end iteration of the animation should take. The default is "auto". This value must not be negative; otherwise, it can have any value (including positive infinity).

Currently, a value of "auto" is the same as specifying 0.0. This is a forwards-compatiblity measure since in the future, "auto" will be expanded to take into account the duration of any child effects. Consider using "auto" rather than 0 if that makes sense.

Examples

In the Red Queen's Race example, we set the background's animation to begin halfway through its first loop:

var sceneryTimingBackground = {
  duration: 36000,
  iterations: Infinity
};

var sceneryTimingForeground = {
  duration: 12000,
  iterations: Infinity
};

var background1 = document.getElementById('background1');

// Animating the background
var background1Movement = background1.animate( sceneryFrames, sceneryTimingBackground );

// Setting the background animation's start position based on its duration
background1Movement.currentTime = background1Movement.effect.timing.duration / 2;

Specifications

Specification Status Comment
Web Animations
The definition of 'AnimationEffectTimingReadOnly.duration' in that specification.
Working Draft Editor's draft.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes ?481 2 No Yes No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? ? ? No No ?

1. The preference is set to true by default on Firefox Nightly and on Firefox Developer Edition, but not on the official release.

2. From version 48: this feature is behind the dom.animations-api.core-enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also

Document Tags and Contributors

 Contributors to this page: fscholz, rachelnabors, chrisdavidmills
 Last updated by: fscholz,