Le animazioni con i CSS3, oltre ad essere piuttosto potenti, sono anche abbastanza semplici da implementare. Il vantaggio principale di questa innovazione è la possibilità di fare a meno di plugin esterni come Flash o anche solo di jQuery per realizzare movimenti fluidi ed effetti d'impatto.
Utilizzare animazioni di questo tipo non comporta problemi, ma la feature non è ancora supportata da tutti i browser (funziona solo su Firefox e sui browser che usano Webkit, come Chrome e Safari), ciò significa che, per ora, bisogna evitare di utilizzarla in ambienti di "produzione" oppure prevedere sempre un fallback per preservare la compatibilità.
In questo articolo cerchiamo di approfondire l'argomento realizzando un semplice esempio. Iniziamo scrivendo subito un po' di codice, che poi analizzeremo in dettaglio. La sintassi base delle animazioni con CSS3 prevede l'uso della regola @-webkit-keyframes per la prima definizione.
@-webkit-keyframes animazionePalla
{
/* qui vanno le regole */
}Poche semplici istruzioni: la parte @-webkit-keyframes serve a definire un'animazione. La parola successiva (animazionePalla in questo caso) rappresenta il nome dell'animazione, che useremo per assengare il movimento agli elementi della pagina. Il meccanismo è analogo a quello delle classi CSS: le definiamo in un punto e le assegnamo nel markup usando il nome.
KeyFrame
Tra i dodici principi dell'animazione di Disney, una sorta di insieme di "linee guida" sulle pratiche da adottare, c'e n'è uno legato al processo di disegno: Ogni animazione può essere:
- Straight-Ahead
- Pose to Pose key frame "tweening"
Il concetto di KeyFrame è noto a chi ha già esperienza di programmi per l'animazione: Flash e 3D Studio Max, ad esempio, sfruttano questo concetto per creare automatismi nelle animazioni.
Nel caratterizzare una animazione con CSS3 si usa lo stesso approccio: si specificano le regole per determinati momenti dell'esecuzione (con le percentuali, come vedremo a breve) e il sistema calcolerà i movimenti intermedi automaticamente.
Definire i KeyFrame con CSS3
Vediamo come questo concetto si traduce a livello di codice. L'animazione che stiamo definendo è quella di una semplice palla che rimbalza.
@-webkit-keyframes animazionePalla
{
0%:{
bottom:0;
left:200px;
}
50%:{
bottom:400px;
left:200px;
}
100%:{
bottom:0;
left:200px;
}
}Come si intuisce dal codice, all'inizio dell'animazione l'oggetto che noi muoviamo si trova a terra (bottom:0;). Al 50% (quindi a metà) dell'esecuzione, l'oggetto si troverà a 400 pixel di altezza rispetto al margine in basso della pagina. Arrivati al 100%, invece, sarà tornato nuovamente a terra, a zero pixel di distanza dal margine.
I punti definiti sono semplicemente tre, niente di più. L'animazione verrà quindi creata partendo automaticamente da questi riferimenti e calcolata di conseguenza.
Assegnare l'animazione agli elementi della pagina
Per avere sotto controllo la propria animazione, quindi, basterà fare riferimento alle percentuali, che indicano un preciso momento dell'esecuzione. Per variare il tutto infatti potremmo inserire anche dei nuovi valori in corrispondenza del 34%, 65% e così via, come più si vuole.
Una volta definita l'animazione, per attivarla a tutti gli effetti dobbiamo assegnarla ad un elemento della pagina:
#palla.animate
{
-webkit-animation-name: animazionePalla;
-webkit-animation-duration: 10s;
}In questo blocco gli attributi con cui abbiamo a che fare sono tre:
| Campo | Descrizione |
|---|---|
-webkit-animation-name
|
permette di assegnare l'animazione precedentemente creata all'elemento con l'id "palla" |
-webkit-animation-duration
|
consente di definire la durata di tale animazione. Ad esempio, nel caso appena definito, il 100% dell'animazione equivarrà a 10 secondi |
-webkit-animation-timing-function
|
consente di gestire l'evoluzione del movimento (in relazione al tempo) in maniera più o meno lineare (easing) |
Easing nelle animazioni CSS3
Riprendendo l'ultimo esempio fatto, esaminiamo meglio l'istruzione -webkit-animation-timing-function, che ci permetted di definire la velocità con la quale viene compiuto il movimento, scegliendo se adottare un andamento lineare o no.
Si pensi alle basi di fisica: il movimento di un corpo qualsiasi può essere vario. Ad esempio può essere lineare, a velocità costante, oppure si può avere una accelerazione iniziale e la velocità che cresce, per poi diminuire, come nel caso di una frenata. Ancora, si può avere una bassa velocità all'inizio che aumenta mano a mano, come se ci si trovasse in una macchina che sta accelerando costantemente.
Quindi, lasciando invariati il punto di inizio, il punto di arrivo e il tempo di esecuzione, tramite -webkit-animation-timing-function regoliamo la velocità. I valori che questo attributo può assumere, ricalcando gli esempi fatti poco fa, sono linear, ease-out, ease e tanti altri, che sono specificati meglio nelle direttive del W3C, reperibili sul sito ufficiale.
Tornando al nostro esempio, possiamo utilizzare queste istruzioni per dare un tocco di realismo in più alla nostra animazione. Per dare l'idea della gravità, possiamo aggiungere un ease-out nella fase "ascendente" dell'animazione, ed un ease nella fase "discendente". In questo modo quando la palla andrà verso l'alto perderà di velocità gradualmente, mentre la riguadagnerà nella fase di discesa.
Ecco il listato corrispondente al risultato che vogliamo ottenere:
@-webkit-keyframes animazionePalla
{
0%:{
bottom:0;
left:200px;
-webkit-animation-timing-function:ease-out;
}
50%:{
bottom:400px;
left:200px;
-webkit-animation-timing-function:ease;
}
100%:{
bottom:0;
left:200px;
-webkit-animation-timing-function:ease-out;
}
}Ci sono anche altri attributi che possiamo assegnare ad un animazione:
| Campo | Descrizione |
|---|---|
-webkit-animation-iteration-count
|
indica il numero di ripetizioni che l'animazione deve eseguire prima di fermarsi. Può assumere come valore un numero oppure la parola chiaveinfinite
|
-webkit-animation-direction
|
determina l'andamento dell'animazione per ogni volta che verrà eseguita. I valori che può assumere sono due: normal
alternate
|
-webkit-animation-delay
|
l'attributo delay determina il ritardo di esecuzione, in secondi, dell'animazione. Una nota particolarmente interessante riguarda l'eventuale input di valori negativi per tale attributo: in tal caso infatti l'animazione comincerà ricalcolando il punto di partenza in base al valore dato. Ad esempio, se specifichiamo un delay di "-5
10 - 5 = 5
|
-webkit-animation-fill-mode
|
attributo piuttosto importante, consente di definire lo stile dell'elemento interessato dall'animazione, prima e dopo di questa. Può assumere il valore di backwards
forward
both
|
Link utili:
