Un'introduzione All'Animazione CSS per Principianti

Italian (Italiano) translation by Matteo Verolla (you can also view the original English article)

Al giorno d'oggi, sempre più siti web stanno usando le animazioni, sia che si tratti in formato GIF, SVG, WebGL, un video di sfondo e così via. Se usato correttamente, l'animazione sul web porta vita e interattività, l'aggiunta di un ulteriore livello di feedback e l'esperienza per gli utenti.

In questo tutorial vi introdurrò alle animazioni CSS; un modo altamente performante di fare le cose, che sta diventando sempre più popolare, come il miglioramento del supporto del browser. Dopo aver coperto le basi, andremo a costruire un rapido esempio, che animerà un elemento quadrato in un cerchio:

Un'introduzione a @keyframes e Animazione

La componente principale delle animazioni in CSS è il @keyframes , la regola del CSS con la quale viene creata l'animazione. Pensate ai @keyframes come tappe lungo una linea temporale. Dentro ai @keyframes , potete definire queste fasi, ognuna con una dichiarazione di stile differente.

Successivamente, per far si che le animazioni CSS funzionino, è necessario associare i @keyframes ad un selettore. Questo, gradualmente, analizzerà tutto il codice all'interno delle dichiarazioni dei @keyframes e cambierà lo stile iniziale con quello nuovo, basandosi sulle fasi.

I @keyframes

Qui imposteremo le fasi dell'animazione. Le nostre proprietà dei @keyframes sono:

Un nome a nostra scelta (tutsFade in questo caso).
Fasi: 0%-100%; da (uguale a 0%) a (uguale a 100%).
Stili CSS: lo stile che si desidera applicare per ogni fase.

Per esempio:

@keyframes tutsFade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

oppure:

@keyframes tutsFade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

O eventualmente:

@keyframes tutsFade {
  to {
    opacity: 0;
  }
}

Il codice sopra applicherà una transizione all'opacità di un elemento, da opacity: 1 a opacity: 0 . Ognuno degli approcci, mostrati sopra, raggiungeranno lo stesso risultato finale.

L'Animazione

La proprietà animation è usata per chiamare i @keyframes all'interno di un selettore CSS. Animation può avere molteplici proprietà:

animation-name: @keyframes nome (ricordatevi che noi abbiamo scelto tutsFade).
animation-duration: la durata dell'animazione, la durata totale dell'animazione dall'inizio alla fine.
animation-timing-function: imposta la velocità di animazione (linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier).
animation-delay: il ritardo prima che la nostra animazione cominci.
animation-iteration-count: quante volte scorrerà attraverso l'intera durata dell'animazione.
animation-direction: fornisce la possibilità di cambiare la direzione del loop, dall'inzio alla fine, oppure dalla fine all'inizio, oppure entrambi.
animation-fill-mode: specifica quale stile sarà applicato all'elemento quando la nostra animazione è finita (none | forwards | backwards | both)

Per esempio:

.element {
  animation-name: tutsFade;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

oppure:

1	.element {
2	animation: tutsFade 4s 1s infinite linear alternate;
3	}

Il codice sopra riportato creerà un effetto lampeggiante, con 1 secondo di ritardo, 4 secondi di durata totale dell'animazione, con direzioni alternate e con infinite iterazioni lineari.

Aggiungiamo i Vendor Prefixes

Dobbiamo utilizzare i prefissi del browser specifici per garantire il miglior supporto dal browser possibile. Si applicano i prefissi standard:

Chrome & Safari: -webkit-
Firefox: -moz-
Opera: -o-
Internet Explorer: -ms-

Una proprietà di animation con i prefissi vendor sarà simile a:

.element {
    -webkit-animation: tutsFade 4s 1s infinite linear alternate;
    -moz-animation: tutsFade 4s 1s infinite linear alternate;
    -ms-animation: tutsFade 4s 1s infinite linear alternate;
    -o-animation: tutsFade 4s 1s infinite linear alternate;
    animation: tutsFade 4s 1s infinite linear alternate;
}

insieme a @keyframes:

@-webkit-keyframes tutsFade { /* your style */ }
@-moz-keyframes tutsFade { /* your style */ }
@-ms-keyframes tutsFade { /* your style */ }
@-o-keyframes tutsFade { /* your style */ }
@keyframes tutsFade { /* your style */ }

Per motivi di leggibilità, durante questo tutorial, continuerò ulteriormente senza l'utilizzo di prefissi, ma la versione finale li comprendono e vorrei incoraggiarvi a utilizzarli nel vostro codice CSS.

Per scoprire altro riguardo ai prefissi vendor, potete dare un'occhiata a http://css3please.com/, che è un buon sito per quanto riguarda le risorse dei prefissi vendor.

Molteplici Animazioni

Potete aggiungere più animazioni utilizzando la virgola come separatore. Diciamo che vogliamo aggiungere un'ulteriore rotazione al nostro elemento tutsFade, lo faremo dichiarando ulteriori @keyframes e dopo legarli assieme al nostro elemento:

.element {
  animation: tutsFade 4s 1s infinite linear alternate,
             tutsRotate 4s 1s infinite linear alternate;
}
@keyframes tutsFade {
  to {
    opacity: 0;
  }
}
@keyframes tutsRotate {
  to {
    transform: rotate(180deg);
  }
}

Tutorial: Da Quadrato a Cerchio

Partiamo subito e creiamo una semplice transizione di forma; un'animazione da quadrato a cerchio usando i principi elencati precedentemente. Avremo in totale 5 fasi e per ognuna di esse definiremo il raggio del bordo, una rotazione e un colore di sfondo differente al nostro elemento. Basta parlare e cominciamo a scrivere un po' di codice.

Elementi Basilari

Per prima cosa, creiamo il markup, l'elemento da animare. Non andiamo nemmeno a perdere tempo con i nomi delle classi, useremo un semplice div per il momento:

1	<div></div>

Quindi, utilizziamo un elemento selettore (div {}) e aggiungiamogli uno stile di default:

div {
  width: 200px;
  height: 200px;
  background-color: coral; 
}

Dichiarare i Keyframes

Ora prepariamo @keyframes, che chiameremo square-to-circle, e le cinque fasi

1	@keyframes square-to-circle {
2	0%{}
3	25%{}
4	50%{}
5	75%{}
6	100%{}
7	}

Dobbiamo definire lo stile all'interno di ogni fase, quindi cominciamo dichiarando il border-radius per ogni angolo del quadrato:

@-webkit-keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
  }
  25%  {
    border-radius:50% 0 0 0;
  }
  50%  {
    border-radius:50% 50% 0 0;
  }
  75%  {
    border-radius:50% 50% 50% 0;
  }
  100% {
    border-radius:50%;
  }
}

Inoltre possiamo dichiarare un background-color diverso per ogni fase.

@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral; 
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon; 
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
  }
  75%  { 
    border-radius:50% 50% 50% 0;
    background:lightcoral;
  }
  100% {  
    border-radius:50%;
    background:darksalmon;
  }
}

Per far si che la nostra animazione colpisca davvero, oltre al border-radius e al background-color ruotiamo il div, così facendo aggiungeremo un po' di interesse visivo.

@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral;
    transform:rotate(0deg);
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
    transform:rotate(45deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
    transform:rotate(90deg);
  }
  75%  { 
    border-radius:50% 50% 50% 0;
    background:lightcoral;
    transform:rotate(135deg);
  }
  100% {  
    border-radius:50%;
    background:darksalmon;
    transform:rotate(180deg);
  }
}

Applicare l'Animazione

Avendo definito la nostra animazione "square-to-circle", dobbiamo applicarlo al div:

div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s 1s infinite alternate;  
}

Qui si può notare che abbiamo aggiunto una proprietà di animation che si può riassumere:

Il nome dell'animazione è square-to-circle.
La durata dell'animazione è di 2s.
Il ritardo dell'animazione è 1s.
Il contatore dell'iterazione dell'animazione è infinite, quindi andrà avanti indefinitamente.
E la direzione dell'animazione è alternate, quindi comincerà dall'inizio alla fine, dopo dalla fine all'inizio, di nuovo alla fine e così via.

L'utilizzo Spettacolare della Funzione Tempo

Un ultimo valore che possiamo aggiungere alla proprietà della animazione è animation-timing-function. Questo determinerà la velocità, l'accelerazione e la decelerazione del nostro movimento. Questa funzione può essere un valore molto dettagliato, il che è strano calcolarlo manualmente, ma ci sono una montagna di siti gratis che forniscono risorse e modifiche live per le funzioni delle animazioni temporali.

Uno di questi strumenti è il CSS Easing Animation Tool, quindi usiamo quello per calcolare la nostra funzione temporale.

Vorrei aggiungere un effetto elastic alla nostra animazione square-to-circle, utilizzando una funzione cubic-bezier.

Dopo averci giocato un po' ed aver generato una specie di curva bezier, aggiornate il valore della funzione di animazione temporale usando il frammento di codice fornito.

div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate;  
}

Il codice finale, senza aver utilizzato i prefissi vendor ( -webkit- , -moz-, -ms-, -o- ) si presenterà in questo modo:

div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s .5s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}

@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral;
    transform:rotate(0deg);
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
    transform:rotate(45deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
    transform:rotate(90deg);
  }
  75%  { 
    border-radius:50% 50% 50% 0;
    background:lightcoral;
    transform:rotate(135deg);
  }
  100% {  
    border-radius:50%;
    background:darksalmon;
    transform:rotate(180deg);
  }
}

Un'Ultima Cosa

Tutto funziona correttamente nei browser moderni, ma Firefox ha un brutto vizio di renderizzare gli oggetti trasformati male. Date un'occhiata a queste linee frastagliate per capire cosa intendo:

Fortunatamente, c'è una soluzione a questo problema. Aggiungete il seguente contorno trasparente al vostro div e Firefox lo renderizzerà perfettamente!

1	outline: 1px solid transparent;

Conclusione

E' tutto! Abbiamo utilizzato la sintassi dell'animazione CSS per creare una semplice animazione a ripetizione.

Supporto dei Browser

Per maggiori informazioni per quanto riguarda il supporto dei browsers per le animazioni CSS, date un'occhiata a Can I use.. ma in poche parole, supportate i browser includendo: Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+