Propriété CSS animation-iteration-count

La propriété CSS animation-iteration-count définit le nombre de fois où l'animation doit être jouée. Elle accepte deux types de valeurs : un nombre ou le mot-clé infinite. La valeur par défaut est 1. Zéro est une valeur valide (l'animation ne sera pas jouée), mais les valeurs négatives sont invalides. Le mot-clé infinite spécifie que l'animation doit se répéter indéfiniment.

Lorsque plusieurs valeurs séparées par des virgules sont spécifiées, elles sont appliquées séquentiellement aux animations définies dans animation-name. S'il y a moins de valeurs que d'animations, la liste est répétée. S'il y a plus de valeurs que d'animations, les valeurs supplémentaires sont ignorées.

La propriété animation-iteration-count fait partie des propriétés CSS3.

Valeur initiale	1
S'applique à	Tous les éléments, les pseudo-éléments ::before et ::after.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.animationIterationCount = "infinite";

Syntaxe

Syntaxe de la propriété CSS animation-iteration-count

css

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

Exemple de la propriété animation-iteration-count :

Exemple de la propriété CSS animation-iteration-count avec une valeur numérique

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 »

Exemple de la propriété animation-iteration-count avec la valeur « infinite » :

Exemple de la propriété CSS animation-iteration-count avec une valeur 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 »

Valeurs

Valeur	Description	Jouer
number	Définit le nombre de fois où l'animation doit être jouée. La valeur par défaut est 1.	Jouer »
infinite	L'animation est jouée sans s'arrêter.	Jouer »
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Que spécifie la propriété CSS 'animation-iteration-count' ?

Elle détermine le nombre de fois qu'une animation doit être répétée.Elle spécifie la direction de l'animation.Elle définit la durée de l'animation.Elle indique si l'animation doit se jouer en avant, en arrière ou alterner entre les deux.Elle peut être définie sur 'infinite' pour qu'une animation se répète indéfiniment.

Propriété CSS animation-iteration-count ​

Syntaxe ​

Exemple de la propriété animation-iteration-count : ​

Exemple de la propriété animation-iteration-count avec la valeur « infinite » : ​