AnimationEffectTimingReadOnly.duration

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

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).

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

Browser compatibility

[1] The Web Animations API is only enabled by default in Firefox Developer Edition and Nightly builds. You can enable it in beta and release builds by setting the preference dom.animations-api.core.enabled to true, and can disable it in any Firefox version by setting this preference to false.

See also

• Web Animations API
• AnimationEffectReadOnly.timing returns a AnimationEffectTimingReadOnly object...
• ...while AnimationEffect.timing returns a mutable AnimationEffectTiming object.
• CSS's transition-duration and animation-duration