Animazioni

The CSS Podcast - 022: Animation

A volte nelle interfacce vengono visualizzati piccoli indicatori che, se selezionati, forniscono informazioni utili sulla sezione in questione. Spesso sono accompagnate da un'animazione pulsante per farti sapere in modo discreto che le informazioni sono presenti e che puoi interagire con esse. Questo modulo ti mostra come creare questi helper e altre animazioni utilizzando il 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 di animazione ai timestamp in una sequenza temporale.

Ad esempio, di seguito è riportata una sequenza temporale per il punto "di supporto" lampeggiante. L'animazione viene eseguita per 1 secondo e ha 2 stati.

Esiste un punto specifico in cui iniziano e terminano ciascuno di questi stati di animazione. Li mappi sulla sequenza temporale con i fotogrammi chiave.

@keyframes

Browser Support

• 43
• 12
• 16
• 9

Source

I @keyframes CSS si basano 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), ovvero il nome della regola keyframes. L'identificatore in questo esempio è my-animation. L'identificatore personalizzato funziona come un nome di funzione, consentendoti di fare riferimento alla regola dei fotogrammi chiave altrove nel codice CSS.

Nota: un <custom-ident> viene utilizzato in vari punti del CSS per consentirti di assegnare un nome alle varie parti. Questi identificatori sono sensibili alle maiuscole e, in alcuni casi, ci sono parole che non puoi utilizzare. Ad esempio, quando assegni un nome alle righe in CSS Grid, non puoi utilizzare la parola span.

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. Puoi ricreare la stessa regola nel seguente modo:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

Puoi aggiungere tutte le posizioni che vuoi nell'intervallo di tempo. Nell'esempio dell'helper pulsante, ci sono due stati che si traducono in duekeyframe. Ciò significa che all'interno della regola dei fotogrammi chiave sono presenti due posizioni per rappresentare le modifiche per ciascuno di questi fotogrammi chiave.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

Le proprietà animation

Browser Support

• 43
• 12
• 16
• 9

Source

Per utilizzare @keyframes in una regola CSS, puoi definire singolarmente varie proprietà di animazione o utilizzare la proprietà abbreviata animation.

animation-duration

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-duration: 10s;
}

La proprietà animation-duration definisce la durata della sequenza temporale @keyframes come valore di tempo. Il valore predefinito è 0 secondi, il che significa che l'animazione viene comunque eseguita, ma sarà troppo rapida per essere vista. Non puoi utilizzare valori di tempo negativi.

animation-timing-function

Browser Support

• 43
• 12
• 16
• 9

Source

Per contribuire a ricreare un movimento naturale nell'animazione, puoi utilizzare funzioni di temporizzazione che calcolano la velocità di un'animazione in ogni punto. I valori calcolati sono spesso curve, il che fa sì che l'animazione venga eseguita a velocità variabili nel corso di animation-duration e che l'elemento sembri oscillare se il browser calcola un valore superiore a quelli definiti in @keyframes.

In CSS sono disponibili diverse parole chiave come preset, 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 della funzione di attenuazione sembrano curvi perché l'attenuazione viene calcolata utilizzando una curva di Bézier, un tipo di funzione utilizzata per modellare la velocità. Ogni parola chiave della funzione di temporizzazione, ad esempio ease, fa riferimento a una curva di Bézier predefinita. In CSS, puoi definire una curva di Bézier direttamente 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 questo generatore di Lea Verou, sono molto utili.

La funzione di attenuazione steps

A volte potresti voler avere un controllo più granulare dell'animazione muovendoti a intervalli anziché lungo una curva. La funzione di steps() easing 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 sono presenti lo stesso numero di fotogrammi chiave e di passaggi, ogni fotogramma chiave viene riprodotto in sequenza per la durata esatta del passaggio, senza transizione tra gli stati. Se i fotogrammi chiave sono inferiori ai passaggi, il browser aggiunge passaggi tra i fotogrammi chiave in base al secondo argomento.

Il secondo argomento è la direzione. Se è 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 inizia, il che significa che termina un passaggio prima di end.

animation-iteration-count

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-iteration-count: 10;
}

La proprietà animation-iteration-count definisce il numero di volte in cui la sequenza temporale @keyframes deve essere eseguita durante l'animazione. Per impostazione predefinita, questo 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 ripetere l'animazione, imposta il conteggio delle iterazioni su infinite. Ecco come funziona l'animazione pulsante all'inizio di questa lezione.

animation-direction

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-direction: reverse;
}

Puoi impostare la direzione in cui la sequenza temporale viene applicata ai fotogrammi chiave con animation-direction, che può assumere i seguenti valori:

• normal: il valore predefinito, che è in avanti.
• reverse: scorre all'indietro nella cronologia.
• alternate: per ogni iterazione dell'animazione, la sequenza temporale alterna la riproduzione in avanti e quella all'indietro.
• alternate-reverse: come alternate, ma l'animazione inizia con la sequenza temporale in esecuzione all'indietro.

animation-delay

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-delay: 5s;
}

La proprietà animation-delay definisce il tempo di attesa del browser prima dell'avvio dell'animazione. Come la proprietà animation-duration, accetta un valore di tempo.

A differenza di animation-duration, puoi definire animation-delay come un valore negativo, in modo che l'animazione inizi nel punto corrispondente della sequenza temporale. Ad esempio, se l'animazione dura 10 secondi e imposti animation-delay su -5s, l'animazione inizia dalla metà della sequenza temporale.

animation-play-state

Browser Support

• 43
• 12
• 16
• 9

Source

.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 lo imposti su paused, l'animazione viene messa in pausa.

animation-fill-mode

Browser Support

• 43
• 12
• 16
• 9

Source

La proprietà animation-fill-mode definisce quali valori nella sequenza temporale @keyframes rimangono invariati prima dell'inizio o al termine dell'animazione. Il valore predefinito è none, il che significa che quando l'animazione è completa, i valori nella sequenza temporale vengono ignorati. Ecco altre possibili opzioni:

• forwards: l'ultimo fotogramma chiave persiste, in base alla direzione dell'animazione.
• backwards: il primo fotogramma chiave persiste, in base alla direzione dell'animazione.
• both: sia il primo che l'ultimo fotogramma chiave rimangono invariati.

La grafia abbreviata di animation

Anziché definire ogni proprietà separatamente, puoi definirle in un'abbreviazione animation, che ti consente di definire le proprietà di animazione nell'ordine seguente:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

Considerazioni per l'utilizzo dell'animazione

Gli utenti possono impostare il sistema operativo in modo da preferire movimenti ridotti quando interagiscono con applicazioni e siti web. Puoi rilevare questa preferenza utilizzando la query media prefers-reduced-motion:

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

Non si tratta necessariamente di una preferenza per l'assenza di animazione. Si tratta di una preferenza per meno animazioni, in particolare meno animazioni impreviste. Scopri di più su questa preferenza e sul rendimento complessivo nella nostra guida all'animazione.

Verificare di aver compreso

Verifica le tue conoscenze sulle animazioni

Il nome o l'identificatore personalizzato di un'animazione @keyframes è sensibile alle maiuscole?

Sì

🎉

No

CSS non consente a due animazioni di avere lo stesso nome, ma consente la coesistenza di SWOOP e swoop.

Le parole chiave from e to sono uguali a:

start e end.

Riprova.

0% e 100%.

from è uguale a 0% e to è uguale al 100%.

0 e 1

Riprova.

animation-timing-function è noto anche come:

Temporizzazione dinamica

Riprova.

Ritardo

Riprova.

Facilitazione

🎉

Qual è il numero minimo di keyframe richiesti all'interno di un'animazione @keyframes?

1

Il browser considererà lo stato corrente dell'elemento come fotogramma chiave, quindi è necessario almeno un fotogramma chiave.

2

Riprova.

3

Riprova.

4

Riprova.