动画延迟 | 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 value | 0s |
|---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
语法
值
<time>从动画应用到动画开始的元素的时间偏移量。这可以用seconds（s）或者milliseconds（ms）来指定。该单位是必需的。正值表示动画应在指定的时间量过后开始。值（0s默认值）表示动画应该在应用后立即开始。
负值会导致动画立即开始，但在其周期的中途。例如，如果您指定-1s为动画延迟时间，则动画将立即开始，但会在动画序列中开始1秒。如果为动画延迟指定负值，但起始值是隐式的，则将动画应用到元素的时刻开始的值。
注：当您在一个animation-*属性上指定了多个以逗号分隔的值时，它们将以animation-name不同的方式分配给属性中指定的动画，具体取决于有多少个值。有关更多信息，请参阅设置多个动画属性值。
形式语法
<time>#示例
见CSS动画举个例子。
规格
Specification | Status | Comment |
|---|---|---|
CSS AnimationsThe definition of 'animation-delay' in that specification. | Working Draft | Initial definition. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
Basic support | (Yes)-webkit 43.0 | (Yes)-webkit (Yes) | 5.0 (5.0)-moz 16.0 (16.0)1 | 10 | 12-o 12.10 | 4.0-webkit |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|
Basic support | (Yes)-webkit | (Yes)-webkit (Yes) | 5.0 (5.0)-moz 16.0 (16.0)1 | ? | 12-o | (Yes)-webkit | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
