这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
EffectTiming
dictionary's
delay
property in the
Web 动画 API
represents the number of milliseconds to delay the start of the animation.
Element.animate()
,
KeyframeEffectReadOnly()
，和
KeyframeEffect()
all accept an object of timing properties including
delay
. The value of
delay
corresponds directly to
EffectTiming.delay
in
timing
objects returned by
AnimationEffectReadOnly
,
KeyframeEffectReadOnly
，和
KeyframeEffect
.
var timingProperties = {
delay: delayInMilliseconds
};
timingProperties.delay = delayInMilliseconds;
A number specifying the delay, in milliseconds, from the start of the animation's play cycle to the beginning of its active interval (the time index at which actual animation begins). Defaults to 0.
在 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)"
});
});
| 规范 | 状态 | 注释 |
|---|---|---|
|
Web 动画
The definition of 'delay' in that specification. |
工作草案 | 编者草案。 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
delay
|
Chrome 52 | Edge ≤79 | Firefox 63 | IE No | Opera Yes | Safari No | WebView Android 52 | Chrome Android 52 | Firefox Android 63 | Opera Android No | Safari iOS No | Samsung Internet Android Yes |
完整支持
不支持
实验。期望将来行为有所改变。
Element.animate()
,
KeyframeEffectReadOnly()
，和
KeyframeEffect()
all accept an object of timing properties including this one.
EffectTiming
(which is the
timing
object for
AnimationEffectReadOnly
,
KeyframeEffectReadOnly
，和
KeyframeEffect
).
transition-delay
and
animation-delay