Delay

The delay property of the Web Animations API represents the number of milliseconds to delay the start of the animation.

Syntax

// Delay the animation by 1 second
var timingProperties = {
  delay: 1000
}

Value

A number representing milliseconds. Defaults to 0.

Examples

In the Pool of Tears example, each tear is passed a random delay 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-delay and animation-delay