files/en-us/web/css/reference/properties/animation-iteration-count/index.md
The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping.
It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.
{{InteractiveExample("CSS Demo: animation-iteration-count")}}
animation-iteration-count: 0;
animation-iteration-count: 2;
animation-iteration-count: 1.5;
<section class="flex-column" id="default-example">
<div>Animation <span id="play-status"></span></div>
<div id="example-element">Select a count to start!</div>
</section>
#example-element {
align-items: center;
background-color: #1766aa;
border-radius: 50%;
border: 5px solid #333333;
color: white;
display: flex;
flex-direction: column;
height: 150px;
justify-content: center;
margin: auto;
margin-left: 0;
width: 150px;
}
#play-status {
font-weight: bold;
}
.animating {
animation-name: slide;
animation-duration: 3s;
animation-timing-function: ease-in;
}
@keyframes slide {
from {
background-color: orange;
color: black;
margin-left: 0;
}
to {
background-color: orange;
color: black;
margin-left: 80%;
}
}
const el = document.getElementById("example-element");
const status = document.getElementById("play-status");
function update() {
status.textContent = "delaying";
el.className = "";
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
el.className = "animating";
});
});
}
el.addEventListener("animationstart", () => {
status.textContent = "playing";
});
el.addEventListener("animationend", () => {
status.textContent = "finished";
});
const observer = new MutationObserver(() => {
update();
});
observer.observe(el, {
attributes: true,
attributeFilter: ["style"],
});
update();
/* Keyword value */
animation-iteration-count: infinite;
/* <number> values */
animation-iteration-count: 3;
animation-iteration-count: 2.4;
/* Multiple values */
animation-iteration-count: 2, 0, infinite;
/* Global values */
animation-iteration-count: inherit;
animation-iteration-count: initial;
animation-iteration-count: revert;
animation-iteration-count: revert-layer;
animation-iteration-count: unset;
The animation-iteration-count property is specified as one or more comma-separated values.
infinite
1 by default. You may specify non-integer values to play part of an animation cycle: for example, 0.5 will play half of the animation cycle. Negative values are invalid.[!NOTE] When you specify multiple comma-separated values on an
animation-*property, they are applied to the animations in the order in which the {{cssxref("animation-name")}}s appear. For situations where the number of animations andanimation-*property values do not match, see Setting multiple animation property values.
[!NOTE] When creating CSS scroll-driven animations, specifying an
animation-iteration-countcauses the animation to repeat that number of times over the course of the timeline's progression. If ananimation-iteration-countis not provided, the animation will only occur once.infiniteis a valid value for scroll-driven animations, but it results in an animation that doesn't work.
{{cssinfo}}
{{csssyntax}}
This animation will run 10 times.
<div class="box"></div>
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
}
.box:hover {
animation-name: rotate;
animation-duration: 0.7s;
animation-iteration-count: 10;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Hover over the rectangle to start the animation.
{{EmbedLiveSample("Setting iteration count","100%","250")}}
See CSS animations for examples.
{{Specifications}}
{{Compat}}