Transizioni CSS3

Nel modello CSS, gli elementi di una pagina possono avere degli stati. Esempi di stati sono :hover e :focus. Se si specificano degli stili per lo stato A e poi li si modificano nello stato B, si ha una transizione dagli stili dello stato A a quelli dello stato B. Il cambiamento degli stili può essere regolato nel tipo di effetto e nella durata. Quindi se si specifica una durata di 1 secondo per il cambiamento del colore di sfondo su :hover, il colore cambierà gradatamente con un effetto progressivo. Nei CSS 2.1, invece, il cambiamento era istantaneo. Vediamo insieme un esempio concreto.

Si supponga di avere il seguente menu:

<ul id="navigation">
	<li><a href="#">Home</a></li>
	<li><a href="#">Articoli</a></li>
	<li><a href="#">About</a></li>
</ul>

Con i seguenti stili di base:

body {
	margin: 0;
	padding: 0;
	font: 100% Arial, sans-serif;
}

#navigation {
	height: 3em;
	margin: 0;
	padding: 0 1em;
	list-style: none;
	background: #000;
	border-top: 0.6em solid #d34545;
}

#navigation > li {
	float: left;
	height: 100%;
	margin-right: 1em;
	font-family: 'Arial Black', Arial, sans-serif;
	position: relative;
}

Vogliamo effettuare una transizione sui link del menu, passando dallo stato normale a :hover. Per usare le transizioni CSS3 è necessario specificarle sullo stato di partenza (normale):

#navigation > li > a {
	float: left;
	height: 100%;
	line-height: 3;
	padding: 0 1em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
	color: #ddd;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	width: 7em;
	text-align: center;
}

Come si può notare, vengono prima usate le proprietà con i prefissi dei vari browser e da ultimo la proprietà standard transition. A questo punto la transizione è stata registrata dal browser sui link. Il browser quindi aspetta il cambiamento dei valori nelle proprietà quando si cambia stato, per esempio usando :hover:

#navigation > li > a:hover {
	background: #d34545;
	width: 8em;
	color: #fff;
}

Avendo specificato le proprietà background, width e color, il browser applicherà la transizione specificata in precedenza su queste tre proprietà. Per approfondire la conoscenza delle transizioni e degli effetti CSS3 in generale vi rimando alla lettura di questo articolo.

Potete visionare l'esempio finale in questa pagina.