Duration

The duration property of the Web Animations API represents the duration in milliseconds to complete a single iteration of the animation.

Syntax

// how long each loop should last
var timingProperties = {
  duration: 250
}

Value

The number of milliseconds each iteration of the animation takes to complete. Defaults to 0.

Examples

In the Pool of Tears example, each tear is passed a random duration via its timing object:

// Randomizer function
var getRandomMsRange = function(min, max) {
  return Math.random() * (max - min) + min;
}

// Loop through each tear
tears.forEach(function(el) { 

  // Animate each tear
  el.animate(
    tearsFalling, 
    {
       delay: getRandomMsRange(-1000, 1000), // randomized for each tear
       duration: getRandomMsRange(2000, 6000), // randomized for each tear
       iterations: Infinity,
       easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
    });
});

Specifications

Browser compatibility

See also

• Web Animations API
• Element.animate(), KeyframeEffectReadOnly.KeyframeEffectReadOnly(), and KeyframeEffect.KeyframeEffect() all accept an object of timing properties including this one.
• The value of this property corresponds to the one in AnimationEffectTimingReadOnly (which is the timing object for AnimationEffectReadOnly, KeyframeEffectReadOnly, and KeyframeEffect).
• CSS's transition-duration and animation-duration