CSS animation-iteration-count 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

animation-iteration-count是 CSS 动画属性之一，用于指定动画应该播放多少次。

animation-iteration-count默认值为 1，表示动画只播放一次，负值也被视为 1。

animation-iteration-count可以使用小数作为值，表示播放部分动画（如 0.5 表示播放动画的一半）。

常用的实例

接下来通过多个实例演示animation-iteration-count属性的用法，来深化您对animation-iteration-count属性的理解。

实例代码运行代码

复制

/* 动画播放3次 */
.element {
    animation-iteration-count: 3;
}

/* 动画无限循环 */
.element {
    animation-iteration-count: infinite;
}

/* 动画播放1.5次（第二次播放到一半停止） */
.element {
    animation-iteration-count: 1.5;
}

/* 简写形式 */
.element {
    animation: myAnimation 2s ease-in-out 0.5s 3 alternate;
    /* 等同于 animation-iteration-count: 3 */
}

CSS 语法

animation-iteration-count: n|infinite;

属性值

值	描述
`number`	动画播放的具体次数（例如：1, 2, 3.5）
`infinite`	动画无限循环播放
`initial`	设置为默认值（1）
`inherit`	从父元素继承该属性