AnimationEffectTimingProperties.duration

The duration property of the dictionary AnimationEffectTimingProperties 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

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

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
• 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