CSS - animation-iteration-count 属性

CSS animation-iteration-count 属性指定动画在停止之前应运行多少个循环。

animation-iteration-count 属性接受多个以逗号分隔的值。

语法

animation-iteration-count : number|infinte|initial|inherit;

属性值

值	描述
数字	这指定动画必须运行的次数。默认值为 1。
infinite	这设置指定动画必须永远运行。
initial	这将属性设置为其初始值。
inherit	这从父元素继承属性。

CSS animation-iteration-count 属性示例

下面列出的示例将使用不同的值来说明 animation-iteration-count 属性。

使用数字的迭代次数

当将数字分配给 animation-iteration-count 属性时，相应的动画将播放该次数。在下面的示例中，动画播放 3 次，因为赋予该属性的值为 3。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        
        .box {
            width: 150px;
            height: 150px;
            font-size: 20px;
            background-color: #3498db;
            animation-name: slide;
            animation-duration: 2s;
            animation-iteration-count: 3;
        }

        @keyframes slide {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(100px);
            }
            100% {
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>
    <h2>CSS Animation Iteration Count Property</h2>
    <div class="box">Animation Iteration Count</div>
</body>

</html>

使用 infinite 的迭代次数

当 animation-iteration-count 的值设置为 infinite 时，动画将永远播放。在下面的示例中，动画会一直播放而不会中断。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        
        .box {
            width: 150px;
            height: 150px;
            font-size: 20px;
            background-color: #3498db;
            animation-name: slide;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

        @keyframes slide {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(100px);
            }
            100% {
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>
    <h2>CSS Animation Iteration Count Property</h2>
    <div class="box">Animation Iteration Count</div>
</body>

</html>

使用 initial 的迭代次数

当 animation-iteration-count 的值设置为 initial 时，初始值（即 1）将设置为该属性，因此动画只播放一次。在下面的示例中，动画只播放一次。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        
        .box {
            width: 150px;
            height: 150px;
            font-size: 20px;
            background-color: #3498db;
            animation-name: slide;
            animation-duration: 2s;
            animation-iteration-count: initial;
        }

        @keyframes slide {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(100px);
            }
            100% {
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>
    <h2>CSS Animation Iteration Count Property</h2>
    <div class="box">Animation Iteration Count</div>
</body>

</html>

支持的浏览器

属性
animation-iteration-count	43.0	10.0	16.0	9.0	30.0

打印页面