CSS3 animation-iteration-count Property
Here is a brief description of how to specify the iteration count, that is the number of times an animation should run in CSS3 using the CSS3 animation-iteration-count property.
Explanation
Property :
animation-iteration-count: number|infinite|initial|inherit; Where, number - A number that defines how many times an animation should be played. Default value is 1. infinite - Specifies that the animation should be played infinite times (for ever). initial - Sets this property to its default value. inherit - Inherits this property from its parent element.Usage:
animation-iteration-count: infinite;
animation-iteration-count: 3;
Definition:
The animation-iteration-count property specifies the number of times an animation should run.
Example :
<style>
.demodiv {
width: 50px;
height: 50px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:violet; left:0px; top:0px;}
25% {background-color:indigo; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
} </style>
<div class='demodiv'></div>
.demodiv {
width: 50px;
height: 50px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:violet; left:0px; top:0px;}
25% {background-color:indigo; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
} </style>
<div class='demodiv'></div>
Result:
The above will run the animation 3 times before it stops.
