Effetti di Transizione con CSS3
28 settembre 2010 
Tra le tante innovazioni che porta con se CSS3 vediamo quello dell’effetto di transizione.
Fino a poco tempo fa, per creare effetti di transizione cioè cambiare determinati parametri come altezza, larghezza e colore in maniera dinamica dovevamo usare o effetti in javascript ( i più famosi in jquery ) oppure utilizzare tecnologie che utilizzavano determinati plugin ( esempio più palese Flash ).
Ora nel nuovo linguaggio di formattazione, è stato aggiunto il modulo CSS Transition, capace di simulare tali effetti di transizione con poche righe di css.
Cambio sfondo
Vediamo come cambiare colore a un <p> , passandoci con il mouse sopra ( qua l’esempio ):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <html> <head> <title>Cambio colore di Sfondo</title> <style> /* nel suo stato normale */ p { width: 600px; height: 150px; background-color: #ff9f00; /* questa è la sintassi per il normale browser */ transition-property: background-color; transition-duration: 2s; /* questa è la sintassi per firefox */ -moz-transition-property: background-color; -moz-transition-duration: 2s; /* questa è la sintassi per opera */ -o-transition-property: background-color; -o-transition-duration: 2s; /* questa è l sintassi per safari */ -webkit-transition-property: background-color; -webkit-transition-duration: 2s; } /* quando il mouse va sopra p */ p:hover { background-color: #00ff06; } </style> </head> <body> <p></p> </body> </html> |
Come abbiamo visto per creare tale effetto abbiamo dovuto usare 2 particolari comandi :
transition-property: background-color
Che serve per indicare al browser il tipo di transizione da fare , in questo caso lo sfondo;
transition-duration: 2s
Che serve a indicare al browser il numero di secondi che devono passare da un stato a un altro.
Cambio larghezza e altezza
Ora passiamo all’effetto di transizione legato al cambio dei parametri larghezza e altezza.
La sintassi è la seguente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <html> <head> <title>Cambio Larghezza con CSS3</title> <style> /* nel suo stato normale */ p { width: 600px; height: 150px; background-color: #ff9f00; /* questa è la sintassi per il normale browser */ transition-property: width; transition-duration: 2s; /* questa è la sintassi per firefox */ -moz-transition-property: width; -moz-transition-duration: 2s; /* questa è la sintassi per opera */ -o-transition-property: width; -o-transition-duration: 2s; /* questa è l sintassi per safari */ -webkit-transition-property: width; -webkit-transition-duration: 2s; } /* quando il mouse va sopra p */ p:hover { width: 300px; } </style> </head> <body> <p></p> </body> </html> |
Qua l’esempio.
Unico comando che cambia è il valore del comando transition-propety da backgroud-color a width.
Ovviamente se volessimo cambiare l’altezza dovremmo sostituire width con height.
Potresti trovare interessante anche
. Grazie pure per i complimenti sono contento che il blog ti aiuti 
La sintassi usata per Safari è la stessa che viene usata per Google Chrome. Volevo solo precisarlo.
Comunque bel blog e bei post, mi sono stati di grande aiuto