Animazioni CSS3

Link copiato negli appunti

A portare concetti come transizioni, trasformazioni ed animazioni nell'ambito dei CSS è stata Apple, in particolare il team di sviluppo che lavora su Webkit, il motore di rendering del browser Safari (e che poi lo è diventato pure di Google Chrome).

L'esigenza da cui tutto è nato è semplice: trovare un'alternativa a Javascript e soprattutto a Flash nel contesto del mobile, su dispositivi che non hanno la potenza di calcolo e l'autonomia di un computer tradizionale e per i quali il consumo di risorse deve necessariamente ridursi al minimo.

Quanto queste specifiche (a un certo punto accolte tra i moduli ufficiali del W3C) abbiano il sapore di alternativa a Flash, è possibile verificarlo soprattutto con le animazioni CSS3. Si tratta infatti di qualcosa di più complesso e avanzato rispetto alle transizioni perché entra in gioco l'idea di animazione sviluppata su una sorta di timeline a partire da una serie di keyframe.

Nel momento in cui pubblichiamo questa guida le animazioni sono supportate solo dai browser Webkit (Safari e Chrome) e da Firefox 5.0.

Come funzionano le animazioni CSS3

Per spiegare il meccanismo di funzionamento delle animazioni CSS3 abbiamo pensato di riprendere un semplice esempio proposto dal team di Webkit. Passiamo subito all'analisi del codice.

Nel documento è presente un solo div con classe .pulsedbox:

<div class="pulsedbox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Ad esso sono associate queste semplici regole CSS per dargli la formattazione di base:

background-color: red;
width: 40%;
padding: 0.2em 1em;
margin: 6em;

E le animazioni? Le parti CSS per ottenerle sono suddivise in due blocchi.

Il primo è questo:

@-webkit-keyframes 'pulse' {
0% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
33% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
}
67% {
background-color: green;
opacity: 0.5;
-webkit-transform: scale(1.1) rotate(5deg);
}
100% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}

Ogni animazione CSS deve contenere un blocco di questo tipo.

Si tratta di una cosiddetta @-rule, uno di quei costrutti CSS introdotti dal simbolo @.

Nelle animazioni CSS3 per introdurre il blocco delle dichiarazioni usiamo @-keyframes. Nell'esempio abbiamo @-webkit-keyframes per via del prefisso proprietario più volte incontrato nel corso di questa guida.

Subito dopo @-keyframes va inserito il nome dell'animazione. Nell'esempio è stato usato 'pulse', ma può essere un nome a nostro piacimento.

Tutto quello che segue nella dichiarazione va racchiuso tra parentesi graffe.

E cosa troviamo tra le parentesi graffe? Troviamo 4 dichiarazioni introdotte da percentuali: 0%, 33%, 67%, 100%. Ciascuna dichiarazione contiene proprietà CSS che definiscono l'aspetto e/o la posizione dell'oggetto. Ciascuna dichiarazione corrisponde a un keyframe dell'animazione. Chiariamo bene.

In qualunque animazione vanno definiti almeno 2 stati di un oggetto, quello iniziale e quello finale. Nelle animazioni CSS3 lo stato iniziale va dichiarato con il valore 0% oppure con la parola chiave from. Lo stato finale con il valore 100% oppure con la parola chiave to. In pratica, potevamo scrivere la regola vista qui sopra in questo modo:

@-webkit-keyframes 'pulse' {
from {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
33% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
}
67% {
background-color: green;
opacity: 0.5;
-webkit-transform: scale(1.1) rotate(5deg);
}
to {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}

Il risultato non cambia, le regole sono equivalenti.

Tra i due keyframe necessari, 0% e 100% (from e to), possiamo inserire altri fotogrammi chiave. Questi vanno sempre dichiarati attraverso valori in percentuale. Ma come vanno interpretati?

Semplice. Si supponga di creare un'animazione di 10 secondi. Impostando il primo fotogramma chiave al 33%, esso sarà attivo al 33% di 10 secondi, ovvero a 3,3 secondi. E così via.

Non rimane che chiarire l'ultimo aspetto. A ciascun keyframe, lo accennavamo, è associato un blocco con delle proprietà CSS. Per ogni blocco inseriremo le proprietà che definiscono l'aspetto e la posizione dell'elemento.

Il nostro div parte per esempio con uno sfondo rosso (background-color: red;), poi al 33% dell'animazione lo sfondo diventa blue (background-color: blue;), alla fine di nuovo rosso, passando per il verde al 67% dell'animazione. Nel contempo viene modificata l'opacità dell'oggetto e quest'ultimo subisce trasformazioni come il ridimensionamento (scale) e la rotazione (rotate). Le proprietà che è possibile animare sono le stesse a cui è possibile applicare delle transizioni, quelle definite in questa tabella. Ad esse si aggiungono le proprietà legate alle trasformazioni CSS3.

Con il primo blocco siamo però a metà dell'opera, abbiamo solo impostato i fondamenti dell'animazione senza associarla ad alcun elemento.

L'associazione avviene nel CSS partendo dal selettore legato all'elemento da animare.

Noi abbiamo un div con classe .pulsedbox. Per cui, nel CSS, andremo a scrivere:

.pulsedbox {
-webkit-animation-name: pulse;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}

In questa dichiarazione sono contenute le proprietà fondamentali del modulo.

animation-name

Con la proprietà animation-name si definisce il nome dell'animazione da associare ad un elemento. Il nome deve corrispondere a quello impostato nella regola @-keyframes. Nel nostro caso, infatti, abbiamo usato 'pulse'.

animation-duration

Questa proprietà serve a impostare la durata dell'animazione. Il valore va espresso in secondi.

animation-iteration-count

La proprietà animation-iteration-count è usata per impostare il numero di volte che un'animazione sarà ripetuta. Il valore può essere un numero intero pari o superiore a 1 oppure la parola infinite, con cui si crea una sorta di loop infinito. Il valore di default è 1.

animation-timing-function

Questa proprietà è del tutto analoga alla proprietà transition-timing-function vista nelle transizioni CSS3: descrive come i valori intermedi usati durante l'animazione vengono calcolati. Identico il set di valori, basati sulle curve di Bèziers, che è possibile utilizzare:

ease;
linear;
ease-in;
ease-out;
ease-in-out;
cubic-bezier.

Altre proprietà

Oltre a quelle usate nell'esempio, almeno un paio di altre proprietà vanno menzionate.

Con animation-direction possiamo far sì che l'animazione ripetuta venga eseguita in ordine inverso. Basta assegnare alla proprietà il valore reverse.

Per impostare invece un ritardo nell'esecuzione dell'animazione, invece, possiamo usare animation-delay con un valore espresso in secondi.