Le animazioni con i CSS3

Pubblicato il 10/08/2015

Da poco sono disponibili per le maggiori piattaforme (IE 10+, webkit 4+, mozilla 5+) effetti di animazione attraverso i CSS

 

Woow! E come si usano?

Fondamentalmente sono due le regole da utilizzare:

• @keyframes
• animation

@keyframes

Tale regola serve a inizializzare l'animazione vera e propria, che sarà richiamata da animation.
Il funzionamento è semplice: si stabiliscono degli stati di partenza e arrivo dell'animazione, e volendo, i passaggi intermedi.
Se ad esempio si vuole che un elemento passi da sfondo rosso a sfondo blu basta fare:

@keyframes prova {
	from {background:red;}
	to {background:blue;}
}

Come avrete notato abbiamo assegnato un nome all'animazione. Ci sarà utile per richiarmarla con la regola animation.
È possibile usare anche più stati intermedi: poniamo il caso di volere che lo sfondo cambi con la seguente sequenza: rosso -> arancio -> giallo -> bianco -> blu, il codice sarà

@keyframes prova2 {
	0% {background:red;}
	25% {background:orange;}
	50% {background:yellow;}
	75% {background:white;}
	100% {background:blue;}
}

 

Animation

Tale regola applica il set di animazioni definito da @keyframes.
In effetti animation è una short rule, risultante dalle 6 regole derivate:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

animation-name

Questa è la regola più importante: serve a richiamare il set di regole definito da @keyframes. Nel caso di sopra, ad esempio, basta fare:

.blocco {animation-nome:prova;}

animation-duration

Animation duration serve a definire il tempo di esecuzione delle regola. Tempo che può esser espresso in secondi (s) o millisecondi (ms). Esempio:

.blocco {animation-duration:4s;}

animation-timing-function

Tale regola permette di variare la curva di velocità dell'animazione. Ad esempio permette di avere un'animazione lenta all'inizio ma più veloce alla fine, oppure il contrario o qualunque altra forma si voglia. I possibili valori sono:

• ease: indica un'animazione che parte piano, accelera e poi rallenta di nuovo. È il valore di default
• linear: animazione con velocità costante
• ease-in: animazione con partenza lenta
• ease-out: animazione con arrivo lento
• ease-in-out: animazione con partenza e arrivo lenti
• cubic-bezier(x,x,x,x): per creare animazioni personalizzate. È forse la più intrigante e merita un articolo ad hoc. Appena ho tempo ne riparliamo!

.blocco {animation-timing-function:ease-in;}

animation-delay

Permette di assegnare un ritardo alla partenza dell'animazione. Esempio:

.blocco {animation-delay:0.5s;}

animation-iteration-count

Indica quante volte debba durare l'animazione. Esempi:

.blocco {animation-iteration-count:2;}
	.blocco {animation-iteration-count:infinite;}

animation-direction

Serve a far partire l'animazione normalmente, in direzione opposta o in modo alternato. I possibili valori sono:

• linear: valore di default
• reverse: l'animazione parte *al contrario*
• alternate: l'animazione si comporta normalmente nei cicli dispari, e inversa in quelli pari
• alternate-reverse: l'animazione si comporta normalmente nei cicli pari, e inversa in quelli dispari

Esempio:

.blocco {animation-direction:reverse;}

Ok, vediamo un semplice esempio pratico. Partendo dalle @keyframes inserite prima, le applicheremo a due blocchi nel seguente modo

#blk1Animazione {
	animation-name:prova; //richiamo la @keyframes prova
	animation-duration:4s; //setto la durata a 4 secondi
}
#blk2Animazione {
	animation-name:prova2;  //richiamo la @keyframes prova2
	animation-duration:10s; //setto la durata a 10 secondi
	animation-delay:2s; //setto il ritardo nella partenza di 2 secondi
	animation-timing-function:ease-in-out; //setto l'effetto: partenza e arrivo lenti
	animation-iteration-count:reverse; //la faccio partire al contrario
	animation-iteration-count:infinite; //e la faccio durare per sempre
}

Esempio

Ok, lo so che finora abbiamo visto solo due brutte animazioni. Ma ciò che si può fare con le animazioni CSS è notevole. A breve vi mostrerò uno dei tanti esempi. Per stuzzicare un po' la vostra fantasia vedremo adesso come creare uno pneumatico che ruota. Solo con i CSS3, senza immagini né javascript!
Iniziamo con il codice html, molto semplice:

a cui applichiamo il css seguente:

.container {
	position:relative;
	padding:100px;
	width:200px;
	height:120px;
}
	#pneumatico {
		width:100px;
		height:100px;
		position:absolute;
		top:100px;
		left:0;
		text-align:center;
		line-height:100px;
		color:#333;
		background:#eee; 
		border:50px solid #999; 
		border-radius:100px;
	}

che spero si capisca semplicemente.

Ok, finora, e come lo animiamo? Beh, lo facciamo girare e lo spostiamo da sinistra a destra.

@keyframes ruota {
   from {transform:rotate(0deg); left:0;}
   to {transform:rotate(360deg); left:100%;}
}

e lo applichiamo al blocco con le regole appena imparate

#pneumatico {
	animation-duration:5s;
	animation-timing-function:ease-in-out;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-name:ruota;
}

e otterremo il risultato cercato:

 

Conclusioni

Abbiamo imparato le basi delle animazioni con i CSS. Ora verrà il punto complicato: capire come utilizzarle e soprattutto cosa mostrare a chi non ha browser moderni. Ricordate sempre di fornire risultati alternativi e che non tutti vogliono (o possono) aggiornare il browser.

[modificato]

Abbiamo pubblicato un howTo su come riprodurre l'ottavina reale con i css, uno dei colpi più famosi del biliardo al cinema.