CSS

动画延迟 | animation-delay

动画延迟

animation-delay CSS属性指定动画应该开始。您可以在将来的某个时间点立即开始动画,从开始时开始,或在动画周期中立即中途开始动画。

/* Single animation */ animation-delay: 3s; animation-delay: 0s; animation-delay: -1500ms; /* Multiple animations */ animation-delay: 2.1s, 480ms;

使用速记属性animation一次性设置所有动画属性通常很方便。

Initial value0s
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

语法

<time>从动画应用到动画开始的元素的时间偏移量。这可以用seconds(s)或者milliseconds(ms)来指定。该单位是必需的。正值表示动画应在指定的时间量过后开始。值(0s默认值)表示动画应该在应用后立即开始。

负值会导致动画立即开始,但在其周期的中途。例如,如果您指定-1s为动画延迟时间,则动画将立即开始,但会在动画序列中开始1秒。如果为动画延迟指定负值,但起始值是隐式的,则将动画应用到元素的时刻开始的值。

:当您在一个animation-*属性上指定了多个以逗号分隔的值时,它们将以animation-name不同的方式分配给属性中指定的动画,具体取决于有多少个值。有关更多信息,请参阅设置多个动画属性值。

形式语法

<time>#

示例

见CSS动画举个例子。

规格

SpecificationStatusComment
CSS AnimationsThe definition of 'animation-delay' in that specification.Working DraftInitial definition.

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support(Yes)-webkit 43.0(Yes)-webkit (Yes)5.0 (5.0)-moz 16.0 (16.0)11012-o 12.104.0-webkit

FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support(Yes)-webkit(Yes)-webkit (Yes)5.0 (5.0)-moz 16.0 (16.0)1?12-o(Yes)-webkit?