Propriété CSS animation-iteration-count

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>

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>

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.

Support de Navigateurs

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-


Trouvez-vous cela utile?

Articles Associées