CSS-Eigenschaft animation-iteration-count

Die CSS-Eigenschaft animation-iteration-count definiert, wie oft die Animation abgespielt werden soll. Sie akzeptiert zwei Arten von Werten: eine Zahl oder das Schlüsselwort infinite. Der Standardwert ist 1. Null ist ein gültiger Wert (die Animation wird nicht abgespielt), negative Werte sind jedoch ungültig. Das Schlüsselwort infinite gibt an, dass sich die Animation endlos wiederholen soll.

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

Die Eigenschaft animation-iteration-count ist eine der CSS3-Eigenschaften.

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

Syntax

Syntax der CSS-Eigenschaft animation-iteration-count

css

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

Beispiel für die animation-iteration-count-Eigenschaft:

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

html

<!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>

Try it Yourself »

Beispiel für die animation-iteration-count-Eigenschaft mit dem Wert „infinite“:

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

html

<!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>

Try it Yourself »

Werte

Wert	Beschreibung	Abspielen
number	Definiert, wie oft die Animation abgespielt werden soll. Standardwert ist 1.	Abspielen »
infinite	Die Animation wird ohne Unterbrechung abgespielt.	Abspielen »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Practice

Was gibt die CSS-Eigenschaft 'animation-iteration-count' an?

Es bestimmt, wie oft eine Animation wiederholt werden soll.Es gibt die Richtung der Animation an.Es legt die Dauer der Animation fest.Es gibt an, ob die Animation vorwärts, rückwärts oder abwechselnd abgespielt werden soll.Es kann auf 'infinite' gesetzt werden, damit sich eine Animation endlos wiederholt.

CSS-Eigenschaft animation-iteration-count ​

Syntax ​

Beispiel für die animation-iteration-count-Eigenschaft: ​

Beispiel für die animation-iteration-count-Eigenschaft mit dem Wert „infinite“: ​