Animazioni CSS: un’introduzione ai keyframe

Qualche tempo fa abbiamo affrontato l’argomento delle CSS Transition, regole che permettono di creare semplici animazioni alla modifica di stato di un elemento, per esempio quando un campo input viene selezionato oppure quando il mouse è in hover.

Queste sono soluzioni che ci permettono di animare in molti modi diversi i nostri elementi, ma richiedono sempre che l’utente (e il suo mouse) si trovino vicino all’elemento in questione e non sempre riescono ad attirare l’attenzione che meritano.

Anche in questo stesso sito i bottoni delle nostre CTA hanno applicata una transazione, e per quanto sia già un effetto che mi piace molto ho già qualche idea in mente per applicare un’animazione che mi permetta di attirare maggiormente l’attenzione e che mi permetta di esporre meglio gli argomenti trattati in questo articolo.

Magari stai pensando: “Appunto, ho già le transizioni a mia disposizione perché dovrei imparare come funzionano le animazioni CSS?”

Bene, per prima cosa imparare nuovi concetti non fa di certo male ma, anzi, ti permetterà di acquisire nuove conoscenze ed una consapevolezza maggiore sull’argomento trattato.

Analizzando invece da vicino l’argomento “animazioni CSS” c’è anche da dire che al giorno d’oggi abbiamo a disposizione molte applicazioni che ci aiutano a semplificare il lavoro, come Sencha o Hype, e anche se molto utili dobbiamo essere consapevoli di cosa sia e come viene costruita una animazione, tu questo lo sai?

Se stai scuotendo la testa continua a leggere…

Un concetto fondamentale

Quando si parla di animazioni di qualsiasi genere entriamo in un mondo distinto dove si usano anche termini che possono suonare nuovi e proprio per questo ho deciso di scrivere questa sezione, per dare una mano a comprendere al meglio che cosa serve per creare delle buone e realistiche animazioni.

Per chi non è abituato a creare delle animazioni, compreso il sottoscritto, la prima cosa che dobbiamo tenere a mente è che esistono diversi tipi di animazione che possiamo creare.

Esistono due modi principali che permettono di creare un’animazione partendo da un disegno e sono Straight Ahead e Pose to Pose. Come spiegato nel video sottostante il primo tipo di animazione si ottiene partendo dal disegno del nostro personaggio (per noi sviluppatori forse è meglio pensare a un elemento HTML) e lo spostamento e le trasformazioni che subirà durante l’animazione vengono disegnate in modo sequenziale, una per volta.

Il concetto Pose to Pose invece è quello che viene applicato dai nostri browser. Al posto di richiederci delle regole CSS per ogni singolo cambiamento possiamo impostare dei keyframe grazie ai quali diciamo al browser come si deve trasformare il nostro elemento, senza doverci preoccupare di tutte i suoi stadi intermendi.

[clickToTweet tweet=”Grazie al Pose to Pose creare delle #animazioniCSS è un gioco da ragazzi!” quote=”Grazie al Pose to Pose creare delle animazioni CSS è un gioco da ragazzi!”]

Come già spiegato all’interno dell’articolo dedicato alle transizioni CSS, se voglio trasformare lo sfondo di un elemento da rosso a blu io mi devo soltanto preoccupare di dichiarare le modifiche dello stato iniziale e quello finale all’interno del mio CSS, tutte le altre varianti vengono calcolate automaticamente dal browser.

Sono consapevole del fatto che non conosci ancora la sintassi CSS che ti permetterà di realizzare le tue animazioni, ma se devo aggiungere una differenza che queste hanno con le transizioni è sicuramente quella che non sarai più legato da un punto di partenza e uno di fine.

Infatti, come scoprirai meglio nelle prossime sezioni, potremo definire tutti i keyframe che desideriamo per realizzare qualsiasi tipo di animazione!

Sfruttiamo i keyframe per creare l’animazione

A questo punto dovrebbe essere chiaro che grazie alla sintassi dei CSS saremo in grado di impostare dei keyframe che modificheranno il nostro elemento, ma prima di andare a vedere la sua sintassi lasciami spendere due parole sulla compatibilità di questa nuova proprietà.

Se facciamo un salto su CanIUse e facciamo una veloce ricerca, scopriremo che che al giorno d’oggi tutti i browser in circolazione sono in grado di comprendere questo codice e anche senza la necessità di dover usare vendor prefix! Questa è sicuramente una bella notizia perché in questo articolo non vedrai alcun codice complicato, soltanto la sintassi CSS creata dalla stessa W3C.

[clickToTweet tweet=”Oggi possiamo creare #animation #CSS senza dover utilizzare i vendor prefix, finalmente!” quote=”Oggi possiamo creare animazioni CSS senza dover utilizzare i vendor prefix, finalmente!”]

Nel caso in cui desideri rendere il tuo codice compatibile anche con vecchi browser (ehm Internet Explorer…) puoi utilizzare servizi online come Express Prefix oppure implementare nel tuo workflow Gulp il corretto plugin e utilizzare direttamente la libreria Autoprefixer.

Passiamo però al codice, come si dichiara un’animazione all’interno dei nostri CSS?

@keyframes "animazione" { 
	0% { 
		/* Effetti inizio animazione */
	} 
	100% { 
		/* Effetti fine animazione */
	} 
}

Ecco come si presenta un’animazione CSS! Sono sicuro che la prima cosa che hai notato è stato @keyframes, una delle  CSS @-rules. Infatti, come succede anche per le altre regole come @media queste regole “speciali” ci permettono di definire il nostro codice all’interno delle parentesi graffe comportandosi a tutti gli effetti come dei classici selettori CSS. Quando si utilizza @keyframes stiamo definendo un’animazione e prima ancora dell’apertura delle parentesi graffe andiamo a inserire il suo nome, nel codice appena presentato ho deciso di chiamare questa animazione animazione (lo so ho molta fantasia 😛 ).

Quindi scrivendo @keyframes "animazione" stiamo dicendo al browser che all’interno delle parentesi graffe troverà il codice che definisce l’animazione chiamata animazione.

Fin qui tutto chiaro?

[clickToTweet tweet=”Utilizzando la #at-rule #keyframe posso definire nel dettaglio le mie #animation CSS!” quote=”Utilizzando la at-rule @keyframe posso definire nel dettaglio le mie animazioni CSS!”]

Ma è all’interno delle parentesi graffe che succede la magia! Infatti potremo indicare quali effetti realizzare in specifici keyframe, come per esempio la posizione e le dimensioni del nostro elemento specificando il momento preciso inserendo una percentuale. Questo significa che potrei dire al mio browser una cosa di questo tipo:

Ehy browser, voglio costruire un’animazione che mi permetta di iniziare con un elemento con sfondo rosso che a metà del tempo ruoti di 45 gradi e diventi di colore verde per poi tornare alla posizione iniziale con il colore di sfondo blue.

Nella frase precedente ho definito la mia animazione all’inizio, a metà e alla fine.

Ecco il codice necessario:

@keyframes "animated-square" {   

	0%{     
		background-color: red;   
	}     

	50%{     
		background-color: green;     
		transform: rotateZ(45deg);   
	}     

	100%{     
		background-color: blue;     
		transform: rotateZ(0deg);       
	} 
	
}

La sintassi è molto semplice, una volta aperte le regole non dobbiamo far altro che specificare i momenti chiave della nostra animazioni, i keyframe appunto, e nel nostro esempio è stato molto semplice perché è bastato inserire la percentuale di inizio (0%), la metà (50%) e quella che ne definisce la fine (100%). All’interno delle parentesi graffe che contengono il codice che trasformerà il nostro elemento in un dato keyframe possiamo inserire tranquillamente le regole CSS che conosciamo tanto bene.

A questo punto sono sicuro che non vedi l’ora di iniziare a sfruttare queste potenzialità e vedere un po’ che cosa puoi creare.

Peccato, non funzioneranno…

Assegnamo l’animazione a un elemento

So di averti lasciato con l’amaro in bocca, in fin dei conti abbiamo appena conosciuto la sintassi base per creare le nostre animazioni e io ti vengo a dire che ancora non funzionano?!? Però è la verità. Ed ecco perché:

Quello che abbiamo fatto con la sintassi precedente è stato definire i keyframe dell’animazione, basta.

Il browser al momento non conosce quale elemento dovrà animare e questo per noi è un grosso problema perché senza elementi HTML le nostre animazioni CSS non possono essere eseguite. Cerchiamo quindi di rimediare immediatamente a questa mancanza e creiamo un elemento HTML da poter animare.

<div id="box"> Esperimenti con le Animazioni </div>

Adesso che abbiamo una struttura HTML di base e possiamo vedere quali regole CSS dobbiamo usare per collegare l’animazione creata al nostro elemento, per motivi di semplicità tratterò soltanto le regole che mi permettono di collegare e configurare l’animazione precedentemente creata a questo elemento, se vuoi il codice completo e non vuoi aspettare puoi consultare questo CodePen ma sappi che è già inserito alla fine di questo articolo.

#box{ 
	animation-name: animated-square; 
	animation-duration: 3s; 
	animation-iteration-count: 5; 
	animation-direction: alternate; 
}

Eccoci di fronte alle prime quattro regole che ci permettono di gestire le nostre animazioni, ho utilizzato il termine prime perché ne esistono altre che ci possono aiutare a configurare nel dettaglio la nostra animazione, ma per il momento andiamo a vedere il significato di quelle appena inserite:

• animation-name – grazie a questa proprietà saremo in grado di specificare il nome di riferimento per la nostra animazione, come presentato nel blocco di codice precedente dove abbiamo definito le animazioni del nostro elemento;
• animation-duration – tramite questa semplice proprietà puoi specificare il tempo di durata di una animazione completa, ovvero specifichiamo il lasso di tempo nel quale eseguire il codice specificato all’interno dei @keyframes;
• animation-iteration-count – qui sei in grado di far contare al browser quante volte dovrà eseguire la nostra animazione prima di tornare sullo stato di partenza;
• animation-direction – ci permette di specificare la direzione della nostra animazione, ovvero con il valore alternate stiamo dicendo al browser che vogliamo far tornare il nostro elemento come all’inizio dell’animazione ripercorrendo a ritroso le regole impostate.

Adesso conosci le principali proprietà CSS che ti permettono di collegare e definire meglio la tua animazione, però se conosci bene i CSS probabilmente ti sei già immaginato che come accade per le proprietà margin, padding, border e molte altre anche le proprietà dedicate alle animazioni hanno una versione accorciata.

Eccola qua:

#box{   
	animation: animated-square 3s infinite alternate; 
}

Come puoi notare, una volta compreso il funzionamento delle singole regole potremo utilizzare la versione ridotta per rendere i nostri CSS più snelli e più facili da modificare! Andiamo a vedere da vicino quali parametri vengono accettati (fai attenzione perché nel seguente blocco di codice ho omesso animation- per risparmiare un po’ di spazio 😉 ):

animation: name duration timing-function delay iteration-count direction;

Questo è l’ordine per inserire i parametri che aiutano a personalizzare l’esecuzione della nostra animazione.

Hai notato niente di strano?

Sto parlando dei parametri animation-timing-function e di animation-delay, questi non li avevamo incontrati nel blocco di codice precedente. Se sei curioso di scoprire a che cosa servono e come ci possono aiutare nella gestione delle animazioni CSS ti suggerisco di continuare a leggere.

Maggior controllo sul tempo

Prendiamo velocemente in esame queste due nuove proprietà e iniziamo osservando tutti i valori che possiamo dare alla proprietà animation-timing-function:

animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out, cubic-beizer(n, n, n, n);

Notate niente di familiare? I valori che questa proprietà accetta sono gli stessi valori che vengono accettati da transition-timing-function e ci aiuta a gestire l’animazione all’interno dell’arco di tempo che abbiamo impostato precedentemente graie alla proprietà animation-duration. Se non dovesse essere chiaro, anche se qua sotto trovi una veloce spiegazione ti consiglio di a leggere l’articolo CSS Transition, crea le tue prime animazioni con stile per avere tutti gli approfondimenti che desideri.

Ecco la spiegazione breve.

A questo punto dell’articolo conosci due cose:

1. puoi dichiarare i keyframe grazie a @keyframes specificando in percentuale i momenti di trasformazione durante l’arco temporale che definisce l’esecuzione della tua animazione;
2. puoi impostare l’intera durata della tua animazione grazie alla proprietà animation-duration che definisce l’arco temporale di inizio e fine dell’animazione.

Praticamente puoi dire al tuo browser che la durata della tua animazione è di 3 secondi e che l’elemento animato subirà 3 trasformazioni (che verranno animate automaticamente grazie al Pose to Pose), però se ci pensiamo un attimo esistono diversi modi per raggiungere i keyframe. Anche all’interno di una misura inflessibile come il tempo, possiamo modificare l’accelerazione e la decelerazione delle nostre animazioni per raggiungere risultati diversi.

Ebbene questo lo puoi fare grazie alle funzioni di interpolazione.

[clickToTweet tweet=”Gestire accelerazione e decelerazione delle mie #animation #CSS è semplice con le #timing-function!” quote=”Gestire accelerazione e decelerazione delle mie animazioni CSS è semplice con le timing-function!”]

Quello che puoi fare con la proprietà animation-timing-function è molto interessante perché potrai decidere se avere uno scorrimento lineare, un’accelerazione finale oppure anche rallentare la tua animazione soltanto a metà della sua esecuzione. Se poi hai un minimo di conoscenza nella gestione di curve beizer esistono moltissimi strumenti online che ti permettono di creare facilmente i valori da inserire in questa proprietà.

Ti consiglio proprio di fare qualche esperimento, puoi iniziare con un fork di questo CodePen 😉

Sicuramente la proprietà animation-delay non è interessante quanto la precedente, però devo ammettere che in alcuni casi anche questa è molto utile perché ci permette di impostare un ritardo all’avvio della nostra animazione.

Tips & Tricks per le animazioni CSS

Ci stiamo avvicinando alla fine dell’articolo, in fin dei conti adesso conosci la sintassi per definire i keyframe e tutte le proprietà necessarie a gestire l’animazione tutto quello che ti resta è iniziare a fare qualche esperimento.

Però prima di lasciarti andare su CodePen e iniziare a studiare le migliaia di animazioni CSS che contiene vorrei anticiparti alcuni dei problemi che potresti incontrare andando a creare delle animazioni perché anche se ancora non lo sai creare animazioni CSS può essere un’attività impegnativa per i nostri browser, soprattutto se non si conoscono alcune caratteristiche di questo modulo.

Attento a cosa viene animato!

Sono convinto che adesso che conosci la sintassi di base non vedi l’ora di trasformare il tuo elemento, di spostarlo nello schermo e di animare le tue pagine web. Questo è sicuramente lo spirito giusto ma prima che il tuo sito web si rallenti in modo del tutto inaspettato vorrei farti riflettere su quali sono le proprietà che è più utile animare.

[clickToTweet tweet=”Creare #animation #CSS fluide significa essere in grado di modificare le giuste proprietà” quote=”Creare animazioni CSS fluide significa essere in grado di modificare le giuste proprietà ;)”]

Sono sicuro che se stai pensando di aumentare le dimensioni del tuo elemento stai pensando a quali valori assegnare alle proprietà width e height mentre se sei interessato a spostare l’elemento all’interno del tuo layout hai già pensato a margin, padding e i valori di position. Ebbene, mi dispiace dirti che queste sono le proprietà sbagliate da trasformare.

Ed ecco spiegato perché.

Una cosa che noi sviluppatori ci dimentichiamo spesso quando realizziamo le pagine web è che il browser deve disegnare ogni elemento e dire allo schermo del nostro computer come colorare ogni singolo pixel, quando si tratta di siti statici e di elementi che stanno fermi nella pagina non ci accorgiamo di questa attività però se provi ad osservare il video inserito qua sotto puoi notare con i tuoi occhi quanto un’animazione può essere resa più fluida usando le proprietà giuste.

Quello che ti ho appena inserito è un video che mette a confronto due animazioni molto simili, quella a sinistra utilizza la proprietà position impostata ad absolute e con le regole top e left che vengono modificati dall’animazione, mentre nello schermo a destra l’animazione viene realizzata sfruttando la proprietà transform. Come si può vedere dal video, l’animazione sulla destra è molto più fluida e questo ci fa capire una cosa molto importante:

Si possono creare animazioni fluide con le giuste proprietà.

Il concetto è molto ampio e si possono fare moltissimi esperimenti, per fortuna nostra due grandi Paul del web hanno scritto un intenso articolo apparso su HTML5Rocks dove elencano i vari test effettuati e ne descrivono nel dettaglio le motivazioni che portano a una conclusione: quando vuoi animare i tuoi elementi HTML è meglio farlo utilizzando proprietà come opacity e transform.

Non animare tutti insieme, crea una coreografia

Capisco benissimo che questo probabilmente è il primo articolo che leggi sulle animazioni CSS e noi di SkillsAndMore non vediamo l’ora di trattare questi argomenti in futuri articoli e, perché no, anche all’interno di uno dei nostri corsi. Questo detto però non devi lasciarti scoraggiare perché per creare delle belle animazioni occorre tempo e pazienza.

Personalmente io ho avuto non pochi problemi quando mi sono avvicinato per le prime volte alle animazioni CSS, non riuscivo a comprendere bene il concetto di kayframe e come le percentuali che definivo andavano a combaciare con il tempo dellanimazione… Insomma, per scorciare la storia diciamo che è stato un percorso abbastanza difficile.

Ma puoi padroneggiarlo con pratica e tempo.

[clickToTweet tweet=”Con un semplice #delay possiamo creare #animation #CSS molto più intuitive.” quote=”Con un semplice delay possiamo creare animazioni CSS molto più intuitive.”]

Inizialmente inserirai tutte le tue animazioni e non terrai molto di conto il tempo in cui queste possono apparire, ma ben presto scoprirai che il momento in cui appare un elemento nella tua finestra è molto importante per dare un senso alla tua animazione. Guarda questo esempio in cui la proprietà animation-delay è stata incrementata a ogni elemento, non trovi che sia fin troppo naturale?

Ho trovato questa immagine all’interno di questo interessante articolo apparso sul blog di Gyroscope e penso che sia veramente in grado di farci capire con quanta semplicità la proprietà animation-delay può essere utilizzata per dare un nuovo livello di realtà alle animazioni che possiamo creare. Altra cosa interessante è che nell’articolo ci viene consigliato di utilizzare Sass per creare i cicli che ci permetteranno di modificare il valore del delay automaticamente.

Prenditi il tuo tempo e usa gli strumenti giusti

Come dicevo anche prima, creare delle animazioni è un’attività che si mangia un sacco di tempo però ci si diverte anche 😀

A parte questi aspetti, in questa sezione non voglio parlare del debug delle animazioni ovvero di tutte quelle attività che puoi fare per capire come migliorare la tua animazione o anche soltanto correggere un comportamento inaspettato.

Quando scrivo “prenditi il tuo tempo” non intendo soltanto dedicare del tempo per apprendere questa nuova sintassi e imparare a gestirla, ma piuttosto voglio consigliarti di rallentare le animazioni. Se l’animazione nella pagina dura 3 secondi, mentre lavori assicurati di rallentarla almeno a 6 secondi perché così facendo sarai in grado di analizzare meglio il comportamento dell’animazione e di scoprire velocemente se in alcuni punti non si comporta come desiderato.

Altro aspetto che voglio mettere in luce è l’importanza dello strumento che stai utilizzando: il tuo browser.

Se stai per iniziare a lavorare con le animazioni ti sconsiglio di usare Safari o Edge (figuriamoci Internet Explorer) e non tanto perché sto facendo una guerra contro delle compagnie in preciso ma soprattutto perché gli strumenti da sviluppatore che presentano questi browser non hanno le funzionalità avanzate che ti permetteranno di analizzare la tua animazione nel dettaglio.

Ti piacerebbe poterla mettere in pausa, scorrere la linea temporale con il tuo mouse e poter cambiare delle proprietà al volo per vederne il risultato?

Oggi fare tutte queste cose è possibile e il tutto risulta molto intuitivo, soltanto che non puoi farlo con i browser sopra citati. So che Chrome ha degli strumenti dedicati allo sviluppatore che permettono di ispezionare le animazioni in modi molto semplici però se vuoi un consiglio sincero molto meglio installare un browser creato appositamente per gli sviluppatori.

Sono anni ormai che sviluppo siti web e nonostante tutti gli strumenti e le funzionalità che Chrome può offrire non mi sono mai allontanato dall’uso costante di Firefox, da quando hanno poi rilasciato la versione Firefox Developer Edition non riesco più a utilizzare altri browser. Pensa che durante il lancio degli strumenti in grado di gestire le animazioni, Mozilla ha rilasciato un intero sito web per presentare e far utilizzare queste nuove funzionalità.

Come sempre, io non ti sto consigliando un altro browser perché ho soltanto delle antipatie però non posso elencare le mie motivazioni tutte le volte, se sei curioso di scoprire come mai ritengo Firefox Developer Edition il miglior strumento da utilizzare per noi sviluppatori, ti consiglio di leggere il nostro articolo.

Conclusioni

Siamo giunti al termine di questo articolo introduttivo dove ti è stato presentato la sintassi necessaria a definire i keyframe della nostra animazione, le proprietà essenziali che ti permetteranno di collegare l’animazione creata al tuo elemento e in più hai anche ottenuto diversi suggerimenti utili che ti aiuteranno a creare delle animazioni più performanti e semplici da gestire.

Sei contento delle informazioni che hai ottenuto? Perché non condividere quindi questo articolo con i tuoi amici e colleghi, sono sicuro che ti ringrazieranno per le informazioni che avrai condiviso con loro!

Se poi sei ulteriormente interessato a conoscere tutti i segreti delle animazioni CSS, non esitare a farcelo sapere perché noi non vediamo l’ora di pubblicare del nuovo contenuto all’interno del nostro canale YouTube e come ti puoi immaginare le animazioni sono un ottimo argomento per un video 😉