EffectTiming.duration

The duration property of the dictionary EffectTiming in the Web Animations API specifies the duration in milliseconds that a single iteration (from beginning to end) the animation should take to complete.

Syntax

var timingProperties = {
  duration: durationInMilliseconds | "auto"
};

timingProperties.duration = durationInMilliseconds | "auto";

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

Exceptions

TypeError

The specified value is either a string other than "auto", a number less than zero, NaN, or some other type of object entirely.

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 compatibilityUpdate compatibility data on GitHub

See also

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