CSS transition-delay
La proprietà CSS3 transition-delay imposta il ritardo di inizio di una transizione
La proprietà transition-delay in CSS3 permette di definire un ritardo (espresso in s o ms) prima che la transizione abbia inizio. È utile per controllare la sequenza temporale degli effetti, migliorando l'esperienza visiva dell'utente.
Sintassi
Significato dei valori principali:
-
time: Specifica il tempo di attesa prima dell'inizio della transizione. Può essere espresso in secondi (
s) o millisecondi (ms), ad esempio0s,0.5s,200ms, ecc.
Esempio proprietà: transition-delay
Codice Esempio: transition-delay
.transition-delay-example {
width: 300px;
height: 150px;
background-color: #c678dd;
color: white;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
transition: background-color 0.5s ease-in-out;
transition-delay: 1s;
}.transition-delay-example:hover {
background-color: #98c379;
}
Contenuto Esempio: transition-delay
Esempio di utilizzo di transition-delay
In questo esempio, la transizione del colore di sfondo inizia dopo un ritardo di 1 secondo quando il cursore passa sopra l'elemento:
CSS e HTML per l'elemento con transition-delay applicata:
<style>
.transition-delay-example {
width: 300px;
height: 150px;
background-color: #c678dd;
color: white;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
transition: background-color 0.5s ease-in-out;
transition-delay: 1s;
}
.transition-delay-example:hover {
background-color: #98c379;
}
</style>
<div class="transition-delay-example">
Passa il mouse qui
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
