Eravamo abituati a vedere effetti di transizione solo con l’utilizzo di flash o javascript, grazie al CSS3 si può implementare alcune transizioni per arricchire alcuni eventi nel nostro designe.
Le transizioni vengono definite dal W3C nel seguente modo:
“Le transizioni CSS permettono le modifiche alle proprietà CSS nei valori che si verificano uniformemente nel corso di un periodo di tempo specificato.”
Iniziamo subito con un semplice esempio
Quando andremo col il mouse sul link, il colore di sfondo cambierà e noi useremo una transizione.
<a href="#" class="tween">Transizione</a>
Successivamente, si aggiungerà una dichiarazione per lo stato del collegamento normale con un lieve padding e uno sfondo verde chiaro, seguito dello sfondo per un verde più scuro al passaggio del mouse:
a.tween {
padding: 5px 10px;
background: #9c3;
}
a.tween:hover {
background: #690;
}
Ora aggiungiamo una transizione che cambia il colore
a.tween {
padding: 5px 10px;
background: #9c3;
-webkit-transition-property: background;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
a.tween:hover {
background: #690;
}
Di seguito andiamo ad analizzare le parti utilizzate:
- transition-property: la proprietà alla quale la transizione deve venire applicata (in questo caso, la proprietà background)
- transition-duration: Quanto tempo dovrebbe durare la transizione (in questo caso 0,3secondi)
- transition-timing-function: Quanto velocemente ila transizione deve avvenire nel tempo indicato (ease)
Per maggiori informazioni vi rimando al seguente link
www.w3.org/TR/css3-transitions/
Autore
Sviluppatore web, aree riservete e gestionali.
Svolgo con passione e determinazione il proprio lavoro dedicando tempo alla ricerca e all'approfondimento di novità.
Sito web dell'autore