CSS animation-iteration-count Property

The number of times an animation should be played.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
.box{
    position: relative;
    width: 80px;
    height: 80px;
    background: #00ab55;
    animation: moveit 6s;
    animation-iteration-count: 2;
}

@keyframes moveit {
    from {left: 0;}
    to {left: 200px;}
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

Preview

Property Values

Value	Description
number	A number that specifies the number of times an animation should be played. The default value is 1.
infinite	This specifies that the animation should be played indefinitely.
initial	Set this property's value to the default.
inherit	This attribute is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
animation-iteration-count	43.0 4.0 -webkit-	16.0 5.0 -moz-	9.0 4.0 -webkit-	10.0	30.0 15.0 -webkit- 12.0 -o-

animation-fill-mode

animation-name

CSS animation-iteration-count Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us