HTML and CSS Reference
In-Depth Information
Le trasformazioni sono molto semplici da capire e da applicare, fatta eccezione per la tra-
sformazione di tipo matrix, che comporta calcoli matematici. Grazie a questa funzionalità,
possiamo rendere le nostre pagine ancora più gradevoli per l'utente finale senza dover fare
uno sforzo eccessivo.
Ora che le trasformazioni sono state trattate in maniera esaustiva, possiamo passare
all'ultimo argomento del capitolo: le
transizioni
.
Quando un elemento viene renderizzato, gli stili CSS vengono applicati all'elemento e que-
sto entra in un determinato stato. Mentre l'utente si trova sulla pagina, questo elemento può
cambiare stile CSS, diventando invisibile, più grande, più piccolo e molto altro ancora.
Quando lo stile CSS di un elemento cambia, c'è una transizione dallo stato attuale al
nuovo stato. Di default, questa transizione è immediata, ma possiamo impostarne la durata.
In questo modo la transizione dal vecchio al nuovo stile avviene in maniera più gradevole.
nota
Così come per le trasformazioni 2D, le specifiche per le transizioni non sono
complete.
Le
specifiche
possono
essere
consultate
sul
sito
all'indirizzo:
Supponiamo di avere un elemento
div
di cui vogliamo modificare lo stile quando ci pas-
siamo sopra con il mouse. Se volessimo modificare il colore di sfondo, il colore del testo e
allargare l'elemento, dovremmo usare il seguente codice CSS.
Esempio 5.22
div
{
width: 300px;
height: 80px;
border: solid 1px black;
background-color:white;
transition-property: background-color, width, color;
transition-duration: 2s;
