Skip to content
Related Articles

Related Articles

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.

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

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :