How to play the animation exactly two times using CSS ?

Last Updated : 23 Sep, 2020

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

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