Open In App
Related Articles

How to play the animation exactly two times using CSS ?

Improve Article
Save Article
Like Article

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.  


animation-iteration-count: number | infinite | initial | inherit; 

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


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


Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 23 Sep, 2020
Like Article
Save Article
Similar Reads
Complete Tutorials