Tutorial sulle animazioni CSS: guida completa per principianti

Questa è una guida completa alla sintassi 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ù impegnativo 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.

Esistono diverse funzionalità che fanno parte delle specifiche di animazione CSS del W3C. Alcuni più facili da usare rispetto ad altri. Questo tutorial sulle animazioni dei fotogrammi chiave CSS esaminerà tutta la sintassi, incluse 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ù animation-* properties insieme a una serie di fotogrammi chiave di animazione definiti utilizzando il @keyframes regola. Diamo un’occhiata in dettaglio a ciò che accade nella costruzione di a @keyframes set di regole.

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, il @keyframes at-rule comprende tre parti fondamentali:

• Il @keyframes regola seguita da un nome di animazione personalizzato
• Una serie di parentesi graffe che avvolge tutti i fotogrammi chiave
• Uno o più fotogrammi chiave, ciascuno con una percentuale seguita da un set di regole racchiuso 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 che voglio, fa distinzione tra maiuscole e minuscole e deve rispettare il identificatore personalizzato regole in CSS. Questo nome personalizzato deve corrispondere al nome utilizzato nel file animation-name proprietà (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%in alternativa posso usare il from e to parole chiave:

@keyframes moveObject {
  from {
    transform: translateX(0);
  }

  50% {
     transform: translateX(300px);
  }

  to {
    transform: translateX(300px) scale(1.5);
  }
}

Il seguente CodePen interattivo utilizza la sintassi di cui sopra in un esempio dal vivo:

Nella demo, ho incluso un pulsante che reimposta l’animazione. Spiegherò più avanti perché è 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 sul @keyframes sintassi:

• Puoi inserire 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 set di regole diversi (ad esempio, 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% { ... }
• Il !important La parola chiave annulla qualsiasi valore di proprietà, quindi non dovrebbe essere utilizzata su una proprietà all’interno di un set di regole per i fotogrammi chiave

👉 Ora che hai una buona comprensione del @keyframes sintassi in questo tutorial di animazione CSS, diamo un’occhiata alle diverse proprietà di animazione che sono definite sull’elemento che viene 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 appaia nel file @keyframes sintassi. Questo nome deve essere lo stesso nome definito utilizzando il file animation-name proprietà.

Usando il CSS della demo precedente, la sintassi è la seguente:

.box {
  animation-name: moveObject;
}

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

Alcune cose da tenere a mente animation-name:

• Il valore iniziale per animation-name è none, il che significa che non sono attivi fotogrammi chiave. Questo può essere usato come una sorta di ‘toggle’ per disattivare un’animazione.
• Il nome scelto fa distinzione tra maiuscole e minuscole e può includere lettere, numeri, caratteri di sottolineatura 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, initialo inherit.

La proprietà animation-duration

Il animation-duration proprietà, nessuna sorpresa, definisce la quantità di tempo impiegata da un’animazione per essere eseguita 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 l’equivalente di quanto segue:

.box {
  animation-duration: 2000ms;
}

Puoi vedere il animation-duration proprietà in azione nella seguente demo di CodePen. In questa demo, puoi scegliere per quanto tempo vuoi che duri l’animazione. Prova a inserire vari valori in secondi o millisecondi, quindi utilizza il pulsante “Animate the Box” 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 utilizzi 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)
• Puoi utilizzare valori frazionari (ad es. 0.8s)

La proprietà animation-timing-function

Il animation-timing-function, il cui significato non è così ovvio come le due proprietà precedenti, viene utilizzato per definire il modo in cui l’animazione CSS avanza. Questa 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 parola 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 comprendere dai loro nomi, ma puoi vedere come differiscono utilizzando la seguente demo interattiva:

Utilizzare l’input select per scegliere uno dei sette valori della parola chiave. Si noti che il ease-* i valori “facilitano” l’animazione in vari modi. Un valore lineare è coerente fino in fondo.

Il animation-timing-function property 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 delle parole chiave step-start e step-end sono equivalenti ai valori steps(1, jump-start) e steps(1, jump-end)rispettivamente.

Quanto a 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 nel file cubic-bezier() funzione. 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 dare un’occhiata Questo articolo o questo strumento interattivo.

Il steps() la funzione, invece, accetta due argomenti:

• Un numero intero che rappresenta “interruzioni” uguali lungo un singolo ciclo dell’animazione.
• Una parola chiave facoltativa denominata “jumpterm” che determina se l’animazione “mantiene” a intervalli specifici

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

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

La proprietà animation-iteration-count

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

.box {
  animation-iteration-count: 3;
}

Il valore iniziale per animation-iteration-count è 1 ma puoi anche usare la parola chiave infinite (autoesplicativo) o utilizzare un valore frazionario. Un valore frazionario eseguirà l’animazione a metà dell’esecuzione 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 interrompe esattamente a metà.

Questa proprietà è particolarmente utile se utilizzata insieme a animation-direction proprietà (discussa in seguito), perché 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à animation-direction

Come accennato in precedenza in questo tutorial sulle animazioni CSS, il file animation-direction proprietà funziona bene in combinazione con animation-iteration-count. Il animation-direction La proprietà 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 alla prima iterazione
• alternate – L’animazione viene riprodotta in avanti alla prima iterazione, quindi si alterna alle iterazioni successive
• alternate-reverse – Uguale a alternate ma riproduce all’indietro alla prima iterazione

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

La proprietà animation-play-state

Il animation-play-state property non è estremamente utile in un ambiente CSS statico, ma potrebbe tornare utile quando si scrivono animazioni interattive tramite JavaScript o anche CSS.

Questa proprietà accetta due valori: running o paused:

.box {
  animation-direction: paused;
}

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

La demo interattiva di seguito ha un’animazione che funziona all’infinito con due pulsanti per “mettere in pausa” e “riprendere” l’animazione.

La proprietà animation-delay

Alcune animazioni sono progettate per iniziare immediatamente l’animazione, mentre altre potrebbero beneficiare di un leggero ritardo prima della prima iterazione. Il animation-delay proprietà consente di eseguire questa operazione.

.box {
  animation-delay: 4s;
}

Come altri valori basati sul tempo, puoi impostare il animation-delay a un valore utilizzando 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 offre la possibilità di modificare il valore di iterazione e il ritardo, in modo da poter vedere che il ritardo non influisce sulle iterazioni successive, solo sulla prima.

Un modo interessante di usare questa proprietà è con un valore negativo. Ad esempio, utilizzando la demo sopra, prova a impostare il file animation-delay a -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à animation-fill-mode

L’ultima proprietà longhand che tratterò in questo tutorial sulle animazioni CSS è quella che ho usato nella demo precedente. Noterai che quando l’animazione interrompe l’iterazione finale, la scatola 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 comprendere 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 – Mantiene 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 – Mantiene gli stili per entrambi forwards e 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 capire davvero cosa fa e come lo raggiunge.

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é tutti questi possono avere un effetto sull’aspetto. Ho anche aggiunto un colore di sfondo diverso alla casella animata nel primo fotogramma chiave, che ancora una volta aiuta a rendere un po’ più chiari i valori della modalità di riempimento. Se ancora non hai capito bene come animation-fill-mode funziona, puoi dare un’occhiata un vecchio articolo Ho scritto che discute animation-fill-mode approfondito.

La proprietà abbreviata dell’animazione

Ho trattato otto diverse proprietà in questo tutorial di animazione CSS per principianti e ti incoraggio a usare la mano lunga. Ciò renderà più semplice la visualizzazione dei valori espliciti impostati.

Una volta che hai una buona comprensione di ciascuna delle proprietà, hai la possibilità di utilizzare il file animation proprietà abbreviata, che consente di definire tutte le proprietà abbreviate 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 la scorciatoia se la dichiarazione non include tutte le proprietà, ma forse solo tre o quattro di esse.

Se usi la scorciatoia, puoi inserire i valori nell’ordine che preferisci, ma tieni presente le seguenti regole:

• Il primo valore che definisce il tempo è il animation-duration; qualsiasi valore temporale successivo è il animation-delay.
• Se c’è un conflitto tra una parola chiave e il file animation-nameil 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 una virgola.

Ecco un esempio usando la scorciatoia:

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

Qui, ho definito due diverse animazioni che verrebbero mappate su due diversi set 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;
}

Si noti come ogni proprietà includa due valori separati da virgole. In questo caso, la scorciatoia 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 dai colori lampeggianti e da altri oggetti in rapido movimento.