CSS3 animation-delay property
Examples
Wait for two seconds and then start the animation:
animation-delay: 2 s; - webkit-animation-delay: 2 s; / * Safari and Chrome * /
try it"
In the bottom of this page for more examples.
Browser Support
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
属性 | |||||
---|---|---|---|---|---|
animation-delay | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Tag definitions and instructions
animation-delay attribute defines when the animation begins.
animation-delay value of the units can be seconds (s) or milliseconds (ms).
Tip: Allow negative, -2s make the animation begin immediately, but skip two seconds into the animation.
Defaults: | 0 |
---|---|
inherit: | no |
version: | CSS3 |
JavaScript syntax: | object object.style.animationDelay = "2s" |
grammar
animation-delay:time;
值 | 描述 | 测试 |
---|---|---|
time | 可选。定义动画开始前等待的时间,以秒或毫秒计。默认值为0 | 测试 » |
More examples
Examples
Negative, please note that the animation skip two seconds into the animation cycle:
animation-delay: -2 s / * Opera * / -moz-animation -delay: -2 s / * Firefox * / -webkit-animation -delay: -2 s / * Safari and Chrome * /
try it"
related articles
CSS3 tutorial: CSS3 Animation