L'animazione è un ottimo modo per evidenziare elementi interattivi e aggiungere interesse e divertimento ai tuoi progetti. In questo modulo, scopri come aggiungere e controllare gli effetti dell'animazione con CSS.
A volte, quando fai clic sulle interfacce sono presenti dei piccoli aiutanti che forniscono informazioni utili sulla sezione in cui si trovano. Questi spesso hanno un'animazione che lampeggia che ti informa che le informazioni sono presenti e con cui devono essere interagito. Questo modulo mostra come creare questi helper e altre animazioni utilizzando CSS.
Puoi utilizzare CSS per impostare una sequenza di animazione con fotogrammi chiave. Queste sequenze possono essere animazioni di base con un solo stato o sequenze complesse basate sul tempo.
Che cos'è un fotogramma chiave?
Nella maggior parte degli strumenti di animazione, i fotogrammi chiave sono il meccanismo utilizzato per assegnare gli stati dell'animazione ai timestamp su una sequenza temporale.
Ad esempio, ecco una sequenza temporale per il punto "helper" lampeggiante. L'animazione viene eseguita per 1 secondo e ha 2 stati.
Esiste un punto specifico in cui inizia e finisce ciascuno di questi stati dell'animazione. Devi mappare questi elementi nella sequenza temporale con i fotogrammi chiave.
@keyframes
Il CSS @keyframes
si basa sullo stesso concetto dei fotogrammi chiave dell'animazione.
Ecco un esempio con due stati:
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
La prima parte importante è l'identificatore personalizzato (custom-ident), il nome della regola per i fotogrammi chiave. L'identificatore in questo esempio è my-animation.
L'identificatore personalizzato funziona come il nome di una funzione,
consentendoti di fare riferimento alla regola dei fotogrammi chiave altrove nel codice CSS.
All'interno della regola dei fotogrammi chiave, from e to sono parole chiave che rappresentano 0% e 100%, ovvero l'inizio e la fine dell'animazione.
Potresti ricreare la stessa regola come segue:
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
Puoi aggiungere tutte le posizioni che vuoi durante il periodo di tempo. Nell'esempio di aiuto pulsante, ci sono due stati che si traducono in due fotogrammi chiave. Ciò significa che la regola dei fotogrammi chiave contiene due posizioni per rappresentare le modifiche per ciascuno di questi.
@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}
pulse per vedere come cambia l'animazione.Le proprietà animation
Per utilizzare @keyframes in una regola CSS, puoi definire singolarmente varie proprietà
di animazione oppure utilizzare la proprietà breve animation.
animation-duration
.my-element {
animation-duration: 10s;
}
La proprietà animation-duration definisce la durata della sequenza temporale @keyframes come valore temporale.
Il valore predefinito è 0 secondi, il che significa che l'animazione continua a essere eseguita, ma sarà troppo veloce per vederla. Non puoi utilizzare valori temporali negativi.
animation-timing-function
Per ricreare il movimento naturale nelle animazioni, puoi utilizzare le funzioni di temporizzazione che calcolano la velocità di un'animazione in ogni punto. I valori calcolati sono spesso curvi e fanno sì che l'animazione venga eseguita a velocità variabili nel corso di animation-duration e facendo sembrare l'elemento rimbalzare se il browser calcola un valore diverso da quello definito in @keyframes.
In CSS sono disponibili diverse parole chiave come preset in CSS, che vengono utilizzate come valore per
animation-timing-function:
linear, ease, ease-in, ease-out, ease-in-out.
.my-element {
animation-timing-function: ease-in-out;
}
I valori delle funzioni di easing sembrano curve perché l'easing viene calcolato utilizzando una curva di Bézier, un tipo di funzione utilizzato per modellare la velocità. Ogni parola chiave della funzione di temporizzazione, come ease, fa riferimento a una curva di Bézier predefinita. In CSS, puoi definire direttamente una curva di Bézier utilizzando la funzione cubic-bezier(), che accetta quattro valori numerici: x1, y1, x2, y2.
.my-element {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}
Questi valori tracciano ogni parte della curva lungo gli assi X e Y.
Comprendere le curve di Bézier è complicato. Gli strumenti visivi, come il generatore di Lea Verou, sono molto utili.
La funzione di easing di steps
A volte potresti voler controllare l'animazione in modo più granulare
spostandoti a intervalli anziché lungo una curva. La funzione di easing steps() consente di suddividere la sequenza temporale in intervalli definiti di durata uguale.
.my-element {
animation-timing-function: steps(10, end);
}
Il primo argomento è il numero di passaggi. Se il numero di fotogrammi chiave è lo stesso dei passaggi, ogni fotogramma chiave viene riprodotto in sequenza per l'esatta durata del passaggio, senza transizioni tra gli stati. Se ci sono meno fotogrammi chiave rispetto ai passaggi, il browser aggiunge passaggi tra i fotogrammi chiave in base al secondo argomento.
Il secondo argomento è la direzione. Se il criterio è impostato su end, che è il valore predefinito, i passaggi terminano alla fine della sequenza temporale. Se è impostato su start,
il primo passaggio dell'animazione viene completato non appena viene avviato, il che significa che
termina un passaggio prima della data end.
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
La proprietà animation-iterazione-count definisce il numero di volte in cui la sequenza temporale @keyframes deve essere eseguita durante l'animazione. Per impostazione predefinita, il valore è 1, il che significa che l'animazione si interrompe quando
raggiunge la fine della sequenza temporale. Questo valore non può essere un numero negativo.
Per fare in modo che l'animazione venga riprodotta in loop, imposta il conteggio delle iterazioni su infinite. Ecco come funziona l'animazione pulsante
dall'inizio della lezione.
animation-direction
.my-element {
animation-direction: reverse;
}
Puoi impostare la direzione di esecuzione della sequenza temporale sui fotogrammi chiave con animation-direction, che assume i seguenti valori:
normal: il valore predefinito, ovvero "forward".reverse: corre indietro sulla sequenza temporale.alternate: per ogni iterazione dell'animazione, la sequenza temporale si alterna tra corsa in avanti e corsa indietro.alternate-reverse: comealternate, ma l'animazione inizia con la sequenza temporale che scorre a ritroso.
animation-delay
.my-element {
animation-delay: 5s;
}
La proprietà animation-delay definisce il tempo di attesa del browser prima di avviare l'animazione.
Come per la proprietà animation-duration, questo richiede un valore temporale.
A differenza di animation-duration, puoi definire animation-delay come valore negativo, in modo da far iniziare l'animazione nel punto corrispondente nella sequenza temporale. Ad esempio, se l'animazione dura 10 secondi e imposti
animation-delay su -5s, l'animazione inizierà a metà della
sequenza temporale.
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
La proprietà animation-play-state
consente di riprodurre e mettere in pausa l'animazione.
Il valore predefinito è running. Se la imposti su paused, l'animazione viene messa in pausa.
animation-fill-mode
La proprietà animation-fill-mode definisce quali valori nella sequenza temporale @keyframes vengono mantenuti prima o dopo l'inizio dell'animazione. Il valore predefinito è none, il che significa che, al termine dell'animazione, i valori nella sequenza temporale vengono ignorati.
Ecco altre possibili opzioni:
forwards: l'ultimo fotogramma chiave viene mantenuto in base alla direzione dell'animazione.backwards: il primo fotogramma chiave viene mantenuto in base alla direzione dell'animazione.both: vengono mantenuti entrambi i fotogrammi chiave e l'ultimo fotogramma chiave.
La forma abbreviata animation
Anziché definire ogni proprietà separatamente, puoi definirle in una breve
animation, che ti consente di definire le proprietà dell'animazione nel
seguente ordine:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state
.my-element {
animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}
Considerazioni sull'uso delle animazioni
Gli utenti possono impostare il proprio sistema operativo in modo da preferire la riduzione del movimento quando interagiscono con applicazioni e siti web. Puoi rilevare questa preferenza utilizzando la query multimediale prefers-reduced-motion:
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
Non si tratta necessariamente di una preferenza relativa all'assenza di animazioni. È una preferenza per meno animazioni, soprattutto meno inaspettate. Per ulteriori informazioni su questa preferenza e sul rendimento complessivo, consulta la nostra guida all'animazione.
Verifica le tue conoscenze
Verifica le tue conoscenze delle animazioni
Il nome o l'identificatore personalizzato di un'animazione @keyframes è sensibile alle maiuscole?
SWOOP e swoop.Le parole chiave from e to sono uguali alle seguenti:
start e end.0% e 100%.from è uguale a 0% e to è uguale a 100%.0 e 1animation-timing-function è anche comunemente noto come:
Qual è il numero minimo di fotogrammi chiave richiesto in un'animazione @keyframes?