Ritardo di transizione - Trucchi CSS

La transition-delayproprietà, normalmente utilizzata come parte della transitionstenografia, viene utilizzata per definire un periodo di tempo per ritardare l'inizio di una transizione.

.delay-me ( transition-delay: 0.25s; )

Il valore può essere uno dei seguenti:

Un valore di tempo valido definito in secondi o millisecondi, ad esempio 1.3so125ms
Un elenco separato da virgole di valori temporali, per definire valori di ritardo separati su più transizioni per un singolo elemento, ad es 1s background-color, 350ms transform

Il valore predefinito per transition-delayè 0s, il che significa che non si verificherà alcun ritardo e la transizione inizierà immediatamente. Il valore temporale può essere espresso come numero in base decimale per una temporizzazione più precisa.

Quando una transizione ha un valore di ritardo negativo, la transizione inizierà immediatamente (senza ritardo), tuttavia, la transizione inizierà a metà del processo, come se fosse già iniziata.

La penna seguente mostra un effetto al passaggio del mouse su una casella che utilizza un transition-delayvalore di 2scon una durata della transizione di 1s:

Guarda la
demo di Pen Transition delay di CSS-Tricks (@ css-tricks)
su CodePen.

Ora confrontalo con la seguente demo, che ha un ritardo -1se una durata di 3s:

Guarda la
demo del ritardo della transizione negativa della penna di CSS-Tricks (@ css-tricks)
su CodePen.

Si noti che nel secondo esempio sono visibili solo gli ultimi due terzi della transizione effettiva e non vi è alcun ritardo. Il valore negativo rimuove il ritardo e riduce efficacemente la durata.

Per la compatibilità con tutti i browser supportati, sono richiesti i prefissi del fornitore, con la sintassi standard dichiarata per ultima:

.example ( -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )

IE10 (la prima versione stabile di IE da supportare transition-delay) non richiede il -ms-prefisso.

Un caso d'uso comune è lo stagging delle transizioni:

Guarda le
animazioni a penna sfalsata di Chris Coyier (@chriscoyier)
su CodePen.

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.