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