CSS animation-iteration-count Property
The animation-iteration-count property in CSS 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;
Property Value:
- number: This property value is used to define the number of times an animation should be played. The default value is 1.
- infinite: This property value specifies that the animation should be played infinite times (forever).
- initial: This property value is used to set this property to its default value.
- inherit: This value is used to inherit this property from its parent element.
Example: HTML program to illustrate animation-iteration-count
html
<!DOCTYPE html> < html > < head > < title > CSS | animation-iteration-count Property </ title > < style > .Beginner { font-size: 40px; text-align: center; font-weight: bold; color: #090; padding-bottom: 5px; font-family: Times New Roman; } .Beginner1 { 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; } #two { animation-name: example; animation-duration: 2s; /* Animation will be repeated infinitely */ animation-iteration-count: infinite; } @keyframes example { from { background-color: orange; } to { background-color: white; } } </ style > </ head > < body > < div class = "Beginner" > w3wiki </ div > < div class = "Beginner1" > A computer science portal for Beginner </ div > <!-- Animation of the text inside the h2 tag below will be repeated twice only --> < h2 id = "one" > This text changes its color two times. </ h2 > <!-- Animation of the text inside the h2 tag below will be repeated infinitely --> < h2 id = "two" > This text changes its color infinite times. </ h2 > </ body > </ html > |
Output:
Supported Browser: The browser supported by animation-iteration-count property are listed below:
- Google Chrome 43.0 and above
- Edge 12.0 and above
- Firefox 16.0 and above
- Opera 30.0 and above
- Safari 9.0 and above