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, è il caso più complesso in cui il disegnatore si occupa di creare l'animazione disegnando un fotogramma alla volta
- Pose to Pose, in questo caso invece, si assegnano posizioni ben definite in determinati momenti dell'animazione (fotogrammi chiave o key frame): tutte le posizioni intermedie tra un fotogramma chiave e il successivo vengono create automaticamente tramite algoritmi e programmi appositi. Il risultato è il movimento. Questa pratica è detta "tweening" ed è alla base dell'animazione a KeyFrame.
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, che determina il loop infinito dell'animazione |
-webkit-animation-direction |
determina l'andamento dell'animazione per ogni volta che verrà eseguita. I valori che può assumere sono due: normal, che specifica che l'animazione dovrà essere sempre eseguita nella direzione determinata, ed alternate che indica al browser che l'animazione dovrà essere eseguita una volta normalmente, l'altra al contrario, e così via |
-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" in un'animazione che dura 10 secondi, cominceremo dalla metà di questa (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 nel caso si debba applicare lo stato del primo keyframe anche prima dell'esecuzione, forward nel caso si debba applicare lo stile dell'ultimo keyframe anche dopo l'animazione. Nel caso volessimo scegliere entrambe le opzioni, bisognerà specificare both |
Link utili:
