CSS参考手册
动画和转换 | Animations & Transitions
动画延迟 | 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 |
? |
动画和转换 | Animations & Transitions相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。