Skip to content
Related Articles

Related Articles

Improve Article

CSS | animation-iteration-count Property

  • Last Updated : 06 Aug, 2019

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.


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 (for ever).
  • 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

<!DOCTYPE html> 
            CSS | animation-iteration-count Property
            .geeks { 
                font-size: 40px; 
                font-family:Times New Roman; 
            .geeks1 { 
                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; 
        <div class = "geeks">
        <div class = "geeks1">
            A computer science portal for geeks
        <!-- Animation of the text inside the h2 tag  
             below will be repeated twice only -->
        <h2 id="one">
            This text changes its color two times.
        <!-- Animation of the text inside the h2 tag 
             below will be repeated infinitely -->
        <h2 id="two">
            This text changes its color infinite times.

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

  • Google Chrome 43.0
  • Internet Explorer 10.0
  • Firefox 16.0
  • Opera 30.0
  • Safari 9.0

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.

My Personal Notes arrow_drop_up
Recommended Articles
Page :