Skip to content
Related Articles

Related Articles

CSS | animation-iteration-count Property

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Aug, 2022
View Discussion
Improve Article
Save Article

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
  • Internet Explorer 10.0 and above
  • Firefox 16.0 and above
  • Opera 30.0 and above
  • Safari 9.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!