In un altro dei miei articoli hai visto come realizzare animazioni semplici con la proprietà CSS transition, cioè far passare una proprietà da un valore a un altro con le transizioni CSS3. Le transizioni CSS3, però, offrono poco controllo sul modo in cui l’animazione avanza nel tempo.
La proprietà animation, invece, ti permette di creare animazioni per fotogrammi chiave (le @keyframes).
Creare animazioni CSS3
Le animazioni CSS si basano su keyframe che ti permettono di indicare come cambiano le proprietà CSS nel tempo, un po’ come le vecchie animazioni Flash.
- Il primo passo per creare un’animazione CSS è definire i singoli fotogrammi chiave e dare un nome all’animazione dichiarando le keyframes.
- Il secondo passo è richiamare le keyframes per nome con la proprietà animation-name, aggiungere la proprietà animation-duration e, se serve, altre proprietà di animazione facoltative per controllare il comportamento dell’animazione.
Non serve però definire l’intero blocco di regole keyframes prima di richiamarlo o di applicarlo.
L’esempio qui sotto ti mostra come animare orizzontalmente un <div> da una posizione a un’altra usando la proprietà animation.
See the Pen
[1] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark
Perché l’animazione parta devi indicare almeno due proprietà: animation-name e animation-duration (maggiore di 0). Tutte le altre proprietà di animazione sono facoltative, perché i loro valori predefiniti non impediscono all’animazione di partire.
Nota: non tutte le proprietà CSS sono animabili. In generale è animabile ogni proprietà CSS che accetta valori sotto forma di numeri, lunghezze, percentuali o colori.
Definire i fotogrammi chiave (keyframes)
I fotogrammi chiave servono a indicare i valori delle proprietà di animazione nelle diverse fasi dell’animazione. Si dichiarano con una regola di stile CSS dedicata: @keyframes. Il selettore di un fotogramma chiave comincia con una percentuale (%) oppure con le parole chiave from (equivalente a 0%) o to (equivalente a 100%). Il selettore indica il punto in cui il fotogramma chiave si colloca nella durata dell’animazione.
Le percentuali rappresentano una porzione della durata dell’animazione. 0% è il punto di partenza, 100% il punto di arrivo, 50% il punto intermedio e così via. In altre parole, un fotogramma chiave al 50% di un’animazione di 2 secondi si trova a 1 secondo dall’inizio.
See the Pen
[2] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark
La proprietà animation in forma abbreviata
Le proprietà da tenere a mente quando si costruisce un’animazione sono parecchie. Si possono però indicare tutte in una sola proprietà, per accorciare il codice.
La proprietà animation è una scorciatoia che definisce in un colpo solo tutte le singole proprietà di animazione, nell’ordine indicato. Per esempio:
See the Pen
[3] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark
Nota: se un valore manca o non è indicato, viene usato il valore predefinito di quella proprietà. In altre parole, se manca il valore di animation-duration non avviene nessuna transizione, perché il suo valore predefinito è 0.
Le proprietà di animazione CSS3
La tabella qui sotto riassume tutte le proprietà css animation legate all’animazione.
| Proprietà | Descrizione |
|---|---|
|
animation |
Proprietà abbreviata che definisce tutte le proprietà dell’animazione in una sola dichiarazione. |
|
animation-name |
Indica il nome delle animazioni definite da @keyframes da applicare all’elemento selezionato. |
|
animation-duration |
Indica quanti secondi o millisecondi servono per completare un ciclo dell’animazione. |
|
animation-timing-function |
Indica come avanza l’animazione durante ogni ciclo, cioè le funzioni easing, ease-in, ease-out, …. |
|
animation-delay |
Indica quando l’animazione comincia. |
|
animation-iteration-count |
Indica quante volte un ciclo di animazione viene riprodotto prima di fermarsi. |
|
animation-direction |
Indica se l’animazione deve essere riprodotta al contrario nei cicli alternati. |
|
animation-fill-mode |
Indica come un’animazione CSS applica gli stili al suo bersaglio prima e dopo l’esecuzione. |
|
animation-play-state |
Indica se l’animazione è in corso o in pausa. |
|
@keyframes |
Indica i valori delle proprietà di animazione nei diversi momenti dell’animazione. |
Conclusione
Ora hai le basi per realizzare animazioni CSS3. Puoi anche aiutarti con le librerie di animazioni, che ti permettono di ottenere lo stesso risultato con meno lavoro.
