CSS-Eigenschaft animation-iteration-count

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.