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

列印頁面