How to play the animation exactly two times using CSS ?

The approach of this article is to play the animation exactly two times by using the animation-iteration-count property in CSS. It 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;

Example: Below code used to change the background color of <h2> element from red to blue. 

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html>
  
<head> 
    <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; 
        } 
          
        @keyframes example { 
            from { 
                background-color: red; 
            } 
            to { 
                background-color: blue 
            } 
        } 
    </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"> 
        How to play the animation 
        two times using CSS? 
    </h2> 
</body> 
  
</html>

chevron_right






                        filter_none










Output:




Supported Browsers:


    

  • Google Chrome
    • 

  • Internet Explorer
    • 

  • Firefox
    • 

  • Opera
    • 

  • Safari
    • 



full-stack-img





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
ManasChhabra2
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.