The animation-iteration-count property specifies how many times an animation should be played.

Syntax of this property:

animation-iteration-count: number | infinite | initial | inherit ;

Property Values

number – it specifies a number that defines how many times an animation should be played. (default = 1)

infinite – it specifies that the animation should be played infinite times.

initial – it specifies that the value of the property should be set to the default value.

inherit – it specifies that the value of the property should be inherited from the parent element.

Example – This example shows how many times an animation should be played.

Copy and paste this source code to your HEAD tag of your page.

<style type="text/css">

div.animate {
width:50px;
height:50px;
color:white;
padding:2px;
background:blue;
position:relative;
}

#test1 {
animation-name:boxmove;
animation-duration:5s;
animation-iteration-count:infinite;
/* Firefox */
-moz-animation-name:boxmove;
-moz-animation-duration:5s;
-moz-animation-iteration-count:infinite;
/* Safari and Google Chrome */
-webkit-animation-name:boxmove;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
}

#test2 {
animation-name:boxmove;
animation-duration:5s;
animation-iteration-count:5;
/* Firefox */
-moz-animation-name:boxmove;
-moz-animation-duration:5s;
-moz-animation-iteration-count:5;
/* Safari and Google Chrome */
-webkit-animation-name:boxmove;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:5;
}

#test3 {
animation-name:boxmove;
animation-duration:5s;
animation-iteration-count:3;
/* Firefox */
-moz-animation-name:boxmove;
-moz-animation-duration:5s;
-moz-animation-iteration-count:3;
/* Safari and Google Chrome */
-webkit-animation-name:boxmove;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:3;
}

@keyframes boxmove
{
from {left:0px;}
to {left:210px;}
}

@-moz-keyframes boxmove /* Firefox */
{
from {left:0px;}
to {left:210px;}
}

@-webkit-keyframes boxmove /* Safari and Google Chrome */
{
from {left:0px;}
to {left:210px;}
}

</style>

<div id="test1" class="animate">infinite</div>
<br />
<div id="test2" class="animate">5 times</div>
<br />
<div id="test3" class="animate">3 times</div>

LEAVE A REPLY

Please enter your comment!
Please enter your name here

16 + nine =