Di che si tratta
Se fino a qualche anno fa per rendere un sito web più accattivante e dinamico era necessario ricorrere all'utilizzo di quell'abominio di Flash o quantomeno Javascript, con l'introduzione di CSS3 è stata inserita una nuova regola molto particolare chiamata "transition".
Sostanzialmente transition permette di animare gli elementi del nostro DOM tramite, per l'appunto, delle transizioni che influenzano, in determinate circostanze/eventi (come in caso di hover), alcune caratteristiche dell'elemento che stiamo stilizzando.
Utilizzo della regola
L'utilizzo di transition è molto semplice e la regola si struttura in questo modo
ma facciamo un semplice esempio pratico, mettiamo che abbiamo un semplice div e di volerlo rendere più "accattivante" tramite un'animazione all'hover:
All'atto pratico adesso, quando andrò a passare col cursore del mouse sul mio div, otterrò uno zoom graduale (transizione) del background da una dimensione di 100% a 110%, che si completerà in 2 secondi.
Alcune note finali
1) Ho omesso timing-function e delay, voglio solo specificare che il primo ha come valore di default ease (potete consultare gli altri valori che vi si possono assegnare qui:
2) E' possibile, al posto di background-size, inserire qualsiasi altra regola CSS che si voglia animare con una transizione, è possibile anche specificare "all" così da animare tutte le regole CSS che vengono modificate durante un hover o altro evento.
3) Ultimo, ma non per importanza, fate attenzione all'utilizzo che fate di transition, dato che comunque è ancora una "tecnologia sperimentale" e dunque non tutti i browser la supportano allo stesso modo, magari fate ricorso alle regole CSS specifiche per i browser (es. -webkit-transition o -moz-transition) nel caso riscontraste problemi di sorta e comunque fate sempre dei test approfonditi con più browser.
Se fino a qualche anno fa per rendere un sito web più accattivante e dinamico era necessario ricorrere all'utilizzo di quell'abominio di Flash o quantomeno Javascript, con l'introduzione di CSS3 è stata inserita una nuova regola molto particolare chiamata "transition".
Sostanzialmente transition permette di animare gli elementi del nostro DOM tramite, per l'appunto, delle transizioni che influenzano, in determinate circostanze/eventi (come in caso di hover), alcune caratteristiche dell'elemento che stiamo stilizzando.
Utilizzo della regola
L'utilizzo di transition è molto semplice e la regola si struttura in questo modo
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
ma facciamo un semplice esempio pratico, mettiamo che abbiamo un semplice div e di volerlo rendere più "accattivante" tramite un'animazione all'hover:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
All'atto pratico adesso, quando andrò a passare col cursore del mouse sul mio div, otterrò uno zoom graduale (transizione) del background da una dimensione di 100% a 110%, che si completerà in 2 secondi.
Alcune note finali
1) Ho omesso timing-function e delay, voglio solo specificare che il primo ha come valore di default ease (potete consultare gli altri valori che vi si possono assegnare qui:
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)2) E' possibile, al posto di background-size, inserire qualsiasi altra regola CSS che si voglia animare con una transizione, è possibile anche specificare "all" così da animare tutte le regole CSS che vengono modificate durante un hover o altro evento.
3) Ultimo, ma non per importanza, fate attenzione all'utilizzo che fate di transition, dato che comunque è ancora una "tecnologia sperimentale" e dunque non tutti i browser la supportano allo stesso modo, magari fate ricorso alle regole CSS specifiche per i browser (es. -webkit-transition o -moz-transition) nel caso riscontraste problemi di sorta e comunque fate sempre dei test approfonditi con più browser.
