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 each iteration of the animation takes to complete. Defaults to 0.

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

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