animation-iteration-count
Defines how many times an animation runs.
Syntax
animation-iteration-count: <value>;
where <value>
can be one of the following:
- Number value:
3
,300
inifinite
will run animation on endless loop
Note: providing one value will apply to all animation-name
values. Additional comma separated values will apply correspondingly.
Example 1
Run animation fadeoutfadein
two times:
div {height: 200px;width: 200px;background-color: blue;animation-duration: 2s;animation-name: fadeoutfadein;animation-iteration-count: 2;}@keyframes fadeoutfadein {0% {background-color: blue;}50% {background-color: white;}100% {background-color: blue;}}
Example 2
Run animation fadeoutfadein
two times and slideleft
one time:
div {height: 200px;width: 200px;background-color: blue;animation-duration: 4s, 4000ms;animation-name: fadeoutfadein, slideleft;animation-iteration-count: 1, 2;}@keyframes fadeoutfadein {0% {background-color: blue;}50% {background-color: white;}100% {background-color: blue;}}@keyframes slideleft {from {margin-left: 100%;}to {margin-left: 0%;}}