W3docs
it
Accedi

Proprietà CSS animation-delay

La proprietà CSS animation-delay specifica quando inizierà un'animazione. Guarda esempi e provali tu stesso.

La proprietà CSS animation-delay specifica quanto tempo attendere prima che un'animazione inizi a riprodursi. L'animazione può iniziare in ritardo (ritardo positivo), immediatamente (0s, il valore predefinito), oppure saltare direttamente a un punto intermedio della sequenza temporale (usando un ritardo negativo).

Questa pagina tratta la sintassi, i ritardi positivi e negativi, i millisecondi, il comportamento dei ritardi con animazioni multiple e le considerazioni sull'accessibilità da tenere a mente. La proprietà animation-delay è una delle proprietà CSS3, e di solito viene abbinata a animation-name e animation-duration.

Perché usare animation-delay

Un ritardo è utile ogni volta che un'animazione non deve iniziare nel momento esatto in cui la pagina viene caricata o l'elemento viene aggiunto al DOM. Casi comuni:

  • Scaglionamento — assegna a un elenco di elementi ritardi crescenti (0s, 0.1s, 0.2s, …) in modo che si animino uno dopo l'altro anziché tutti contemporaneamente.
  • Sequenziamento — attendi che l'animazione di un elemento finisca prima che un altro inizi.
  • Pre-avanzamento — usa un ritardo negativo per inserire un elemento nel mezzo di un'animazione in loop, in modo che non sembri "scattare" in movimento dall'inizio.

Come funziona il valore

Il valore predefinito è 0s. Il valore può essere espresso in secondi (s) o millisecondi (ms).

  • Un valore positivo (animation-delay: 2s) attende per quella durata, poi riproduce l'animazione dal primo keyframe.
  • Un valore di 0s avvia l'animazione immediatamente.
  • Un valore negativo (animation-delay: -2s) avvia l'animazione immediatamente, ma visualizzata come se fosse già in riproduzione da quella quantità di tempo. La prima parte dell'animazione viene saltata — non viene mai mostrata.

Quando vengono specificati più valori separati da virgola, essi scorrono ciclicamente per corrispondere al numero di animazioni elencate in animation-name. Ad esempio, animation-delay: 0s, 1s applica 0s alla prima animazione e 1s alla seconda.

Se i keyframe di un'animazione omettono il valore iniziale, il browser usa gli stili calcolati dell'elemento nel momento in cui l'animazione inizia.

Nota: animation-delay influisce solo sulla prima iterazione. Non aggiunge una pausa tra le iterazioni di un'animazione ripetuta — per farlo, costruisci la pausa direttamente nei keyframe.

ProprietàValore
Valore iniziale0s
Si applica aTutti gli elementi, pseudo-elementi ::before e ::after.
EreditataNo.
AnimabileNo.
VersioneCSS3
Sintassi DOMobject.style.animationDelay = "1s";

Sintassi

Sintassi della proprietà CSS animation-delay

animation-delay: time | initial | inherit;

Esempio della proprietà animation-delay:

Esempio della proprietà CSS animation-delay

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #1c87c9;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 3s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example</h2>
    <p>Here the animation starts after 3 seconds.</p>
    <div></div>
  </body>
</html>
Provalo tu stesso »

Esempio della proprietà animation-delay con valore negativo:

Esempio della proprietà CSS animation-delay con valore negativo

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: -2s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example with negative value.</h2>
    <p>Here, the animation will start as if it had already been playing for 2 seconds.</p>
    <div></div>
  </body>
</html>
Provalo tu stesso »

Esempio della proprietà animation-delay specificata in millisecondi:

Esempio della proprietà CSS animation-delay con millisecondi

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #8ebf42;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 200ms;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example in milliseconds.</h2>
    <p>Here, the animation will start after 200ms.</p>
    <div></div>
  </body>
</html>
Provalo tu stesso »

Valori

ValoreDescrizioneProvalo
timeDefinisce il numero di secondi (s) o millisecondi (ms) da attendere prima che l'animazione inizi. È opzionale.Provalo »
initialImposta la proprietà al suo valore predefinito.
inheritEredita la proprietà dall'elemento padre.

Accessibilità

Le animazioni ritardate e in loop possono essere distraenti e causare disagio agli utenti con disturbi vestibolari. Rispetta la preferenza di sistema dell'utente tramite la media query prefers-reduced-motion e disattiva (o riduci) il movimento quando viene richiesto:

@media (prefers-reduced-motion: reduce) {
  div {
    animation: none;
  }
}

Abbreviazione

Raramente si imposta animation-delay da solo — di solito è il quarto valore nell'abbreviazione animation, che combina tutte le sotto-proprietà dell'animazione:

/* name | duration | timing-function | delay */
div {
  animation: delay 5s ease 3s infinite;
}

Proprietà correlate

Esercizi

Pratica
Qual è la definizione corretta della proprietà CSS animation-delay?
Qual è la definizione corretta della proprietà CSS animation-delay?
Was this page helpful?