HTML and CSS Reference
In-Depth Information
Poiché la proprietà da animare è
transform
, quando all'elemento
div
viene applicato
lo stile
animate
che imposta la proprietà
transform
, si scatena la transizione. La tra-
sformazione e la transizione sono visibili nella
figura 5.18
,
che mostra i vari stati della tran-
sizione.
Figura 5.18
- L'elemento numero 1 è nello stato iniziale e l'elemento numero 4 è nello
stato finale. Gli elementi con numero 2 e 3 rappresentano l'elemento durante la transizio-
ne.
L'esempio che abbiamo fatto in questa sezione è banale, ma rende l'idea di quello che pos-
siamo fare combinando trasformazioni e transizioni. Inoltre, se combiniamo transizioni e
trasformazioni su più elementi contemporaneamente, possiamo creare animazioni gradevo-
li e molto complesse, che prima dell'introduzione di questa funzionalità erano semplice-
mente impossibili da riprodurre se non usando pesantemente librerie JavaScript (e quindi
complicando lo sviluppo) e perdendo comunque in termini di prestazioni (il browser pas-
sava più tempo a elaborare la grafica che a elaborare l'input dell'utente).
In questo capitolo abbiamo analizzato molte funzionalità dei CSS che sono fondamentali
se vogliamo realizzare un'interfaccia grafica moderna e gradevole per l'utente.
All'inizio del capitolo abbiamo analizzato il box model, illustrando come il browser
calcola le dimensioni di un elemento, e includendo in queste anche il margine esterno, il
bordo e il margine interno di un elemento. Inoltre abbiamo discusso come influenzare que-
sto calcolo attraverso il box sizing.
Ci siamo poi occupati di come gestire un'importante risorsa come il cursore, analizzan-
do come modificarne la visualizzazione a seconda dello stato della pagina.
Successivamente abbiamo visto come utilizzare un CSS diverso a seconda delle caratte-
ristiche del device che visualizza la pagina, utilizzando le media query. Queste ci permetto-
