css animation-iteration-count
时间: 2023-10-26 22:05:47 浏览: 241
HTML5&CSS3网页制作:animationiterationcount属性、
CSS中的animation-iteration-count属性用于指定动画循环的次数。它定义了动画播放的循环次数,可以是一个正整数、一个小数、无限循环或者其它特定的关键字值。
以下是animation-iteration-count属性的几种常见取值:
- 数字:指定具体的循环次数,如2表示动画播放两次。
- infinite:表示无限循环,即动画会一直持续播放。
- 关键字值alternate:表示在每次循环过程中交替反向播放动画。
示例代码如下:
```css
.animation {
animation-name: myanimation;
animation-duration: 2s;
animation-iteration-count: 3; /* 动画将播放3次 */
}
@keyframes myanimation {
from { background-color: red; }
to { background-color: blue; }
}
```
阅读全文