CSS - animation-iteration-count Property

Quiz

CSS animation-iteration-count property specifies how many cycles an animation should run through before it comes to a halt.

The animation-iteration-count property accepts multiple values separated by commas.

Syntax

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

Property Values

Value	Description
number	This specifies the number of times the animation has to run. The default value is 1.
infinite	This sets specifies that the animation must go on forever.
initial	This the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of CSS animation-iteration-count Property

Below listed examples will illustrate the animation-iteration-count property with different values.

Iteration Count with Numbers

When numbers are assigned to the animation-iteration-count property, the corresponding animation is played that many times. In the following example, the animation is played 3 times as the value given to the property is 3.

Example

<!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>

Iteration Count with Infinite

When the value of the animation-iteration-count is set to infinite, the animation plays forever. In the following example, the animation keeps on playing wihtout any break.

Example

<!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>

Iteration Count with Initial

When the value of the animation-iteration-count is set to initial, the initial value i.e. 1 is set to the property, so the animation plays only once. In the following example, the animation plays only once.

Example

<!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>

Supported Browsers

Property
animation-iteration-count	43.0	10.0	16.0	9.0	30.0

Print Page