How to play the animation exactly two times using CSS ? Last Updated : 22 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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> Output:Supported Browsers:Google ChromeInternet ExplorerFirefoxOperaSafari Comment More infoAdvertise with us Next Article How to Play and Pause CSS Animations using CSS Custom Properties ? M manaschhabra2 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to play animation from start to end with same speed using CSS? To play the animation has the same speed from start to end by using the animation-timing-function property in CSS. It is used to specify how the animation makes transitions through keyframes. It is used to specify the motion of animation during transitions. Syntax:animation-timing-function: linear; 2 min read How to pause/play animation using CSS ? CSS helps to animate HTML elements without using JavaScript. You can play and pause the animation applied to HTML elements using animation-play-state property of CSS.The animation-play-state property has 2 values:paused - Pauses an ongoing animation.running - Starts a paused animation (default value 2 min read How to Play and Pause CSS Animations using CSS Custom Properties ? In this article, we will see how to control CSS animations using custom properties, along with knowing their implementation through examples.CSS Animations are the automatic transitions that can be made on the web page which lets an element change from one style to another. CSS Custom Properties are 5 min read How to use steps() method in CSS Animations ? The steps() method is a timing function in animation property that divides an animation into n steps, displaying each step at equal intervals of time. For example, if n is 2 then it will divide the animation into 2 parts. It divides the duration from 0% to 100% into 2 parts which are 0% - 50% and 50 4 min read Loading Text Animation Effect using CSS There are a lot of animations possible in CSS and today we will look at the loading text animation. The basic idea behind the working of this animation is the application of animation delay. Every alphabet is delayed by .1s so that each alphabet animates with a little delay and give the loading anim 3 min read How to create Timeline Animations using Anime.js ? Anime.js is a lightweight JavaScript library with a simple and small powerful API. It works with the DOM element, CSS, and JavaScript object.PrerequisitesBasic knowledge of HTMLBasic knowledge of CSSBasic knowledge of JavaScriptInstallation of anime.js: There are two ways to use anime.js in your pro 2 min read Like