Propriété CSS animation-iteration-count

❮ Précédent Suivant ❯

La propriété CSS animation-iteration-count spécifie combien de fois l’animation doit être jouée. Elle est spécifiée par deux valeurs: number et infinite. La valeur par défaut est 1, mais on peut définir n'importe quel nombre. 0 ou les valeur négatives sont invalides. Si l'animation est définie par la valeur infinite, elle sera jouée indéfiniment.

Valeur initiale	1
Appliquée à	Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::before et ::after
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.animationIterationCount = "infinite";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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% { left: 0; }
      50% { left: 50%; }
      100% { left: 0; }
      }
    </style>
  </head>
  <body>
    <h2>Exemple de l'animation-iteration-count</h2>
    <p>La propriété animation-iteration-count définit le nombre des boucles d’animation.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>

Essayez-vous-même!

Voici un exemple, où l'animation est jouée indéfiniment.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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% { left: 0; }
      50% { left: 50%; }
      100% { left: 0; }
      }
    </style>
  </head>
  <body>
    <h2>Exemple de l'animation-iteration-count</h2>
    <p>définit le nombre des boucles d’animation.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
number	Définit combien de fois l’animation doit être jouée. La valeur par défaut est 1.
infinite	Indique, que l’animation doit être jouée indéfiniment.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.