W3docs
fr
Se connecter

Propriété CSS animation-iteration-count

La propriété CSS animation-iteration-count définit le nombre de fois qu'une animation doit être jouée. Consultez des exemples et entraînez-vous.

La propriété CSS animation-iteration-count définit combien de fois une animation doit être jouée avant de s'arrêter. Elle accepte deux types de valeurs : un nombre (par exemple 1, 3 ou 2.5) ou le mot-clé infinite. La valeur par défaut est 1, donc par défaut une animation s'exécute exactement une fois.

Cette propriété est ce qui transforme une transition unique en un effet en boucle. Associez-la à animation-name, la règle @keyframes et animation-duration, et vous contrôlez à la fois ce que fait l'animation et combien de fois elle se répète.

Comment la valeur est interprétée

  • infinite — l'animation se répète indéfiniment (jusqu'à ce que la page soit fermée ou que la propriété soit supprimée). C'est le choix le plus courant pour les effets ambiants comme les spinners, les badges clignotants et les animations d'arrière-plan.
  • Un nombre entier (2, 5, …) — l'animation joue exactement ce nombre de cycles complets, puis se fige dans l'état défini par animation-fill-mode (par défaut, elle revient à l'état non animé).
  • Un nombre fractionnaire (0.5, 2.5, …) — l'animation joue des cycles partiels. 0.5 exécute l'animation jusqu'à la moitié de ses images clés et s'arrête là ; 2.5 joue deux cycles complets plus la première moitié d'un troisième.
  • 0 — une valeur valide, mais l'animation ne joue tout simplement pas.
  • Les nombres négatifs sont invalides et la déclaration est ignorée.

Combinaison avec d'autres propriétés

animation-iteration-count fonctionne de concert avec animation-direction. Si le nombre est supérieur à 1 et que la direction est alternate, chaque cycle pair s'exécute en sens inverse, ce qui produit un mouvement d'aller-retour fluide au lieu d'un retour brusque au début à chaque répétition.

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 et est prise en charge par tous les navigateurs modernes. Elle peut également être définie dans le raccourci animation.

Valeur initiale1
S'applique àTous les éléments, les pseudo-éléments ::before et ::after.
HéritéeNon.
AnimatableNon.
VersionCSS3
Syntaxe DOMobject.style.animationIterationCount = "infinite";

Syntaxe

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

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

<!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>
Essayez vous-même »

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

Exemple de la propriété CSS animation-iteration-count avec la valeur infinite

<!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>
Essayez vous-même »
Info

Utiliser animation-iteration-count: infinite est la méthode standard pour créer des spinners de chargement. Combinez-le avec une transformation rotate() dans @keyframes et une animation-timing-function linear pour que la rotation s'effectue à vitesse constante sans pauses d'accélération.

Valeurs

ValeurDescriptionEssayer
numberDéfinit combien de fois l'animation doit être jouée. La valeur par défaut est 1.Essayer »
infiniteL'animation est jouée sans s'arrêter.Essayer »
initialDéfinit la propriété à sa valeur par défaut.
inheritHérite de la propriété de son élément parent.

Entraînement

Pratique
Que spécifie la propriété CSS 'animation-iteration-count' ?
Que spécifie la propriété CSS 'animation-iteration-count' ?
Was this page helpful?