In questo articolo ti voglio spiegare con un esempio cosa sono CSS animation e keyframes. Ho creato un esempio appositamente fatto per te.

Iniziamo col dire che, prima di spostarsi su animazioni e keyframes, sarebbe opportuno conoscere il CSS nelle sue basi altrimenti imparare diventa impossibile e ti ridurrai ad un insieme di copia/incolla.

CSS Animation e Keyframes

Partiamo dalla definizione di Animation e Keyframes.

Dopo di che impariamo a fare qualcosa di tanto bello quanto questo:

CSS Animation

Le animazioni del CSS ti permettono di dare vita e quindi animare elementi HTML senza l’utilizzo di JavaScript, jQuery o quant’altro.

Lo scopo di una animazione è quello di darti la possibilità di cambiare per un numero infinito di volte lo stile che dai ad un elemento del tuo HTML.

Le animation funzionano attraverso i keyframes.

CSS Keyframes

I keyframes ci permettono di definire il cambiamento di stile nel tempo.

Una animation ha bisogno di aver indicato il keyframe di riferimento proprio perché è il keyframe che definisce la transizione degli stili.

Esempio CSS Animation e Keyframes

Vediamo il nostro esempio come è strutturato.

Abbiamo per prima cosa un po’ di HTML:

<div class="content-wrapper">
   <div class="mongolfiera"></div>
</div>

Ci sono 2 <div>:

Il primo fa da contenitore
Il secondo servirà per la mongolfiera

Il CSS

Dunque abbiamo un po’ di CSS. Vediamolo con ordine.

Per prima cosa definisco la classe “content-wrapper”:

.content-wrapper{
   width:600px;
   height:400px;
   background:url(https://www.paolodellaguzzo.com/wp-content/uploads/2017/10/mountainsmile.png) no-repeat bottom/100%;
}

Sto dando una larghezza ed un’altezza pre-impostata ed imposto come sfondo un’immagine che ho caricato nel mio spazio. Indico che l’immagine non va ripetuta e che si deve posizionare in basso con una dimensione del 100%.

Animation

A questo punto dobbiamo definire la classe “mongolfiera”:

.mongolfiera{
   width:70px;
   height:120px;
   background:url(https://www.paolodellaguzzo.com/wp-content/uploads/2017/10/hot-air-balloon.png) no-repeat top center/100%;
   animation: mongolfiera 60s ease infinite;
   position:relative;
   top:320px;
   left:30px;
}

Definisco in ordine:

La larghezza del <div>
L’altezza del <div>
Imposto lo sfondo che sarà il png di una mongolfiera. Non si dovrà ripetere, dovrà posizionarsi in alto nel suo spazio e centrato in orizzontale (top center) con una dimensione del 100%
Definisco l’animazione tramite animation.
Inserisco il nome dell’animazione, “mongolfiera” (questo è il nome che avrà il keyframe!).
La durata dell’animazione (animation-duration).
La modalità dell’animazione (animation-timing-function): il valore “ease” è il default ed indica un’animazione che parte lenta, aumenta di velocità e si conclude lentamente.
Il numero di iterazioni (animation-iteration-count) che definisce il numero di volte che si deve ripetere l’animazione, nel nostro caso “infinite”.
La posizione del <div> è “relative”
Di conseguenza possiamo impostare le proprietà “top” e “left”. Stiamo dando 320px di distanza dal “tetto” del <div> content-wrapper e 30px di distanza da sinistra.

Keyframe

Infine dobbiamo definire il keyframe “mongolfiera” impostato nella proprietà animation vista prima:

@keyframes mongolfiera {
   0% {
       left: 30px;
       top: 320px;
   }
   30% {
      left: 500px;
      top: 70px;
   }
   69% {
      left: 100px;
      top: 120px;
   }
   100% {
      left: 30px;
      top: 320px;
   }
}

Con la parola chiave @keyframes definiamo un keyframe che chiamiamo “mongolfiera”. Tale keyframe in ordine:

Imposta che la situazione al tempo 0, ovvero al 0% dell’animazione, ha le proprietà left e top impostate con i valori di 30 e 320 pixel.
Dunque al 30% dell’animazione stiamo dicendo che la mongolfiera dovrà avere la proprietà left pari a 500px e la proprietà top pari a 70px.
Ciò sta ad indicare che, avendo impostato 60 secondi di durata dell’animazione, in 18 secondi il <div> deve spostarsi da sinistra verso destra di ben 470px (da left pari a 30px a left pari a 500px). Inoltre la mongolfiera si deve alzare passando da 320px di spazio dal tetto e salire fino a 70px dal tetto.
Dopo di che al 69% del tempo trascorso il <div> lo vogliamo spostare fino ad arrivare a sinistra con uno spazio dal bordo di 100px e si deve abbassare leggermente dando 120px di spazio dal tetto. Al 69% del tempo sono passati quindi 41 secondi circa.
Infine alla conclusione dei 60 secondi vogliamo che la mongolfiera si trovi in basso dove era partita.

Avendo definito l’animazione con un “animation-iteration-count” infinito, tale animazione continuerà infinitamente il suo percorso.

Altri impieghi

CSS animation e keyframes ci permettono non solo di far muovere gli elementi, ma anche di fargli cambiare colore, visibilità, opacità ed insomma modificare tutte le proprietà del CSS.

E’ possibile anche definire un cambio di colore e di posizione insieme, così come un cambio di colore e di opacità insieme. Sei libero di fare quello che vuoi.

Durante l’utilizzo del keyframe non sei obbligato a specificare un cambiamento in percentuale, ma puoi anche definire solo 2 stati con le keyword “from” e “to”. Ad esempio un colore che deve variare da rosso a blu così da simulare una sirena.

Se vuoi approfondire di più il discorso e vuoi migliorarti con il CSS scoprendo tutti i trucchi del mestiere ti consiglio questo libro che si legge velocemente, scorre bene e contiene tutto quello che cerchi.

Conclusioni

Non so te, ma a me piacciono tantissimo questi giochi con il CSS. Sono divertenti ed è possibile creare tante cose interessanti appesantendo meno il browser rispetto alle animazioni che si vedevano fino a qualche anno fa.

Le CSS animation e keyframes sono una grande innovazione per rendere ancora più dinamica una pagina e dare visivamente un’ottima impressione all’utente.

Di conseguenza ti consiglio alcuni articoli che ti potrebbero interessare:

Se vuoi iscriviti alla newsletter e non ti perderai i nuovi articoli. Mando da 1 a 4 mail al mese ricapitolando dove siamo arrivati con ogni guida. Con la newsletter hai anche accesso a libri ed ebook gratuiti, così come a coupon Udemy ? .

Per dubbi o domande scrivimi nei commenti ? .

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).

Commenti