CSS animation-iteration-count属性
animation-iteration-count属性
CSS动画中animation-iteration-count属性,可用于设置动画播放的次数。
语法
animation-iteration-count: value;
可选属性值
属性值 | 描述 |
---|---|
n | 数值,设置动画播放次数 |
infinite | 无限循环播放 |
animation-iteration-count实例代码,及在线编辑器
下方实例设置了两个动画,第一个播放5次,第二个无限循环播放:
<div id='d1' class='xyz'></div><br>
<div id='d2' class='xyz'></div>
<style>
.xyz{width:20%;height:30%;border:1px solid skyblue;}
@keyframes widthChange{
from{width:20%;}
to{width:100%;}
}
#d1{animation-name:widthChange;animation-iteration-count:5;animation-duration:1s}
#d2{animation-name:widthChange;animation-iteration-count:infinite;animation-duration:1s}
</style>