| 语法项目 | 说明 |
|---|---|
| 初始值 | 0 |
| 适用于 | 所有元素 |
| 可否继承 | 否 |
| 单位 | S |
| 媒介 | 视觉 |
| 版本 | CSS3.0 |
设置动画延迟执行的时间。
默认值0表示立即执行，正数为动画延迟一定时间，负数为截断一定时间内的动画。单位为秒(s)或毫秒(s)。
0：不延迟，立即执行。
正数：按照设置的时间延迟。
负数：设置时间前的动画将被截断。
- .demo_box{
- -webkit-animation:f1 2s forwards ease;
- -moz-animation:f1 2s forwards ease;
- position:relative;
- left:10px;
- width:100px;
- height:100px;
- margin:10px 0;
- overflow:hidden;
- }
- .no_delay{
- -webkit-animation-delay:0;
- -moz-animation-delay:0;
- }
- .delay_2s{
- -webkit-animation-delay:2s;
- -moz-animation-delay:2s;
- }
- .delay_-1s{
- -webkit-animation-delay:-1s;
- -moz-animation-delay:-1s;
- }
- @-webkit-keyframes f1{
- 0%{left:10px;}
- 100%{left:500px;}
- }
- @-moz-keyframes f1{
- 0%{left:10px;}
- 100%{left:500px;}
- }
- <div class="demo_box no_delay">动画立即执行</div>
- <div class="demo_box delay_2s">动画延迟2秒执行</div>
- <div class="demo_box delay_-1s">动画前一秒被截断</div>
| IE | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|
| IE 10+ | Firefox 3.5+ | 目前暂无版本支持 | Safari 10+ | Chrome 2.0+ |