| 语法项目 | 说明 |
|---|---|
| 初始值 | 1 |
| 适用于 | 所有元素 |
| 可否继承 | 否 |
| 媒介 | 视觉 |
| 版本 | CSS3.0 |
number:自定义动画执行次数,设置值可为0或正整数。
infinite:无限循环。
.demo_box{
-webkit-animation:f1 2s 0.5s forwards linear;
-moz-animation:f1 2s 0.5s forwards linear;
position:relative;
left:10px;
width:100px;
height:100px;
margin:10px 0;
overflow:hidden;
}
.one{
-webkit-animation-iteration-count:1;
-moz-animation-iteration-count:1;
}
.infinite{
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
}
.some{
-webkit-animation-iteration-count:2,1;
-moz-animation-iteration-count:2,1;
}
@-webkit-keyframes f1{
0%{left:10px;}
100%{left:500px;}
}
@-moz-keyframes f1{
0%{left:10px;}
100%{left:500px;}
}
<div class="demo_box one">动画执行1次</div>
<div class="demo_box infinite">动画执行无数次</div>
<div class="demo_box some">这个不知道</div>
| IE | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|
| IE 10+ | Firefox 3.5+ | 目前暂无版本支持 | Safari 10+ | Chrome 2.0+ |