Tutorial sulle animazioni CSS: guida completa per principianti

Questa è una guida alla sintassi completa e un tutorial interattivo sulle animazioni CSS per principianti. Usalo come riferimento per apprendere le diverse parti delle specifiche delle animazioni CSS.

Le prestazioni del browser hanno fatto molta strada negli ultimi 10 anni. In passato era molto più difficile aggiungere animazioni interattive alle pagine Web a causa dei potenziali problemi di rendering e prestazioni. Ma al giorno d'oggi, le animazioni CSS possono essere utilizzate molto più liberamente e la sintassi è generalmente molto più facile da imparare rispetto alle funzionalità CSS come grid o flexbox.

Ci sono diverse funzionalità che fanno parte della specifica di animazione CSS del W3C. Alcuni più facili da usare di altri. Questo tutorial sulle animazioni dei fotogrammi chiave CSS esaminerà tutta la sintassi, inclusa ciascuna delle diverse proprietà. Includerò demo interattive per aiutarti a capire cosa è possibile fare con le animazioni CSS.

La sintassi @keyframes

Ogni animazione CSS ha due parti: una o più proprietà animation-* insieme a un set di fotogrammi chiave di animazione che vengono definiti utilizzando la regola @keyframes . Diamo un'occhiata in dettaglio a cosa serve per costruire un set di regole @keyframes .

La sintassi è simile a questa:

 @keyframes moveObject 0% transform: translateX(0); 50% transform: translateX(300px); 100% transform: translateX(300px) scale(1.5);

Come mostrato qui, la regola @keyframes include tre parti fondamentali:

• La regola @keyframes seguita da un nome di animazione personalizzato
• Una serie di parentesi graffe che avvolgono tutti i fotogrammi chiave
• Uno o più fotogrammi chiave, ciascuno con una percentuale seguita da una serie di regole racchiusa tra parentesi graffe

In questo primo esempio del nostro tutorial sulle animazioni CSS, ho definito la mia animazione con il nome moveObject . Questo può essere qualsiasi nome io voglia, fa distinzione tra maiuscole e minuscole e deve rispettare le regole dell'identificatore personalizzato in CSS. Questo nome personalizzato deve corrispondere al nome utilizzato nella proprietà animation-name (discussa in seguito).

Nel mio esempio, noterai che ho usato le percentuali per definire ciascuno dei fotogrammi chiave nella mia animazione. Se la mia animazione include fotogrammi chiave uguali a 0% e 100% , posso in alternativa utilizzare le parole chiave from e to :

 @keyframes moveObject from transform: translateX(0); 50% transform: translateX(300px); to transform: translateX(300px) scale(1.5);

Il seguente CodePen interattivo utilizza la sintassi sopra in un esempio live:

Nella demo, ho incluso un pulsante che ripristina l'animazione. Spiegherò più avanti perché questo è necessario. Ma per ora, sappi solo che questa animazione include tre fotogrammi chiave che rappresentano i passaggi in questa sequenza di animazione: l'inizio, il passaggio del 50% e la fine (ovvero, 0%, 50% e 100%). Ognuno di questi utilizza quello che viene chiamato un selettore di fotogrammi chiave insieme a parentesi graffe per definire le proprietà in quel passaggio.

Alcune cose da notare sulla sintassi @keyframes :

• Puoi mettere i set di regole dei fotogrammi chiave nell'ordine che preferisci e il browser li eseguirà comunque nell'ordine determinato dalla loro percentuale
• Puoi omettere i fotogrammi chiave 0% e 100% e il browser li determinerà automaticamente in base agli stili esistenti sull'elemento animato
• Se sono presenti fotogrammi chiave duplicati con diversi set di regole (ad es. due fotogrammi chiave per il 20% con un valore di trasformazione diverso), il browser utilizza l'ultimo
• Puoi definire più fotogrammi chiave in un singolo selettore di fotogrammi chiave con una virgola: 10%, 30% ...
• La parola chiave !important annulla qualsiasi valore di proprietà, quindi non dovrebbe essere utilizzata su una proprietà all'interno di un set di regole per fotogrammi chiave

Ora che hai una buona comprensione della sintassi @keyframes in questo tutorial di animazione CSS, diamo un'occhiata alle diverse proprietà di animazione che sono definite sull'elemento animato.

Le proprietà dell'animazione che tratteremo:

La proprietà del nome dell'animazione

Come accennato, ogni animazione CSS che crei deve avere un nome che appare nella sintassi @keyframes . Questo nome deve essere lo stesso definito utilizzando la proprietà animation-name .

Usando il CSS della demo precedente, la sintassi è simile a questa:

 .box animation-name: moveObject;

Ancora una volta, il nome personalizzato che ho definito deve esistere anche come nome per una regola @keyframes , altrimenti questo nome non farà nulla. Puoi pensare a questo come a una chiamata di funzione in JavaScript. La funzione stessa sarebbe la parte @keyframes moveObject del codice, mentre la chiamata alla funzione è animation-name: moveObject .

Alcune cose da tenere a mente su animation-name :

• Il valore iniziale per animation-name è none , il che significa che nessun fotogramma chiave è attivo. Questo può essere usato come una sorta di "interruttore" per disattivare un'animazione.
• Il nome scelto fa distinzione tra maiuscole e minuscole e può includere lettere, numeri, trattini bassi e trattini.
• Il primo carattere del nome deve essere una lettera o un trattino, ma solo un singolo trattino.
• Il nome non può essere una parola riservata come unset , initial o inherit .

La proprietà della durata dell'animazione

La proprietà animation-duration , nessuna sorpresa, definisce la quantità di tempo necessaria per l'esecuzione di un'animazione una volta dall'inizio alla fine. Questo valore può essere specificato in secondi o millisecondi, come mostrato di seguito:

 .box animation-duration: 2s;

Quanto sopra sarebbe equivalente a quanto segue:

 .box animation-duration: 2000ms;

Puoi vedere la proprietà animation-duration in azione nella seguente demo di CodePen. In questa demo, puoi scegliere la durata dell'animazione. Prova a inserire vari valori in secondi o millisecondi, quindi usa il pulsante "Anima la casella" per eseguire l'animazione.

Se usi un numero piccolo insieme a ms per l'unità, potresti anche non notare alcun movimento. Prova a impostare un numero più alto se stai usando i millisecondi.

Alcune note sull'utilizzo animation-duration :

• I valori negativi non sono validi
• L'unità deve essere inclusa, anche se la durata è impostata su 0s (il valore iniziale)
• È possibile utilizzare valori frazionari (ad es. 0.8s )

La proprietà della funzione di temporizzazione dell'animazione

La animation-timing-function , che non è così ovvia nel suo significato come le due proprietà precedenti, viene utilizzata per definire il modo in cui l'animazione CSS procede. Potrebbe non essere la spiegazione più chiara, ma la sintassi potrebbe aiutare a chiarire.

La dichiarazione si presenta così:

 .box animation-timing-function: linear;

Questa proprietà accetta i seguenti valori di parole chiave:

• ease (il valore iniziale)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

La maggior parte dei valori è relativamente facile da capire in base al nome, ma puoi vedere come differiscono utilizzando la seguente demo interattiva:

Utilizzare l'input select per scegliere uno dei sette valori delle parole chiave. Nota che i valori di ease-* 'facilitano' l'animazione in vari modi. Un valore lineare è coerente fino in fondo.

La proprietà animation-timing-function accetta anche le seguenti funzioni:

• cubic-bezier() – Accetta come argomenti quattro valori numerici, separati da virgole
• steps() – Accetta come argomenti due valori, un numero e un "termine di salto", separati da una virgola

I valori della parola chiave step-start e step-end equivalgono rispettivamente ai valori steps(1, jump-start) e steps(1, jump-end) .

Per quanto riguarda cubic-bezier() , la seguente demo interattiva potrebbe aiutarti a capire un po' meglio la funzione:

Si noti che la demo consente di impostare i quattro argomenti nella funzione cubic-bezier() . Due degli argomenti possono essere negativi e due sono vincolati a valori decimali compresi tra 0 e 1. Per una spiegazione decente di come funzionano questi tipi di funzioni di temporizzazione, puoi consultare questo articolo o questo strumento interattivo.

La funzione steps() , invece, accetta due argomenti:

• Un numero intero che rappresenta "fermate" uguali lungo un singolo ciclo dell'animazione.
• Una parola chiave facoltativa denominata "jumpterm" che determina se l'animazione "regge" a intervalli specifici

Ancora una volta, una demo interattiva dovrebbe aiutarti a capire come funzionano questi jumpterm:

Prova a selezionare un numero intero insieme a un jumpterm (o provalo senza jumpterm) per vedere come le diverse parole chiave differiscono con valori interi diversi. Apparentemente sono consentiti numeri interi negativi ma non vedo alcuna differenza tra 0 e alcun valore negativo.

La proprietà di conteggio delle iterazioni dell'animazione

In alcuni casi, sarai felice se un'animazione viene eseguita una volta, ma a volte desideri che un'animazione venga eseguita più volte. La proprietà animation-iteration-count ti consente di farlo accettando un numero positivo che rappresenta il numero di volte in cui desideri che l'animazione venga eseguita:

 .box animation-iteration-count: 3;

Il valore iniziale per animation-iteration-count è 1 , ma puoi anche utilizzare la parola chiave infinite (autoesplicativo) o utilizzare un valore frazionario. Un valore frazionario eseguirà l'animazione a metà della corsa frazionaria:

 .box animation-iteration-count: 3.5;

Il codice precedente esegue l'animazione tre volte e mezzo. Cioè, tre iterazioni complete seguite da un'iterazione finale che si ferma esattamente a metà.

Questa proprietà è particolarmente utile se utilizzata insieme alla proprietà animation-direction (discussa in seguito), poiché un'animazione che viene eseguita solo dall'inizio non è estremamente utile se viene eseguita più di una volta.

Puoi provare la demo di seguito che ti consente di selezionare un valore frazionario per il conteggio delle iterazioni, in modo da poter vedere l'effetto:

La proprietà della direzione dell'animazione

Come accennato in precedenza in questo tutorial sulle animazioni CSS, la proprietà animation-direction funziona bene insieme a animation-iteration-count . La proprietà animation-direction consente di definire la direzione in cui si desidera riprodurre l'animazione. La sintassi è simile a questa:

 .box animation-direction: alternate;

Puoi impostare il valore come una delle quattro parole chiave:

• normal : l'animazione viene riprodotta in avanti alla prima iterazione (impostazione predefinita)
• reverse – L'animazione viene riprodotta all'indietro sulla prima iterazione
• alternate : l'animazione viene riprodotta in avanti sulla prima iterazione, quindi si alterna nelle iterazioni successive
• alternate-reverse – Uguale a alternate ma riproduce all'indietro sulla prima iterazione

Puoi provare i diversi valori con diversi conteggi di iterazioni utilizzando la demo interattiva di seguito:

La proprietà dello stato di riproduzione dell'animazione

La proprietà animation-play-state non è estremamente utile in un ambiente CSS statico, ma potrebbe tornare utile quando si scrivono animazioni interattive tramite JavaScript o persino CSS.

Questa proprietà accetta due valori: running o in paused :

 .box animation-direction: paused;

Per impostazione predefinita, qualsiasi animazione è nello stato "in esecuzione". Ma puoi usare JavaScript per cambiare il valore della proprietà. Potresti anche utilizzare una funzionalità CSS interattiva come :hover o :focus per cambiare l'animazione in uno stato "pausa", che essenzialmente blocca l'animazione ovunque si trovi nell'iterazione corrente.

La demo interattiva di seguito ha un'animazione in esecuzione all'infinito con due pulsanti per "mettere in pausa" e "riprendere" l'animazione.

La proprietà del ritardo di animazione

Alcune animazioni sono progettate per iniziare immediatamente l'animazione, mentre altre potrebbero beneficiare di un leggero ritardo prima della prima iterazione. La proprietà animation-delay consente di ottenere ciò.

 .box animation-delay: 4s;

Come altri valori basati sul tempo, puoi impostare il animation-delay un valore che utilizza secondi o millisecondi. Puoi anche usare valori frazionari.

È importante notare che il ritardo si verifica solo alla prima iterazione, non a ogni iterazione. Puoi provarlo usando la demo interattiva qui sotto:

La demo ti dà la possibilità di modificare il valore dell'iterazione così come il ritardo, così puoi vedere che il ritardo non influisce sulle iterazioni successive, solo la prima.

Un modo interessante di utilizzare questa proprietà è con un valore negativo. Ad esempio, utilizzando la demo sopra, prova a impostare il animation-delay su -0.5s . Noterai che il ritardo negativo funziona quasi come andare avanti in una macchina del tempo: l'animazione inizia a metà piuttosto che all'inizio.

La proprietà della modalità di riempimento dell'animazione

L'ultima proprietà a mano lunga che tratterò in questo tutorial sulle animazioni CSS è quella che ho usato nella demo precedente. Noterai che quando l'animazione interrompe l'iterazione finale, il riquadro rimane dov'è. Ciò si ottiene utilizzando animation-fill-mode .

 .box animation-fill-mode: forwards;

Questa proprietà imposta il modo in cui un'animazione applica gli stili all'elemento di destinazione prima e dopo la sua esecuzione. È un po' difficile da afferrare concettualmente, quindi tratterò il significato di ciascun valore; quindi puoi confrontare i valori utilizzando la demo interattiva.

Questa proprietà accetta i seguenti quattro valori di parole chiave:

• none – L'impostazione predefinita, nessuno stile applicato prima o dopo l'esecuzione
• forwards : conserva tutti gli stili applicati nell'ultimo fotogramma chiave dell'animazione
• backwards : più o meno il contrario del valore precedente, mantiene gli stili applicati all'animazione non appena inizia l'esecuzione ma prima che inizi l'animazione
• both : conserva gli stili sia forwards che backwards

La demo finale in questo tutorial sulle animazioni CSS renderà le cose un po' più chiare, ma questo potrebbe richiedere molto tempo prima di ottenere davvero quello che fa e come lo ottiene.

Per comodità, ho aggiunto tutte le demo in un'unica raccolta CodePen.

Noterai che la demo ti consente di regolare la modalità di riempimento, il ritardo, la direzione e il numero di iterazioni, poiché tutto ciò può avere un effetto sull'aspetto. Ho anche aggiunto un colore di sfondo diverso alla casella animata nel primo fotogramma chiave, che aiuta ancora una volta a rendere un po' più chiari i valori della modalità di riempimento. Se ancora non capisci come funziona animation-fill-mode , puoi consultare un articolo precedente che ho scritto che discute in modo approfondito animation-fill-mode .

La proprietà della scorciatoia di animazione

Ho trattato otto diverse proprietà in questo tutorial di animazione CSS per principianti e ti incoraggio a usare la mano lunga. In questo modo sarà più facile visualizzare i valori espliciti impostati.

Una volta che hai una buona comprensione di ciascuna delle proprietà, hai la possibilità di utilizzare la proprietà abbreviazione di animation , che ti consente di definire tutte le proprietà a mano lunga in un'unica dichiarazione.

 .box animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards;

In tutta onestà, sono molte informazioni in una sola riga. Consiglierei di usare l'abbreviazione se la dichiarazione non include tutte le proprietà, ma forse solo tre o quattro di esse.

Se usi la scorciatoia, puoi mettere i valori nell'ordine che preferisci, ma osserva le seguenti regole:

• Il primo valore che definisce il tempo è la animation-duration ; qualsiasi valore di tempo successivo è l' animation-delay .
• Se c'è un conflitto tra una parola chiave e l' animation-name , il valore della parola chiave avrà la precedenza se appare per primo.
• Tutti i valori omessi torneranno al loro stato iniziale, come con qualsiasi proprietà abbreviata CSS.

Applicazione di più animazioni a un singolo elemento

Un'ultima caratteristica di cui è bene essere consapevoli è che hai la possibilità di applicare più animazioni a un singolo oggetto separando le animazioni con virgole.

Ecco un esempio usando la stenografia:

 .box animation: moveObject 2s ease-in-out, fadeBox 3s linear;

Qui, ho definito due diverse animazioni che verrebbero mappate su due diversi insiemi di fotogrammi chiave, ma si applicherebbero allo stesso oggetto. Lo stesso codice potrebbe essere scritto a mano come:

 .box animation-name: moveObject, fadeBox; animation-duation: 2s, 3s; animation-timing-function: ease-in-out, linear;

Nota come ogni proprietà include due valori separati da virgole. In questo caso, la stenografia sarebbe quasi sicuramente più facile da leggere e mantenere.

Conclusione di questo tutorial sulle animazioni CSS

Un ultimo avvertimento: usa l'animazione con moderazione e ricorda che alcuni utenti web potrebbero essere influenzati negativamente da colori lampeggianti e altri oggetti in rapido movimento.