W3docs
it
Accedi

Proprietà CSS animation-iteration-count

La proprietà CSS animation-iteration-count specifica quante volte un'animazione deve essere riprodotta. Esempi e pratica inclusi.

La proprietà CSS animation-iteration-count definisce quante volte un'animazione deve essere riprodotta prima di fermarsi. Accetta due tipi di valori: un numero (come 1, 3 o 2.5) oppure la parola chiave infinite. Il valore predefinito è 1, quindi per impostazione predefinita un'animazione viene eseguita esattamente una volta.

Questa proprietà trasforma una transizione unica in un effetto a ciclo continuo. Combinala con animation-name, la regola @keyframes e animation-duration per controllare sia cosa fa l'animazione sia quante volte si ripete.

Come viene interpretato il valore

  • infinite — l'animazione si ripete all'infinito (finché la pagina non viene chiusa o la proprietà non viene rimossa). È la scelta più comune per effetti ambientali come spinner, badge pulsanti e movimenti di sfondo.
  • Un numero intero (2, 5, …) — l'animazione viene riprodotta esattamente per quel numero di cicli completi, poi si blocca nello stato definito da animation-fill-mode (per impostazione predefinita torna allo stato non animato).
  • Un numero frazionario (0.5, 2.5, …) — l'animazione esegue cicli parziali. 0.5 esegue l'animazione a metà dei suoi keyframe e si ferma lì; 2.5 esegue due cicli completi più la prima metà di un terzo.
  • 0 — un valore valido, ma l'animazione semplicemente non viene riprodotta.
  • I numeri negativi sono non validi e la dichiarazione viene ignorata.

Combinazione con altre proprietà

animation-iteration-count lavora in stretta collaborazione con animation-direction. Se il conteggio è maggiore di 1 e la direzione è alternate, ogni altro ciclo viene eseguito in senso inverso, producendo un movimento fluido avanti e indietro invece di un brusco ritorno all'inizio a ogni ripetizione.

Quando vengono specificati più valori separati da virgole, vengono applicati in sequenza alle animazioni definite in animation-name. Se ci sono meno valori che animazioni, la lista viene ripetuta. Se ci sono più valori che animazioni, i valori in eccesso vengono ignorati.

La proprietà animation-iteration-count è una delle proprietà CSS3 ed è supportata da tutti i browser moderni. Può essere impostata anche come parte della notazione abbreviata animation.

Valore iniziale1
Si applica aTutti gli elementi, pseudo-elementi ::before e ::after.
EreditataNo.
AnimabileNo.
VersioneCSS3
Sintassi DOMobject.style.animationIterationCount = "infinite";

Sintassi

Sintassi della proprietà CSS animation-iteration-count

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

Esempio della proprietà animation-iteration-count:

Esempio della proprietà CSS animation-iteration-count con valore numerico

<!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>
Provalo tu stesso »

Esempio della proprietà animation-iteration-count con il valore "infinite":

Esempio della proprietà CSS animation-iteration-count con valore 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>
Provalo tu stesso »
Informazione

Impostare animation-iteration-count: infinite è il metodo standard per creare spinner di caricamento. Combinalo con una trasformazione rotate() all'interno di @keyframes e una animation-timing-function linear affinché la rotazione avvenga a velocità costante senza pause di easing.

Valori

ValoreDescrizioneProvalo
numberDefinisce quante volte l'animazione deve essere riprodotta. Il valore predefinito è 1.Provalo »
infiniteL'animazione viene riprodotta senza interruzioni.Provalo »
initialImposta la proprietà al suo valore predefinito.
inheritEredita la proprietà dall'elemento padre.

Pratica

Pratica
Cosa specifica la proprietà CSS 'animation-iteration-count'?
Cosa specifica la proprietà CSS 'animation-iteration-count'?
Was this page helpful?