This is an experimental technologyCheck 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 AnimationsThe definition of 'duration' in that specification. | Working Draft | Editor's draft. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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 6.0 |
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
EffectTiming.duration by Mozilla Contributors is licensed under CC-BY-SA 2.5.