animation-iteration-count

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

Probieren Sie es aus

Es ist oft praktisch, die Kurzformeigenschaft animation zu verwenden, um alle Animations-Eigenschaften auf einmal festzulegen.

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 der Wiederholungen der Animation; dies ist standardmäßig 1. Sie können nicht-ganzzahlige Werte angeben, um einen Teil eines Animationszyklus abzuspielen: Zum Beispiel spielt 0.5 die Hälfte des Animationszyklus ab. Negative Werte sind ungültig.

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

Hinweis: Wenn Sie CSS-Scroll-gesteuerte Animationen erstellen, bewirkt die Angabe einer animation-iteration-count, dass die Animation über den Verlauf der Timeline entsprechend oft wiederholt wird. Wenn keine animation-iteration-count angegeben ist, erfolgt die Animation nur einmal. infinite ist ein gültiger Wert für Scroll-gesteuerte Animationen, führt aber zu einer nicht funktionierenden Animation.

Formale Definition

Initialer Wert1
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

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

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

Beispiele

Iterationanzahl festlegen

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

Ergebnis

Fahren Sie mit der Maus über das Rechteck, um die Animation zu starten.

Siehe CSS-Animationen für Beispiele.

Spezifikationen

Specification
CSS Animations Level 1
# animation-iteration-count

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch