Animazioni con CSS3

Oltre che attraverso le transizioni, che abbiamo visto nella precedente lezione, per creare effetti animati, CSS3 dispone anche della proprietà animation. Attraverso questa proprietà è possibile vere e proprie animazioni attraverso cambiamenti graduali nello stile degli elementi. Non ci sono limiti al numero delle proprietà su cui è possibile intervenire ed il numero volte che è possibile farlo.

Per poter usare questa proprietà bisogna definire una regola @keyframes che descrive l’animazione e le assegna un nome. Una volta fatto ciò, bisogna passare il nome così definito alla proprietà animation.

Una prima, semplicissima animazione

Con un esempio, tutto diventerà più chiaro.

/* Definisco l'animazione */
@keyframes esempio {
  from { background-color: #0033CC; }
  to { background-color: #FF6600; }
}

div {
  width: 100px;
  height: 100px;
  background-color: #0033CC;
  /* applico l'animazione all'elemento */
  animation-name: esempio;
  animation-duration: 4s;
}

Come potete vedere l’effetto che abbiamo creato è piuttosto semplice: il nostro div cambia il suo colore di sfondo da blu ad arancio in modo graduale, nell’arco di 4 secondi. L’animazione si avvia immediatamente, non appena il browser ha terminato di scaricare il documento HTML ed i file ad esso collegati.

Da un punto di vista sintattico, si noti che:

• l’animazione è definita all’interno della regola @keyframes al cui interno sono indicati gli stili corrispondenti ai due fotogrammi della nostra animazione, l’inizio (from { … }) e la fine (to { … }).
• l’animazione viene associata all’elemento mediante la proprietà animation-name;
• la durata dell’animazione è definita, sempre all’interno dello stile dell’elemento, con la proprietà animation-duration (nel nostro esempio 4 secondi); se questa proprietà viene omessa l’animazione non avrà alcun effetto (il suo valore di default è 0).

Creiamo animazioni più complesse

Quello che abbiamo visto è un esempio molto semplice che prevede la modifica di una sola proprietà (background-color), ma nulla vieta di intervenire su molteplici aspetti dello stile. Riprendendo l’esempio precedente, proviamo ad intervenire anche sulle dimensioni dell’elemento, modificando le nostre regole di stile in questo modo:

@keyframes esempio {
  from { 
    background-color: #0033CC;
    width: 100px;
    height: 100px;
  }
  to {
    background-color: #FF6600;
    width: 500px;
    height: 500px;
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: #0033CC;
  animation-name: esempio;
  animation-duration: 4s;
}

Come potete notare, eseguendo il codice, il nostro div non solo cambia il suo colore di sfondo, ma diventa anche più grande… stiamo iniziando a creare una vera e propria animazione! Ma, ovviamente, siamo solo all’inizio.

Animazioni complesse con le percentuali d’avanzamento

Fino ad ora, infatti, la nostra animazione era composta da due fotogrammi… in realtà, tuttavia, possiamo creare diversi keyframe e colocarli sulla linea temporale della nostra animazione mediante una progressione espressa in scala percentuale.

Al posto di utilizzare le keyword from e to, quindi, possiamo usare dei valori percentuali in questo modo:

@keyframes esempio {
  0% { ... }
  20% { ... }
  40% { ... }
  60% { ... }
  80% { ... }
  100% { ... }
}

Vediamo, per tornare al nostro esempio, come avremmo potuto arricchire la nostra precedente animazione facendo ricorso ad una linea temporale più articolata:

@keyframes esempio {
  0% { 
    background-color: #0033CC;
    width: 100px;
    height: 100px;
  }
  33% {
    background-color: #FF3300;
    width: 500px;
    height: 500px;
  }
  66% {
    background-color: #FFFF00;
    width: 200px;
    height: 200px;
  }
  100% {
    background-color: #FF6600;
    width: 600px;
    height: 600px;
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: #0033CC;
  animation-name: esempio;
  animation-duration: 4s;
}

Come potete notare, eseguendo il codice, l’effetto è molto più articolato: il nostro div continua a cambiare colore e dimensione attraversando quattro stadi differenti.

Iterare l’animazione con animation-iteration-count

Negli esempi che abbiamo visto sino ad ora, l’animazione viene eseguita una volta sola, al termine della quale l’elemento torna allo stato iniziale. Volendo possiamo creare animazioni che si ripetono più volte con la proprietà animation-iteration-count: se questa proprietà assume il valore "infinite", l’animazione si ripete all’infinito, altrimenti può assumere un valore numerico che indica il numero delle ripetizioni che devono avvenire prima del termine dell’animazione.

Tornando al nostro esempio, proviamo a modificare lo stile dell’elemento aggiungendo:

animation-iteration-count: infinite;

Gestire il ritardo dell’animazione con animation-delay

Fino ad ora le nostre animazioni si avviavano immediatamente, al momento del caricamento del documento. Attraverso la proprietà animation-delay, tuttavia, è possibile avviare l’animazione impostando un "ritardo". Per provare l’effetto di questa proprietà proviamo ad aggiungere questa linea di codice CSS allo stile del nostro div:

animation-delay: 3s;

Si noti che questa proprietà può avere anche valori negativi, in questo caso l’animazione inizierà subito ma come se fosse già stata riprodotta per N secondi.

Ad esempio, se la durata complessiva della nostra animazione è di 4 secondi, impostando:

animation-delay: -2s;

la nostra animazione inizierà subito ma partendo da metà del suo percorso.

Definire la direzione dell’animazione con animation-direction

CSS3 consente di definire anche la direzione di riproduzione, cioè se l’animazione debba essere riprodotto andando "in avanti" o "all’indietro" o in modo alternato.

La proprietà che consente di definire questo aspetto dell’animazione è animation-direction ed accetta i seguenti valori:

• normal – l’animazione viene riprodotta "in avanti" (default)
• reverse – l’animazione viene riprodotta "all’indietro"
• alternate – l’animazione viene riprodotta prima "in avanti" e poi "all’indietro"
• alternate-reverse – l’animazione viene riprodotta prima "all’indietro" e poi "in avanti"

Gli ultimi due valori, ovviamente, assumono senso nel momento in cui siano previste almeno due iterazioni dell’animazione.

Per capire l’effetto di questa proprietà, proviamo ad eseguire nuovamente il primo esempio di questa lezione aggiungendo al div la proprietà in oggetto:

/* Definisco l'animazione */
@keyframes esempio {
  from { background-color: #0033CC; }
  to { background-color: #FF6600; }
}

div {
  width: 100px;
  height: 100px;
  background-color: #0033CC;
  /* applico l'animazione all'elemento */
  animation-name: esempio;
  animation-duration: 4s;
  animation-direction: reverse;
}

Come potete notare il risultato è opposto a quello che avevamo visto in precedenza: il colore di sfondo passerà non da blu ad arancio ma da arancio a blu.

Proprietà avanzate per la gestione di animazioni con CSS3

Oltre a quelle appena viste, CSS3 prevede diverse altre proprietà per la creazione di animazioni che potremmo definire "avanzate". Nella parte conclusiva di questa lezione cercheremo di spiegarvele nel modo più semplice possibile.

Agire sull’andamento dell’animazione con animation-timing-function

La proprietà animation-timing-function consente allo sviluppatore di specificare la cosiddetta "curva di velocità" dell’animazione. I valori possibili sono:

• ease – l’animazione avrà un andamento abbastanza lento all’inizio, veloce nella fase mediana e lento alla fine (default)
• linear – l’animazione avrà un andamento costante dall’inizio alla fine
• ease-in – l’animazione avrà un inizio lento e poi un andamento veloce
• ease-out – l’animazione avrà un andamento veloce ed una fine lenta
• ease-in-out – l’animazione avrà un andamento veloce con un inizio ed una fine lenta
• cubic-bezier(n,n,n,n) – è possibile definire l’andamento indicando i valori della cosiddetta curca di bezier

Per apprezzare le differenze proviamo a creare differenti animazioni, ciascuna con un differente valore per la proprietà animation-timing-function, ed a riprodurle simultaneamente all’interno di una specie di "gara".

Definire l’aspetto dell’elemento prima e dopo l’animazione con animation-fill-mode

Avrete notato, testando i codici proposti in questa lezione, che l’aspetto del nostro elemento non è influenzato da quanto impostato all’interno di @keyframes prima che avvenga la riproduzione del primo fotogramma o dopo la riproduzione dell’ultimo fotogramma. L’animazione, in altre parole, ha un inizio ed una fine e l’aspetto del elemento non ne è condizionato prima dell’inizio e dopo la fine.

Attraverso la proprietà animation-fill-mode è possibile impostare una diversa preferenza. I valori possibili sono:

• none – l’animazione non applica alcuno stile all’elemento prima del suo inizio e dopo la sua fine (default)
• forwards – al termine dell’animazione, l’elemento mantiene lo stile applicato dall’ultimo fotogramma
• backwards – prima che inizi l’animazione, l’elemento assume lo stile impostato nel primo fotogramma
• both – l’elemento si comporta come se fossero stati settati sia il valore "forwards" che "backwards"

Mettere in pausa un’animazione con animation-play-state

CSS3 consente di mettere in pausa un’animazione agendo mediante la proprietà animation-play-state. I valori ammessi sono:

• paused – indica che l’animazione è in pausa
• running – indica che l’animazione è in corso (default)

L’utilità di questa proprietà diviene evidente, soprattutto, quando si "gioca" con Javascript. Possiamo pensare, ad esempio, di creare un’animazione ma di volerla riprodurre solo ad uno specifico evento (ad esempio il click su un bottone). Per fare ciò non dovremo fare altro che creare la nostra animazione CSS3 ed impostare la pausa con:

animation-play-state: paused;

Al click del mouse sarà, quindi, sufficiente cambiare tale valore in "running".

Utilizzare la proprietà animation

Tutte le proprietà viste sin’ora possono essere applicate simultaneamente utilizzando la formula abbreviata prevista dalla proprietà animation. Facciamo un esempio e supponiamo di avere un elemento con tutte queste proprietà:

animation-name: esempio;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 3s;
animation-iteration-count: infinite;
animation-direction: reverse;

Ora proviamo a riassumere tutto quanto all’interno di un’unica riga di codice:

animation: esempio 4s linear 3s infinite reverse;