CSS animation-iteration-count Property

CSS animation-iteration-count Property

By default, an animation runs only once.

You can have the animation run several times by giving a number for animation-iteration-count, or you can have it loop forever by specifying the keyword infinite.

Interestingly, this value does not have to be a whole number.

For example,

you can specify animation-iteration-count: 0.5, and the animation will play once to the halfway point only.

Syntax –

animation-iteration-count: number | infinite [, number | infinite]*

where number is a positive integer and the keyword infinite indicates a continuous animation.

Now we will see Example -

Example –

<!DOCTYPE html>
<html>
<style type="text/css">
@-webkit-keyframes resize {
from {
height: 300px;
width: 100px;
left: 0;
top: 0;
}

50% {
height: 100px;
width: 100px;
left: 300px;
top: 0;
}

to {
height: 100px;
width: 300px;
left: 300px;
top: 300px;
}
}

@-webkit-keyframes move {
from {
left: 150px;
top: 150px;
}

50% {
left: 300px;
top: 0;
}

to {
left: 400px;
top: 200px;
}
}

#anim1 {
-webkit-animation-name: resize;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
position: absolute;
background-color: purple;
}

#anim2 {
-webkit-animation-name: move;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 2;
position: absolute;
top: 150px;
left: 150px;
background-color: orange;
}
</style>

<body>
<div id="anim1">Watch me move and change size forever!</div>
<div id="anim2">Watch me move two times</div>
</body>

</html>

Output -

Sample output would be -

Note -

• WebKit supports this property as -webkit-animation-iteration-count.

• Firefox 3.7 pre-releases show support for CSS transitions which are very related to CSS animation.

It is quite likely that a form of this property using the -moz prefix may be supported in a Firefox browser by the time you read this.