Le animazioni con i CSS3

Pubblicato il 10 Agosto 2015 | autore Massimiliano Carnevale

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
}
<div id="blk1Animazione"></div>
<div id="blk2Animazione"></div>
 
 

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:

<div class="container">
	<div id="pneumatico">+</div>
</div>

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.

Esegui il login con un social network
oppure Inserisci i tuoi dati
0 commenti pubblicati

Articoli correlati

Immagine: Definire un calendario editoriale per il blog aziendale

Definire un calendario editoriale per il blog aziendale

Uno degli elementi che non possono mancare in un blog aziendale è il calendario delle pubblicazioni: leggi perché devi crearne uno, se vuoi ottenere risultati nel tuo blog.

Immagine: Sintassi e prime basi SASS: seconda parte

Sintassi e prime basi SASS: seconda parte

Primi esempi pratici di codice per SASS, il pre-processore di CSS - seconda parte

Immagine: Sintassi e prime basi SASS: parte prima

Sintassi e prime basi SASS: parte prima

Primi esempi pratici di codice per SASS, il pre-processore di CSS - parte prima

Immagine: Introduzione a SASS e LESS: come utilizzare al meglio i CSS

Introduzione a SASS e LESS: come utilizzare al meglio i C...

Variabili, operazioni, calcoli con i CSS? Se hai queste (e altre esigenze), hai la soluzione a portata di click!

Tutti gli articoli

Parlaci del tuo prossimo progetto

Ci piacerebbe parlare con te dei tuoi nuovi progetti
e aiutarti a realizzarli con successo

Contattaci senza impegno!

Promozione online

contattaci per un preventivo web marketing
Promozione sito web

Passa in una delle nostre sedi, ti offriremo un caffé e una soluzione adatta a te. Senza nessun impegno

© Copyright 2017 Ueppy Srl - Via Farnese 16, Pico | P.Iva 02682300609
Numero REA FR - 170067 - C.s. € 10.000,00 | Pec:

Privacy Policy