CSS-Eigenschaft animation-iteration-count

Die CSS-Eigenschaft animation-iteration-count gibt an, wie oft die Animation abgespielt werden soll. Sie wird durch zwei Werte angegeben: number und infinite. Der Standardwert ist 1, aber es kann eine beliebige Zahl eingestellt werden. 0 oder negative Werte sind ungültig. Wenn die Animation auf den Wert infinite eingestellt ist, wird sie für immer abgespielt.

Anfangswert 1
Gilt für Alle Elemente und für die Pseudo-Elemente ::before und ::after.
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.animationIterationCount = "infinite";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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% { left: 0; }
      50% { left: 50%; }
      100% { left: 0; }
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für animation-iteration-count</h2>
    <p>Die Eigenschaft animation-iteration-count legt fest, wie oft ein Animationszyklus vor dem Stoppen abgespielt werden soll.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>

Sehen Sie sich ein Beispiel an, bei dem die Animation unendlich lange abgespielt wird.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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% { left: 0; }
      50% { left: 50%; }
      100% { left: 0; }
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für animation-iteration-count</h2>
    <p>Die Eigenschaft animation-iteration-count stellt ein, wievielmal ein Animation-Zyklus vor dem Aufhören abgespielt werden soll.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>

Werte

Wert Beschreibung
number Es definiert, wie oft die Animation gespielt werden soll. Voreingestellt ist der Wert 1.
infinite Die Animation wird ohne Stoppen gespielt.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
43.0+
4.0-42.0 -webkit-
16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-

Übe dein Wissen

Welche Werte kann die CSS-Eigenschaft 'animation-iteration-count' annehmen?
Finden Sie das nützlich?