Open In App
Related Articles

CSS animation-iteration-count Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The animation-iteration-count property in CSS is used to specify the number of times the animation will be repeated. It can specify as infinite to repeat the animation indefinitely. 

Syntax:

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

Property Value:

  • number: This property value is used to define the number of times an animation should be played. The default value is 1.
  • infinite: This property value specifies that the animation should be played infinite times (forever).
  • initial: This property value is used to set this property to its default value.
  • inherit: This value is used to inherit this property from its parent element.

Example: HTML program to illustrate animation-iteration-count 

html

<!DOCTYPE html>
<html>
   
<head>
    <title>
        CSS | animation-iteration-count Property
    </title>
    <style>
        .geeks {
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            color: #090;
            padding-bottom: 5px;
            font-family: Times New Roman;
        }
 
        .geeks1 {
            font-size: 17px;
            font-weight: bold;
            text-align: center;
            font-family: Times New Roman;
        }
 
        #one {
            animation-name: example;
            animation-duration: 2s;
 
            /* Animation will be repeated twice */
            animation-iteration-count: 2;
        }
 
        #two {
            animation-name: example;
            animation-duration: 2s;
 
            /* Animation will be repeated infinitely */
            animation-iteration-count: infinite;
        }
 
        @keyframes example {
            from {
                background-color: orange;
            }
 
            to {
                background-color: white;
            }
        }
    </style>
</head>
 
<body>
    <div class="geeks">
        GeeksforGeeks
    </div>
 
    <div class="geeks1">
        A computer science portal for geeks
    </div>
 
    <!-- Animation of the text inside the h2 tag
            below will be repeated twice only -->
    <h2 id="one">
        This text changes its color two times.
    </h2>
 
    <!-- Animation of the text inside the h2 tag
            below will be repeated infinitely -->
    <h2 id="two">
        This text changes its color infinite times.
    </h2>
</body>
   
</html>

                    

Output:

Supported Browser: The browser supported by animation-iteration-count property are listed below:

  • Google Chrome 43.0 and above
  • Edge 12.0 and above
  • Firefox 16.0 and above
  • Opera 30.0 and above
  • Safari 9.0 and above


Last Updated : 02 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads