`animation-iteration-count` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die animation-iteration-count CSS Eigenschaft legt fest, wie oft eine Animationssequenz abgespielt werden soll, bevor sie stoppt.

Es ist oft praktisch, die Kurzschreibweiseigenschaft animation zu verwenden, um alle Animationseigenschaften auf einmal festzulegen.

Probieren Sie es aus

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();

Syntax

css

/* 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;

Werte

Diese Eigenschaft wird als ein oder mehrere durch Kommas getrennte Werte angegeben:

infinite: Die Animation wird unendlich wiederholt.
<number>: Anzahl der Wiederholungen der Animation; standardmäßig ist dies 1. Sie können nicht-ganzzahlige Werte angeben, um Teile eines Animationszyklus abzuspielen: zum Beispiel wird 0.5 die Hälfte des Animationszyklus abspielen. Negative Werte sind ungültig.

Hinweis: Wenn Sie mehrere durch Kommas getrennte Werte für eine animation-* Eigenschaft angeben, werden diese in der Reihenfolge angewendet, in der die animation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animations-Eigenschaftswerte.

Hinweis: Beim Erstellen von CSS scroll-gesteuerten Animationen bewirkt die Angabe eines animation-iteration-count, dass die Animation so oft wiederholt wird, wie die Zeitleiste fortschreitet. Wenn kein animation-iteration-count angegeben wird, tritt die Animation nur einmal auf. infinite ist ein gültiger Wert für scroll-gesteuerte Animationen, aber es führt zu einer Animation, die nicht funktioniert.

Formale Definition

Anfangswert	`1`
Anwendbar auf	alle Elemente, `::before` und `::after` Pseudoelemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Not animatable

Formale Syntax

animation-iteration-count = 
  <single-animation-iteration-count>#  

<single-animation-iteration-count> = 
  infinite        |
  <number [0,∞]>

Beispiele

Festlegen der Wiederholungsanzahl

Diese Animation wird 10 Mal ausgeführt.

HTML

html

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

CSS

css

.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);
  }
}