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
<!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 Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
.png)
