HTML | DOM 样式 animationIterationCount 属性

animationIterationCount 属性用于指定动画的循环次数。它定义了动画在完成一个周期后应该重复播放的次数。该属性适用于 CSS 动画。

语法

<style>
    .my-animation {
        animation-name: myAnimation;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }

    @keyframes myAnimation {
        from {
            /* 起始状态 */
        }
        to {
            /* 结束状态 */
        }
    }
</style>

属性值

• animationIterationCount: n;：指定动画重复播放的次数。其中，n 可以是一个非负整数、一个小数或者特定关键字的组合。

  • 1：动画将仅播放一次（默认值）。
  • infinite：动画将无限次播放。

  注：负数值、0、NaN、无穷大的值将会被忽略。

示例

<style>
    .my-animation {
        animation-name: myAnimation;
        animation-duration: 2s;
        animation-iteration-count: 3;
        /* or animation-iteration-count: infinite; */
    }

    @keyframes myAnimation {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }
</style>

<div class="my-animation">动画元素</div>

在上面的示例中，.my-animation 类应用了一个名为 myAnimation 的动画。animation-iteration-count 属性设置为 3，这意味着动画将循环播放 3 次。你也可以将该属性设置为 infinite，使动画无限循环。

浏览器兼容性

animationIterationCount 属性在各个现代浏览器中得到良好的支持。

• Chrome
• Firefox
• Safari
• Edge
• Opera

然而，应该注意该属性在 Internet Explorer 9 及更早版本的浏览器中不支持。

总结

通过使用 animationIterationCount 属性，你可以控制 CSS 动画的循环次数。简单的使用例如 3 或者 infinite 可以实现有限次或无限次的循环播放动画效果。请确保在适当的位置设置这个属性并选择合适的值，以便在你的网页中获得想要的动画效果。