Home -» Webdesign -» Impariamo a creare le animazioni

Impariamo a creare le animazioni

Visita anche Risorse per i webmaster
archivio di risorse per la creazione di pagine web

Sommario:

Questa pagina è un completamento della guida Come creare un sito da zero

Premessa: le animazioni sono divertenti e attirano l'attenzione, ma .... non bisogna abusarne. Pagine con troppe animazioni non solo disturbano il visitatore, ma confondono la navigazione.
Le animazioni devono avere un loro scopo, che può essere quello di indicare un'azione, segnalare un percorso, evidenziare un messaggio ecc.

Cosa sono le animazioni CSS?

L'animazione applica un movimento ad un elemento di una pagina web consentendogli di passare gradualmente da uno stile ad un altro.
L'animazione può essere applicata a qualunque proprietà CSS e per un numero illimitato di volte.

Per creare un'animazione bisogna specificare il "keyframes" che contiene gli stili che l'elemento avrà in determinati momenti.

Quindi, ogni animazione deve essere associata, tramite il nome del keyframes, ad un elemento o a più elementi.

Esempi pratici

Associamo l'animazione "esempio" al <div> definito con la classe "prova". La durata dell'animazione è di 5 secondi e cambierà gradualmente il colore di sfondo del div da blu a giallo. L'animazione si ripeterà all'infinito.

ATTENZIONE: non dimenticate di applicare i vendor prefixes alle regole di stile!

HTML:

CSS::

.prova {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
animation-name: esempio;
animation-duration: 5s;
animation-iteration-count: infinite;
}

@keyframes esempio {
from {background-color: blue;}
to {background-color: yellow;}
}

Risultato:

Lo stesso risultato si può ottenere scrivendo il keyframes in questo modo:

@keyframes esempio {
0% {background-color: blue;}
100% {background-color: yellow;}
}

Spiegazione:
Abbiamo creato il div "prova" di dimensione 100x100px, gli abbiamo dato il colore di background di base "blue", abbiamo associato il nome del keyframes "esempio", abbiamo indicato la durata dell'animazione "5s" e abbiamo stabilito che deve ripetersi all'infinito.
Abbiamo creato il keyframes "esempio" che contiene l'informazione per far passare il colore da blue a yellow.
NOTA: al termine, l'animazione torna di default alle impostazioni del primo keyframe. Per fermarla alle impostazioni dell'ultimo keyframe è necessario aggiungere la regola "animation-fill-mode: forwards" alle regole di stile dell'elemento (la regola può dipendere da altre, vedi sotto i valori di fill-mode).
Se si desidera eliminare l'effetto scatto nel ritorno al primo keyframe, si puo aggiungere un passaggio intermedio in più impostare tale ritorno nell'ultimo keyframe.
Esempio:

@keyframes esempio {
0% {background-color: blue;}
50% {background-color: yellow;}
100% {background-color: blue;}
}

Sempre con un passaggio intermedio si puo aggiungere un altro cambio di colore (rosso):

@keyframes esempio {
0% {background-color: blue;}
50% {background-color:red;}
100% {background-color: yellow;}
}

Oppure:

@keyframes esempio {
from {background-color: blue;}
50% {background-color:red;}
to {background-color: yellow;}
}

Se volessimo aggiungere anche un cambio di posizione dell'elemento, scriveremmo:

@keyframes esempio {
0% {background-color: blue; left:0px; top:0px;}
50% {background-color:red; left:100px; top:0px;}
100% {background-color: yellow; left:0px; top:0px;}
}

Oppure:

@keyframes esempio2 {
from {background-color: blue; left:0px; top:0px;}
50% {background-color:red; left:100px; top:0px;}
to {background-color: yellow; left:0px; top:0px;}
}

Risultato:

Per aggiungere una pausa all'animazione possiamo ripetere la stessa regola di stile in due impostazioni temporali successive. Nell'esempio che segue indichiamo che la medesima regola di stile deve essere mantenuta nella fascia temporale che va dal 25% al 75%. Questo creerà l'effetto di pausa prolungata in quella fascia.
Esempio:

@keyframes esempio {
0% {background-color: blue; left:0px; top:0px;}
25% {background-color:red; left:100px; top:0px;}
75% {background-color:red; left:100px; top:0px;}
100% {background-color: yellow; left:0px; top:0px;}
}

Naturalmente, dovremo regolare la durata (animation-duration) secondo necessità.

Se volessimo aggiungere anche un effetto di cambio di dimensione dell'elemento, scriveremmo:

@keyframes esempio3 {
0% {transform: scale(0.1); background-color: blue; left:0px; top:0px;}
50% {transform: scale(1.0); background-color:red; left:100px; top:0px;}
100% {transform: scale(0.1); background-color: yellow; left:0px; top:0px;}
}

Oppure:

@keyframes esempio3 {
from {transform: scale(0.1); background-color: blue; left:0px; top:0px;}
50% {transform: scale(1.0); background-color:red; left:100px; top:0px;}
to {transform: scale(0.1); background-color: yellow; left:0px; top:0px;}
}

Risultato:

animation-fill-mode property

Questa proprietà definisce l'aspetto dell'elemento prima e dopo l'animazione.
Esempio:

animation-fill-mode: forwards;

Valori:

none = valore predefinito. Non viene applicato alcuno stile all'elemento ne' prima e ne' dopo l'esecuzione.
forwards = al termine dell'animazione, l'elemento mantiene le regole di stile impostate nell'ultimo keyframe (dipende da animation-direction e animation-iteration-count).
backwards = prima che inizi l'animazione, l'elemento assume lo stile impostato nel primo keyframe (dipende da animation-direction). In pratica, al termine dell'animazione, l'elemento torna allo stile iniziale.
both = al termine, l'animazione verrà ripetuta in senso contrario fino a tornare alle regole impostate nel primo keyframe (forwards e backwards insieme).

animation-direction property

Questa proprietà stabilisce la direzione di esecuzione dell'animazione: avanti, indietro, o in modo alternato.
Esempio:

animation-direction: reverse;

Valori:

normal = l'animazione viene riprodotta in avanti. Valore predefinito.
reverse = l'animazione viene riprodotta in direzione inversa (indietro).
alternate = l'animazione viene riprodotta prima in avanti e poi all'indietro.
alternate-reverse = l'animazione viene riprodotta prima all'indietro e poi in avanti.

animation-iteration-count property

Questa proprietà specifica il numero di volte in cui deve essere eseguita l'animazione.
Esempio:

animation-iteration-count: 3;

L'animazione verrà eseguita per 3 volte di seguito.
NOTA: il valore "infinite" fa sì che l'animazione si ripeta in continuazione.

animation-delay property

Questa proprietà stabilisce un ritardo, espresso in secondi, per l'inizio dell'animazione.
Esempio:

animation-delay: 4s;

L'animazione inizierà con 4 secondi di ritardo.

animation-timing-function property

Questa proprietà definisce la curva di velocità dell'animazione.
Esempio:

animation-timing-function: ease-in-out;

Valori:

linear = l'animazione ha la stessa velocità dall'inizio alla fine.
ease = l'animazione inizia lentamente, poi diventa veloce, quindi termina lentamente (valore predefinita).
ease-in = l'animazione inizia lentamente e la velocità aumenta fino al completamento.
ease-out = l'animazione inizia veloce e rallenta fino al completamento.
ease-in-out = l'animazione inizia lentamente, prosegue più veloce e rallenta di nuovo al termine.
cubic-bezier(x₁,y₁,x₂,y₂) = consente di definire i valori in una funzione cubic-bezier (vedi sotto).
steps(n,jump) = l'animazione avanza con salti di uguale lunghezza (vedi sotto).

Differenza tra ease e ease-in-out:
ease e ease-in-out sono simili tranne per il fatto che ease inizia leggermente più veloce di come finisce.

cubic-bezier() function

La funzione cubic-bezier permette di personalizzare al meglio le funzioni ease predefinite, ottenendo effetti di animazione avanzati.
Questa funzione permette di costruire delle curve partendo da punti dati ed è una funzione di temporizzazione per le transizioni.
La curva è definita dalle coordinate di quattro punti (p0, p1, p2, p3).
Il primo e il terzo punto sono fissi e già definiti sul grafico, con p0 (x=0, y=0) sempre in basso a sinistra e p3 (x=1, y=1) sempre in alto a destra.
Gli altri due punti (p1 e p2) vengono definiti dai valori attribuiti di volta in volta e sono i punti di controllo della curva. L'asse x rappresenta il tempo e l'asse y rappresenta l' avanzamento.
Scrivendo in questo modo:

animation-timing-function:cubic-bezier(x₁, y₁, x₂, y₂)

I primi due valori (x₁, y₁) sono le coordinate del punto p1, mentre i valori (x₂, y₂) sono le coordinate del punto p2. I punti p0 e p3, come già detto, sono fissi e predefiniti.

NOTA: tutti i valori linear e ease della proprietà "animation-timing-function" possono essere tradotti nella funzione cubic-bezier e questo confronto può aiutare a capire il concetto.

cubic-bezier(0.0, 0.0, 1.0, 1.0) = linear.
cubic-bezier(0.25, 0.1, 0.25, 1.0) = ease.
cubic-bezier(0.42, 0, 1.0, 1.0) = ease-in.
cubic-bezier(0, 0, 0.58, 1.0) = ease-out.
cubic-bezier(0.42, 0, 0.58, 1.0) = ease-in-out

Curva di Bezier per linear:

La velocità rimne la stessa per tutta l'animazione.

Curva di Bezier per ease:

L'inclinazione è netta nella curva, mentre il finale è più allungato. L'animazione entra ad un ritmo più veloce prima di uscire molto più gradualmente.

Curva di Bezier per ease-in:

L'animazione entra lentamente e poi accelera.

Curva di Bezier per ease-out:

L'animazione entra velocemente e poi rallenta..

Curva di Bezier per ease-in-out:

Curva di Bezier perfettamente simmetrica, il che significa che l'animazione aumenterà alla massima velocità e poi si abbasserà esattamente alla stessa velocità.
Il punto 1 è posizionato a 0,42 sull'asse x e a 0 sull'asse y, mentre il punto 2 è posizionato a 0,58 sull'asse x e 1.0 sull'asse y.
Questa curva è la combinazione delle due curve di Bezier ease-in e easeout.

steps function

L'animazione avanza con salti di uguale lunghezza.
Esempio:

animation-timing-function: steps(5, jump-start);

Risultato:

L'animazione effettua 5 salti e il primo salto avviene all'inizio.

Valori:

jump-start: funzione continua a sinistra, il primo salto avviene quando inizia l'animazione
jump-end: funzione continua a destra, l'ultimo salto avviene al termine dell'animazione
jump-none: non c'è nessun salto su nessuna delle due estremità
jump-both: i salti sono distribuiti in modo da lasciare un salto uguale alle due estremità

NOTA:

start = jump-start
end = jump-end
step-start = steps(1, jump-start)
step-end = steps(1, jump-end)

Abbreviazione

Le definizioni delle animazioni possono essere abbreviate scrivendo i valori uno dopo l'altro divisi da uno spazio. Unica regola da seguire è che il parametro "transition-delay" deve essere indicato dopo il parametro "transition-duration" (ma non necessariamente subito dopo). Inoltre, il parametro "transition-duration" è l'unico effettivamente richiesto per il funzionamento del codice.
Esempio:
animation: name 5s linear 2s infinite alternate;
Lettura:
name (=nome animazione) + 5s (=duration) + linear + 2s (=delay) + infinite + alternate.

ATTENZIONE: non dimenticate di applicare i vendor prefixes alle regole di stile!

Esempio finale

.elemento {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: example 5s linear 2s infinite alternate;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:100px; top:0px;}
50% {background-color:blue; left:100px; top:100px;}
75% {background-color:green; left:0px; top:100px;}
100% {background-color:red; left:0px; top:0px;}
}

Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.
Trovi anche: il "Generatore di animazioni" e il "Generatore di curve cubic-bezier".

Elenco argomenti di questa guida:

Altro di interesse