Scritto da
Venerdì, 04 Aprile 2014

Transition CSS, transizioni con il solo utilizzo del CSS

È ora di iniziare ad ottenere con semplicità qualche transizione semplice ma efficace. Le transition CSS fin ora potevano essere realizzate solo ed esclusivamente tramite l’utilizzo degli script, ora non è più l’unico modo, quindi anche in questo caso, ciò torna utile soprattutto per chi non parla il linguaggio JavaScript con dimestichezza.

Ecco un esempio:

Transition CSS

#esempio {background-color: #efefef;}
#esempio a:hover {background-color: #bbbbbb;}

Questo è un semplicissimo effetto di roll-over applicato al nostro solito div #esempio, ed in questo caso, quando puntiamo il mouse sul div, il suo cambio di colore sarà netto, ma il nostro obiettivo è quello di creare un passaggio graduale (quindi di transizione) tra i due colori:

/*colore di sfondo iniziale*/

#esempio {
background-color: #efefef;

 

/*proprietà di transizione con il prefisso adatto per poterla visualizzare su firefox*/

-moz-transition-property: background-color;
-moz-transition-duration: 3s;

/*proprietà di transizione con il prefisso adatto per poterla visualizzare su opera*/

-o-transition-property: background-color;
-o-transition-duration: 3s;

/*proprietà di transizione con il prefisso adatto per poterla visualizzare su Chrome e Safari*/

-webkit-transition-property: background-color;
-webkit-transition-duration: 3s;

/*proprietà di transizione senza alcun prefisso, da inserire dopo l’elenco delle proprietà con i prefissi*/

transition-property: background-color;
transition-duration: 3s;
}

#esempio a:hover {
background-color: #999999;
}

Ecco le nostre due regolette concluse, fase iniziale e fase finale dello stato del div #esempio.

La sintassi
transition-property permette di impostare il nome della proprietà si cui sarà applicato l’effetto di transizione ed in questo caso si tratta del colore di sfondo.
transition-duration: 3s; definisce l’intervallo di tempo entro il quale sarà completato il passaggio dal vecchio al nuovo valore.
La regola #esempio a:hover stabilisce che al passaggio del mouse, il colore di sfondo cambierà da grigio chiaro (#efefef) a grigio scuro (#999999). Il tutto il 3 secondi.

E questo è tutto (ma anche no :D ) Per qualsiasi delucidazione lasciate un commento!

Letto 1382 volte
Vota questo articolo
(1 )

Forse ti possono interessare anche questi articoli:

Lascia un commento

Assicurati di inserire (*) le informazioni necessarie ove indicato.
Codice HTML non è permesso.