Le animazioni in CSS consentono di creare effetti visivi che modificano gradualmente le proprietà CSS di uno o più elementi in un certo periodo di tempo. Puoi utilizzarle per animare gli elementi HTML. Ad esempio, prova a passare sopra con il mouse su questa palla:
Le proprietà CSS necessarie per le animazioni sono le seguenti:
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation (abbreviazione)Vediamo, una ad una, queste proprietà.
Le animazioni CSS possono essere paragonate alle funzioni JavaScript: un'animazione deve essere "dichiarata" per poi essere utilizzata. Ecco quali sono i passaggi fondamentali:
@keyframes. In questo modo, si può scegliere il nome, in che modo avverrà l'animazione e che cosa verrà animato (una o più proprietà CSS).@keyframes rimarrà la stessa.La regola @keyframes descrive i vari stati che l'elemento attraversa durante l'animazione.
Per specificare i vari stati dell'animazione, si usa uno di questi due metodi:
0% indica l'inizio dell'animazione, il punto 100% ne indica la fine. Puoi sempre utilizzare delle percentuali intermedie, come 50%.fromtoLa struttura base è questa:
@keyframes animazione {
from {
opacity: 0;
}
to {
opacity: 1;
}
}In questo esempio, il nome dell'animazione è animazione. La parola chiave from indica che l'animazione partirà da opacity:0 (quindi l'elemento è invisibile) e terminerà con opacity:1. Abbiamo visto la proprietà opacity nella lezione sulla visibilità degli elementi.
Possiamo creare un'animazione a 3 step, ad esempio cambiando lo sfondo dell'elemento, con le percentuali:
@keyframes sfondo {
0% {
background-color: red;
}
50% {
background-color: yellow;
}
100% {
background-color: orange;
}
}In questo caso, lo sfondo cambia 3 volte: la prima volta diventa rossa all'inizio dell'animazione (0%), poi diventa gialla a metà (50%) e arancio alla fine (100%).
Puoi anche scegliere delle percentuali diverse da 0% e 100% (non sono obbligatorie da inserire), come 20% e 80%. Puoi anche inserire tutte le percentuali che preferisci, non esiste un limite di passaggi massimo.
Finora, abbiamo soltanto dichiarato l'animazione. Per eseguirla in un elemento, servono due proprietà essenziali: animation-name e animation-duration. Vediamo a cosa servono:
animation-name specifica il nome dell'animazione. Il nome deve essere lo stesso che abbiamo usato nella dichiarazione in @keyframes.animation-duration specifica la durata dell'animazione. L'unità di misura deve essere in secondi (s) o millisecondi (ms).Vediamo un esempio in cui cambia lo sfondo del <div>:
div {
background-color: red;
width: 100px;
height: 100px;
}
div:hover {
animation-name: sfondo;
animation-duration: 4s;
}
@keyframes sfondo {
0% {
background-color: orange;
}
100% {
background-color: yellow;
}
}Nell'esempio, grazie alla pseudo-classe :hover, quando l'utente passa il mouse sopra all'elemento, si attiva l'animazione sfondo e lo sfondo cambia: diventa subito arancio, poi durante i 4 secondi di animazione (impostati tramite animation-duration) lo sfondo diventa giallo. Quando l'animazione termina, lo sfondo ritorna rosso come era in origine.
La proprietà animation-delay in CSS è utilizzata per specificare un ritardo prima che un'animazione inizi. Il valore di tempo può essere espresso in secondi (s) o millisecondi (ms).
Ad esempio, questa animazione inizia due secondi dopo che il mouse passa sopra l'elemento:
div {
background-color: red;
width: 100px;
height: 100px;
}
div:hover {
animation-name: sfondo;
animation-duration: 4s;
animation-delay: 2s; /* Ritardo */
}
@keyframes sfondo {
0% {
background-color: orange;
}
100% {
background-color: yellow;
}
}La proprietà animation-iteration-count in CSS specifica quante volte un'animazione deve essere ripetuta su un elemento. Questa proprietà può accettare:
infinite: l'animazione si ripete all'infinito, senza mai fermarsi.Ad esempio, questo elemento ripete l'animazione 2 volte:
div {
background-color: lightgreen;
width: 100px;
height: 100px;
}
div:hover {
animation-name: sposta-elemento;
animation-duration: 4s;
animation-iteration-count: 2;
}
@keyframes sposta-elemento {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}Nell'esempio, l'elemento si sposta tramite translateX(), che abbiamo visto nella lezione delle trasformazioni 2D.
La proprietà animation-direction in CSS determina in quale direzione un'animazione deve essere eseguita.
I valori possibili sono quattro:
normal (valore predefinito): l'animazione viene eseguita in avanti, dall'inizio alla fine. Ogni animazione inizia dallo stato iniziale e termina con lo stato finale.reverse: l'animazione viene eseguita all'indietro, ovvero parte dallo stato finale e termina nello stato iniziale.alternate: l'animazione viene eseguita in avanti la prima volta, poi all'indietro nella successiva, poi in avanti, e così via.alternate-reverse: simile a alternate, ma la prima volta viene eseguita all'indietro e la successiva in avanti, e così via.Ecco come appaiono le diverse animazioni con un'animazione da width:0 a width:100%:
normalreversealternatealternate-reverseVediamo un esempio di animazione con reverse:
div {
background-color: lightgreen;
width: 100px;
height: 100px;
}
div:hover {
animation-name: sposta-elemento;
animation-duration: 4s;
animation-direction: reverse;
}
@keyframes sposta-elemento {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}Nell'esempio, l'animazione viene eseguita al contrario.
Nota: per i valori alternate e alternate-reverse, deve essere impostato un animation-iteration-count maggiore o uguale a 2. Se è impostato un valore di 1 o non è impostato, la proprietà animation-direction non avrà effetto.
La proprietà animation-timing-function in CSS definisce la velocità alla quale un'animazione progredisce durante il suo ciclo. I valori sono gli stessi di transition-timing-function che abbiamo visto nella lezione delle transizioni.
I valori possibili sono sette:
| Valore | Descrizione |
ease | L'animazione inizia lentamente, accelera al centro e rallenta verso la fine. Questo è il valore predefinito. |
linear | L'animazione avviene a velocità costante dall'inizio alla fine. |
ease-in | L'animazione inizia lentamente e finisce veloce. |
ease-out | L'animazione inizia velocemente e termina piano. |
ease-in-out | L'animazione è lenta sia all'inizio che alla fine, ma più veloce al centro. È un mix tra ease-in e ease-out. |
cubic-bezier() | Permette di creare un'animazione con una curva di velocità personalizzata. |
step-start | L'animazione avviene immediatamente senza transizione graduale, saltando direttamente al valore finale all'inizio dell'animazione. |
step-end | L'animazione avviene immediatamente al termine del tempo di animazione, senza cambiare gradualmente durante la durata. |
steps() | Divide l'animazione in un numero specifico di passaggi, creando un effetto a scatti. |
Ecco tutte le diverse tipologie di valori:
.ease {
animation-timing-function: ease;
}
.linear {
animation-timing-function: linear;
}
.ease-in {
animation-timing-function: ease-in;
}
.ease-out {
animation-timing-function: ease-out;
}
.ease-in-out {
animation-timing-function: ease-in-out;
}
.cubic-bezier {
animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.step-start {
animation-timing-function: step-start;
}
.step-end {
animation-timing-function: step-end;
}
.steps {
animation-timing-function: steps(5, end);
}Ecco come appare la differenza tra le animazioni:
Il valore cubic-bezier() è una funzione di CSS che permette di creare animazioni di velocità personalizzate, consentendo di modificare come un'animazione accelera e decelera. Questa funzione richiede quattro valori numerici che definiscono la curva di Bézier (ecco il perché del suo nome).
La sintassi è: cubic-bezier(x1, y1, x2, y2). Vediamo quali sono i parametri:
La funzione steps() in CSS è usata per creare animazioni a scatti (invece che fluide). Quando usi steps(), l'animazione viene suddivisa in un numero specifico di passaggi, che sono simili a una serie di fotogrammi.
La sintassi è: steps(numeroDiStep, skip). Il numeroDiStep indica in quanti passaggi deve essere divisa l'animazione. Lo skip è facoltativo e indica quale passaggio deve essere tralasciato:
start indica che l'animazione inizia subito con il primo passaggio (non intercorre del tempo tra il "passaggio 0" e il primo).end (default) indica che l'animazione termina con l'ultimo passaggio.La proprietà animation-fill-mode in CSS determina come lo stile di un elemento viene applicato prima, durante e dopo l'esecuzione di un'animazione. In altre parole, controlla lo stato dell'elemento durante le fasi in cui l'animazione non è attiva, ovvero prima che inizi e dopo che termina.
I valori accettati sono quattro:
none (valore di default): l'elemento non conserva nessuno degli stili animati prima che l'animazione inizi o dopo che è terminata. Gli stili sono applicati solo durante l'animazione stessa.forwards: dopo che l'animazione termina, l'elemento mantiene gli stili dell'ultimo fotogramma dell'animazione. Ad esempio, se un elemento si sposta da sinistra a destra, al termine dell'animazione, rimarrà nella posizione finale (a destra).backwards: prima che l'animazione inizi, l'elemento assume gli stili del primo fotogramma dell'animazione. Ciò significa che appena viene caricata la pagina, l'elemento prenderà immediatamente lo stile iniziale dell'animazione, anche se l'animazione non è ancora partita.both: l'elemento mantiene gli stili sia del primo fotogramma prima che l'animazione inizi, sia dell'ultimo fotogramma dopo che l'animazione termina. È una combinazione dei valori forwards e backwards.In questo esempio, alla fine dell'animazione l'elemento rimarrà a destra:
div {
width: 100px;
height: 100px;
background-color: coral;
animation-name: spostamento;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes spostamento {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}La proprietà animation abbrevia tutte le proprietà che abbiamo visto finora in un unico valore, più breve da scrivere.
La sintassi è: animation: animation-name duration timing-function delay iteration-count direction fill-mode. Ognuno dei valori corrisponde alle proprietà che abbiamo visto.
div {
width: 100px;
height: 100px;
background-color: lightseagreen;
animation: spostamento 3s ease-in-out 1s infinite alternate;
}
@keyframes spostamento {
from {
transform: translateX(0);
opacity: 0;
}
to {
transform: translateX(200px);
opacity: 1;
}
}Nell'esempio, l'animazione si chiama spostamento, dura 3 secondi, ha un ritardo di 1 secondo, viene eseguita all'infinito, avanti e indietro, con velocità ease-in-out.