animation-iteration-count: 0;

animation-iteration-count: 2;

animation-iteration-count: 1.5;

<section>  <div>Animation <span></span></div>  <div>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;

Note:When you specify multiple comma-separated values on ananimation-* property, they are applied to the animations in the order in which theanimation-names appear. For situations where the number of animations andanimation-* property values do not match, seeSetting multiple animation property values.

Note:When creatingCSS scroll-driven animations, specifying ananimation-iteration-count causes the animation to repeat that number of times over the course of the timeline's progression. If ananimation-iteration-count is not provided, the animation will only occur once.infinite is a valid value for scroll-driven animations, but it results in an animation that doesn't work.

<div></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);  }}

Help improve MDN

This page was last modified onNov 17, 2025 byMDN contributors.