This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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.
Element.animate()
, KeyframeEffectReadOnly()
, and KeyframeEffect()
all accept an object of timing properties including duration
. The value of duration
corresponds directly to AnimationEffectTimingReadOnly.duration
in timing
objects returned by AnimationEffectReadOnly
, KeyframeEffectReadOnly
, and KeyframeEffect
.
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).
Currently, a value of "auto"
is the same as specifying 0.0. This is a forwards-compatiblity measure since in the future, "auto" will be expanded to take into account the duration of any child effects. Consider using "auto"
rather than 0 if that makes sense.
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
duration | Chrome Full support 52 | Edge Full support ≤79 | Firefox Full support 63 | IE No support No | Opera Full support Yes | Safari No support No | WebView Android Full support 52 | Chrome Android Full support 52 | Firefox Android Full support 63 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
See also
- Web Animations API
Element.animate()
,KeyframeEffectReadOnly()
, andKeyframeEffect()
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
, andKeyframeEffect.timing
). - CSS's
transition-duration
andanimation-duration
properties