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.
- Google Chrome
- Internet Explorer
- How to play animation from start to end with same speed using CSS ?
- CSS | animation-play-state Property
- Cartoon animation loader using CSS
- How to make smooth bounce animation using CSS ?
- Loading Text Animation Effect using CSS
- How to create X and Y axis flip animation using HTML and CSS ?
- How to Create Border Animation using CSS ?
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- How to Create Gradient Background Animation using HTML and CSS ?
- Rubber Band Text animation using HTML and CSS
- Text Animation with changing the color of the text using HTML & CSS
- How to Create Text Color Animation using HTML and CSS ?
- How to Create Jumping Text 3D Animation Effect using CSS ?
- How to Create Text Changing Animation Effect using CSS ?
- How to create text-fill animation using CSS ?
- How to Create Animation Loading Bar using CSS ?
- How to Create Ghost Text Animation on Hover using HTML and CSS?
- Animation using clip-path property in CSS
- How to Create a Dot loading Animation using HTML and CSS?
- How to play/pause video using jQuery ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.