CSS animation-iteration-count Property
The CSS animation-iteration-count specified the number of times animation should be played. See examples and practice yourself.
The CSS animation-iteration-count property defines how many times an animation should be played before it stops. It accepts two types of values: a number (such as 1, 3, or 2.5) or the infinite keyword. The default value is 1, so by default an animation runs exactly once.
This property is what turns a one-shot transition into a looping effect. Pair it with animation-name, the @keyframes rule, and animation-duration, and you control both what the animation does and how often it repeats.
How the value is interpreted
infinite— the animation repeats forever (until the page is closed or the property is removed). This is the most common choice for ambient effects like spinners, pulsing badges, and background motion.- A whole number (
2,5, …) — the animation plays exactly that many full cycles, then freezes on the state defined by animation-fill-mode (by default it snaps back to the un-animated state). - A fractional number (
0.5,2.5, …) — the animation plays partial cycles.0.5runs the animation halfway through its keyframes and stops there;2.5plays two full cycles plus the first half of a third. 0— a valid value, but the animation simply does not play.- Negative numbers are invalid and the declaration is ignored.
Combining with other properties
animation-iteration-count works hand in hand with animation-direction. If the count is greater than 1 and the direction is alternate, every other cycle runs in reverse, which produces a smooth back-and-forth motion instead of a hard jump back to the start on each repeat.
When multiple comma-separated values are specified, they are applied sequentially to the animations defined in animation-name. If there are fewer values than animations, the list is repeated. If there are more values than animations, the extra values are ignored.
The animation-iteration-count property is one of the CSS3 properties and is supported in all modern browsers. It can also be set as part of the animation shorthand.
| Initial Value | 1 |
|---|---|
| Applies to | All elements, ::before and ::after pseudo-elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.animationIterationCount = "infinite"; |
Syntax
Syntax of CSS animation-iteration-count Property
animation-iteration-count: number | infinite | initial | inherit;Example of the animation-iteration-count property:
Example of CSS animation-iteration-count Property with number value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 100px;
height: 100px;
margin: 30px 0;
border-radius: 50%;
animation-name: pulse;
}
.element-one {
background-color: #1c87c9;
animation-duration: 3s;
animation-iteration-count: 3;
}
.element-two {
margin: 0;
background-color: #83bf42;
animation-duration: 5s;
animation-iteration-count: 2;
}
@keyframes pulse {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50%);
}
100% {
transform: translateX(0);
}
}
</style>
</head>
<body>
<h2>The animation-iteration-count example</h2>
<p>The animation-iteration-count sets the number of times an animation cycle should be played before stopping.</p>
<div class="element-one"></div>
<div class="element-two"></div>
</body>
</html>Example of the animation-iteration-count property with the "infinite" value:
Example of CSS animation-iteration-count Property with infinite value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 100px;
height: 100px;
margin: 30px 0;
border-radius: 50%;
animation-name: pulse;
}
.element-one {
background-color: #1c87c9;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.element-two {
margin: 0;
background-color: #83bf42;
animation-duration: 5s;
animation-iteration-count: 2;
}
@keyframes pulse {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50%);
}
100% {
transform: translateX(0);
}
}
</style>
</head>
<body>
<h2>The animation-iteration-count example</h2>
<p>The animation-iteration-count property sets the number of times an animation cycle should be played before stopping.</p>
<div class="element-one"></div>
<div class="element-two"></div>
</body>
</html>Setting animation-iteration-count: infinite is the standard way to build loading spinners. Combine it with a rotate() transform inside @keyframes and a linear animation-timing-function so the spin runs at a constant speed with no easing pauses.
Values
| Value | Description | Play it |
|---|---|---|
| number | Defines how many times the animation should be played. Default value is 1. | Play it » |
| infinite | The animation is played without stopping. | Play it » |
| initial | Sets the property to its default value. | |
| inherit | Inherits the property from its parent element. |