Proprietà transition
La proprietà transition è un'abbreviazione per
le transizioni fluide, permette di impostare contemporaneamente
transition-duration,
transition-property,
transition-timing-function
e transition-delay.
Sintassi
selettore {
transition: valore;
}
L'ordine delle proprietà non ha importanza, tuttavia
il tempo di esecuzione (transition-duration)
deve essere posizionato prima del ritardo (transition-delay).
Valori
Vedi le proprietà corrispondenti. Valore
predefinito: all 0s ease 0s.
Il valore none annulla tutte le transizioni
(avverranno istantaneamente).
Esempio
Passa il mouse sul blocco - per 3 secondi
non succederà nulla (c'è un ritardo di
3s), e poi cambierà gradualmente la sua larghezza
in 2 secondi. Se poi togli il mouse
- di nuovo per 3 secondi non succederà
nulla, e poi la larghezza diminuirà gradualmente
al valore originale:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition: width 2s ease 3s;
width: 100px;
height: 50px;
}
#elem:hover {
width: 400px;
}
:
Vedi anche
-
la proprietà
animation,
con cui puoi creare un'animazione
