W3docs
de
Anmelden

CSS animation-iteration-count Eigenschaft

Die CSS-Eigenschaft animation-iteration-count legt fest, wie oft eine Animation abgespielt werden soll. Beispiele und Übungen enthalten.

Die CSS-Eigenschaft animation-iteration-count legt fest, wie oft eine Animation abgespielt werden soll, bevor sie stoppt. Sie akzeptiert zwei Arten von Werten: eine Zahl (z. B. 1, 3 oder 2.5) oder das Schlüsselwort infinite. Der Standardwert ist 1, sodass eine Animation standardmäßig genau einmal ausgeführt wird.

Diese Eigenschaft verwandelt einen einmaligen Übergang in einen Schleifeneffekt. In Kombination mit animation-name, der @keyframes-Regel und animation-duration steuern Sie sowohl was die Animation tut als auch wie oft sie sich wiederholt.

Interpretation des Wertes

  • infinite — die Animation wiederholt sich endlos (bis die Seite geschlossen oder die Eigenschaft entfernt wird). Dies ist die häufigste Wahl für Umgebungseffekte wie Spinner, pulsierende Badges und Hintergrundbewegungen.
  • Eine ganze Zahl (2, 5, …) — die Animation läuft genau so viele vollständige Zyklen durch und friert dann in dem Zustand ein, der durch animation-fill-mode definiert ist (standardmäßig springt sie in den nicht animierten Zustand zurück).
  • Eine Dezimalzahl (0.5, 2.5, …) — die Animation durchläuft teilweise Zyklen. 0.5 führt die Animation bis zur Hälfte ihrer Keyframes aus und stoppt dort; 2.5 spielt zwei vollständige Zyklen plus die erste Hälfte eines dritten ab.
  • 0 — ein gültiger Wert, aber die Animation wird schlicht nicht abgespielt.
  • Negative Zahlen sind ungültig und die Deklaration wird ignoriert.

Kombination mit anderen Eigenschaften

animation-iteration-count arbeitet eng mit animation-direction zusammen. Wenn der Zähler größer als 1 ist und die Richtung alternate beträgt, wird jeder zweite Zyklus rückwärts ausgeführt, was eine sanfte Hin-und-Her-Bewegung erzeugt, anstatt bei jeder Wiederholung hart zum Anfang zurückzuspringen.

Wenn mehrere durch Komma getrennte Werte angegeben werden, werden sie sequenziell auf die in animation-name definierten Animationen angewendet. Gibt es weniger Werte als Animationen, wird die Liste wiederholt. Gibt es mehr Werte als Animationen, werden die zusätzlichen Werte ignoriert.

Die Eigenschaft animation-iteration-count gehört zu den CSS3-Eigenschaften und wird von allen modernen Browsern unterstützt. Sie kann auch als Teil der animation-Kurzschreibweise gesetzt werden.

Anfangswert1
Gilt fürAlle Elemente, Pseudo-Elemente ::before und ::after.
VererbbarNein.
AnimierbarNein.
VersionCSS3
DOM-Syntaxobject.style.animationIterationCount = "infinite";

Syntax

Syntax der CSS animation-iteration-count Eigenschaft

animation-iteration-count: number | infinite | initial | inherit;

Beispiel der animation-iteration-count Eigenschaft:

Beispiel der CSS animation-iteration-count Eigenschaft mit einem Zahlenwert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      div {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 30px 0;
        border-radius: 50%;
        animation-name: pulse;
      }
      .element-one {
        background-color: #1c87c9;
        animation-duration: 3s;
        animation-iteration-count: 3;
      }
      .element-two {
        margin: 0;
        background-color: #83bf42;
        animation-duration: 5s;
        animation-iteration-count: 2;
      }
      @keyframes pulse {
        0% {
          transform: translateX(0);
        }
        50% {
          transform: translateX(50%);
        }
        100% {
          transform: translateX(0);
        }
      }
    </style>
  </head>
  <body>
    <h2>The animation-iteration-count example</h2>
    <p>The animation-iteration-count sets the number of times an animation cycle should be played before stopping.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>
Probier es selbst »

Beispiel der animation-iteration-count Eigenschaft mit dem Wert "infinite":

Beispiel der CSS animation-iteration-count Eigenschaft mit dem Wert infinite

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      div {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 30px 0;
        border-radius: 50%;
        animation-name: pulse;
      }
      .element-one {
        background-color: #1c87c9;
        animation-duration: 3s;
        animation-iteration-count: infinite;
      }
      .element-two {
        margin: 0;
        background-color: #83bf42;
        animation-duration: 5s;
        animation-iteration-count: 2;
      }
      @keyframes pulse {
        0% {
          transform: translateX(0);
        }
        50% {
          transform: translateX(50%);
        }
        100% {
          transform: translateX(0);
        }
      }
    </style>
  </head>
  <body>
    <h2>The animation-iteration-count example</h2>
    <p>The animation-iteration-count property sets the number of times an animation cycle should be played before stopping.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>
Probier es selbst »
Info

animation-iteration-count: infinite ist die Standardmethode zum Erstellen von Lade-Spinnern. Kombinieren Sie es mit einer rotate()-Transformation innerhalb von @keyframes und einer linear animation-timing-function, damit die Drehung mit konstanter Geschwindigkeit ohne Easing-Pausen läuft.

Werte

WertBeschreibungAusprobieren
numberLegt fest, wie oft die Animation abgespielt werden soll. Standardwert ist 1.Ausprobieren »
infiniteDie Animation wird ohne Unterbrechung abgespielt.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert.
inheritErbt die Eigenschaft vom übergeordneten Element.

Übungen

Übung
Was legt die CSS-Eigenschaft 'animation-iteration-count' fest?
Was legt die CSS-Eigenschaft 'animation-iteration-count' fest?
Was this page helpful?