blog

Torna anche oggi, come ogni mese, la rubrica dedicata alle nuove Proprietà CSS3.

La proprietà CSS3 di oggi è: Transition, forse uno dei più apprezzati strumenti della nuova versione dei CSS. A differenza delle altre proprietà che vengono quasi tutte usate per sostituire le immagini, la proprietà CSS3 transitions viene usata in sostituzione di animazioni in flash o javascript. La parola stessa lascia intendere una transizione da una condizione a un’altra, ma anche un movimento di oggetti da un posto a un’altro.

Vediamo subito come si presenta, posiziona il mouse su box qui sotto per vedere l’animazione:

Effetto animato con CSS3 Transition

La sintassi:

#movimento {
	display: inline-block;
	border: 1px solid #000;
	padding: 10px;
	background: #91C8FF;
	height: 20px;
	opacity: 0.3;
	-moz-transition: all 1s ease-out;
	-webkit-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
 
#movimento:hover {
	margin-left: 40px;
	opacity: 1;
}

Analizzando questo esempio possiamo notare 2 cose: la prima è la transazione del colore di sfondo da un’opacità del 30% a un’opacità al 100%, la seconda è il movimento del box di 40px verso destra.
Queste due transazioni sono state possibili grazie alla proprietà transition alla quale ho attribuito i seguenti valori: “all 1s ease-out;”

• Il primo valore indica le caratteristiche da modificare, nel nostro esempio specificando all la transazione terrà in considerazione tutte le caratteristiche nella transazione.
• Il secondo valore è il tempo di transazione, nell’esempio precedente 1s indica che la transazione durerà un secondo
• Il terzo valore è la funzione di timing ovvero la velocità della transazione durante la sua durata, nel nostro esempio abbiamo scelto ease-out che indica una partenza veloce e un’arrivo lento, gli altri valori sono:
  ease: partenza e arrivo lenti, velocità maggiore a metà dell’animazione;
  ease-in: partenza lenta e arrivo veloce (effetto opposto a ease-out);
  ease-in-out: molto simile all’effetto “ease”;
  linear: nessuna variazione di velocità;

Il w3c ha rilasciato la lista delle proprietà css interessate alle animazioni con transition.