`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.

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

Es ist oft praktisch, die Kurzschreibweise 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;

Die animation-iteration-count Eigenschaft wird als ein oder mehrere durch Kommas getrennte Werte angegeben.

Werte

infinite: Die Animation wird unendlich oft wiederholt.
<number>: Die Anzahl, wie oft die Animation wiederholt wird; 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 bei einer animation-* Eigenschaft angeben, werden diese in der Reihenfolge auf die Animationen angewendet, in der die animation-names auftauchen. Für Fälle, in denen die Anzahl der Animationen und animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animations-Eigenschaftswerte.

Hinweis: Bei der Erstellung von Scroll-gesteuerten CSS-Animationen führt die Angabe einer animation-iteration-count dazu, dass die Animation so oft wiederholt wird, wie der Zeitverlauf es zulässt. Wenn keine animation-iteration-count angegeben ist, wird die Animation nur einmal ausgeführt. infinite ist ein gültiger Wert für scroll-gesteuerte Animationen, führt jedoch 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 ablaufen.

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