Proprietà CSS transition-delay - Utilizzo, Sintassi, Esempi

La proprietà CSS transition-delay definisce quanto tempo attendere prima che un effetto di transizione inizi, una volta che la modifica che lo attiva è avvenuta. È una delle quattro proprietà longhand che compongono la proprietà shorthand transition, insieme a transition-property, transition-duration e transition-timing-function.

Questa pagina illustra i valori della proprietà, il comportamento dei ritardi positivi e negativi, come impostare un ritardo separato per ogni proprietà animata e i casi d'uso più comuni nelle interfacce reali. È una delle proprietà CSS3.

Come funziona il ritardo

Il valore predefinito è 0s, il che significa che l'effetto di transizione parte immediatamente quando il valore della proprietà cambia (ad esempio, su :hover).

Un ritardo positivo posticipa l'inizio. Con transition-delay: 2s, nulla di visibile accade per due secondi; solo allora la proprietà inizia ad animarsi dal vecchio valore al nuovo, per la durata definita da transition-duration.

Un ritardo negativo è consentito e si comporta in modo diverso: la transizione parte immediatamente, ma inizia a metà della sua timeline, come se fosse già in esecuzione da quel tempo. Quindi transition-duration: 4s con transition-delay: -2s salta direttamente al punto intermedio e termina nei due secondi rimanenti.

Il ritardo non si ripete — a differenza di un'iterazione di animazione, una transizione viene eseguita una sola volta per ogni modifica, quindi il ritardo si applica soltanto all'esecuzione singola che la modifica innesca.

Informazione

I browser moderni supportano questa proprietà nativamente senza prefissi vendor.

Valore iniziale	0s
Si applica a	Tutti gli elementi, gli pseudo-elementi ::before e ::after.
Ereditato	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.transitionDelay = "3s";

Sintassi

transition-delay: time | initial | inherit;

Esempio base

Questo riquadro si allarga quando ci si passa sopra con il mouse. Il ritardo è 0s, quindi la crescita inizia immediatamente — cambialo a 1s nell'editor per percepire la differenza.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width;
        transition-duration: 1s;
        transition-delay: 0s;
      }
      div:hover {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Provalo tu stesso »

Esempio con 2 secondi di ritardo

Qui il riquadro aspetta due interi secondi dopo il passaggio del mouse prima di iniziare ad allargarsi. Si noti che transition-property elenca più proprietà come lista separata da virgole (width, height).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width, height;
        transition-duration: 3s;
        transition-delay: 2s;
      }
      div:hover {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay property example</h2>
    <p>Hover over the element and wait 2 seconds to see the effect.</p>
    <div></div>
  </body>
</html>

Provalo tu stesso »

Un ritardo diverso per ogni proprietà

Quando si animano più proprietà, è possibile assegnare a ciascuna il proprio ritardo elencando i valori nello stesso ordine in cui compaiono in transition-property. L'elenco dei ritardi viene abbinato all'elenco delle proprietà: qui width parte subito, mentre background-color aspetta un secondo.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width, background-color;
        transition-duration: 1s, 1s;
        transition-delay: 0s, 1s;
      }
      div:hover {
        width: 300px;
        background-color: #1c8470;
      }
    </style>
  </head>
  <body>
    <h2>Staggered transition-delay</h2>
    <p>Hover: the width grows first, then the color changes a second later.</p>
    <div></div>
  </body>
</html>

Casi d'uso comuni

Animazioni scaglionate, in modo che più elementi (o più proprietà di un elemento) si muovano uno dopo l'altro anziché tutti insieme, per un effetto più curato.
Menu con hover intenzionale. Un piccolo ritardo nel collasso di un menu a discesa (spesso abbinato a un ritardo su visibility) mantiene il menu aperto brevemente, evitando che un movimento del mouse leggermente fuori bersaglio lo chiuda.
Ritardi negativi per avviare un effetto già "in corso", utili quando si vuole che un elemento arrivi immediatamente a un punto specifico della sua transizione.

Valori

Valore	Descrizione
time	Specifica quanti secondi o millisecondi un effetto di transizione deve attendere prima di iniziare. Il valore predefinito è 0s.
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento padre.

Esercitazione

Pratica

Quale affermazione è corretta sulla proprietà transition-delay?

Specifica quando l'effetto di transizione deve terminare.Il valore predefinito è 0s, il che significa che l'effetto di transizione non si avvierà.Un valore negativo avvierà l'effetto di transizione immediatamente.