Animazioni

L'animazione è un ottimo modo per evidenziare elementi interattivi e aggiungere interesse e divertimento ai tuoi progetti. In questo modulo scoprirai come aggiungere e controllare gli effetti di animazione con CSS.

A volte, nelle interfacce sono presenti piccoli aiutanti che, facendo clic, forniscono informazioni utili su quella particolare sezione. Questi spesso hanno un'animazione lampeggiante che ti comunica in modo discreto che le informazioni sono presenti e con cui è necessario interagire. Tuttavia, come puoi ottenere questo risultato con il CSS?

In CSS, puoi creare questo tipo di animazione utilizzando le animazioni CSS, che ti consentono di impostare una sequenza di animazione utilizzando i fotogrammi chiave. Le animazioni possono essere semplici, a uno stato o anche sequenze temporali complesse.

Che cos'è un fotogramma chiave?

Nei software di animazione, nei CSS e nella maggior parte degli altri strumenti che ti consentono di animare un elemento, i fotogrammi chiave sono il meccanismo utilizzato per assegnare gli stati dell'animazione ai timestamp, all'interno di una sequenza temporale.

Usiamo il "pulser" come contesto. L'intera animazione viene eseguita per 1 secondo e su due stati.

Esiste un punto specifico in cui inizia e finisce ciascuno di questi stati dell'animazione. Questi vengono mappati sulla sequenza temporale mediante i fotogrammi chiave.

@keyframes

Ora che sai cos'è un fotogramma chiave, queste informazioni ti aiuteranno a capire come funziona la regola @keyframes CSS. Di seguito è riportata una regola di base con due stati.

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

La prima parte da notare è l'ID personalizzato (identificatore personalizzato) o, in termini più umani, il nome della regola per i fotogrammi chiave. L'identificatore di questa regola è my-animation. L'identificatore personalizzato funziona come il nome di una funzione. che, come hai appreso nel modulo Funzioni, ti consente di fare riferimento alla regola per i fotogrammi chiave altrove nel codice CSS.

All'interno della regola per i 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. Utilizzando il contesto dell'esempio "pulser", esistono 2 stati, che si traducono in 2 fotogrammi chiave. Ciò significa che all'interno della regola per i fotogrammi chiave sono presenti due posizioni che rappresentano le modifiche per ognuno di questi fotogrammi chiave.

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

Proprietà animation

Per utilizzare @keyframes in una regola CSS, definisci varie proprietà dell'animazione oppure utilizza la proprietà abbreviata animation.

animation-duration

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

La proprietà animation-duration definisce la durata della sequenza temporale @keyframes. Deve essere un valore temporale. Il valore predefinito è 0 secondi, quindi l'animazione continua a essere eseguita, ma sarà troppo veloce per vederla. Non puoi aggiungere valori temporali negativi.

animation-timing-function

Per ricreare il movimento naturale nell'animazione, puoi usare funzioni di temporizzazione che calcolano la velocità di un'animazione in ciascun punto. I valori calcolati sono spesso curvi e fanno sì che l'animazione venga eseguita a velocità variabili nel corso di animation-duration. Inoltre, se viene calcolato un valore superiore a quello definito in @keyframes, l'elemento sembra rimbalzare.

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 sembrano curve con funzioni di easing, poiché l'interpolazione viene calcolata utilizzando una curva di Bézier, utilizzata 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 e gli strumenti visivi, come questo generatore di Lea Verou, sono molto utili.

La funzione di easing di steps

A volte potresti volere un controllo più granulare dell'animazione e, invece di spostarti lungo una curva, preferisci spostarti a intervalli. La funzione di easing di steps() ti consente di suddividere la sequenza temporale in intervalli uguali definiti.

.my-element {
    animation-timing-function: steps(10, end);
}

Il primo argomento è il numero di passaggi. Se i passaggi sono definiti come 10 e sono presenti 10 fotogrammi chiave, ogni fotogramma chiave verrà riprodotto in sequenza per l'esatto periodo di tempo, senza transizioni tra gli stati. Se non ci sono abbastanza fotogrammi chiave per i passaggi, vengono aggiunti i passaggi tra i fotogrammi chiave in base al secondo argomento.

Il secondo argomento è la direzione. Se il valore predefinito è end, 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 rispetto al giorno end.

animation-iteration-count

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

La proprietà animation-iteration-count definisce il numero di volte in cui deve essere eseguita la sequenza temporale @keyframes. Per impostazione predefinita, il valore è 1, il che significa che quando l'animazione raggiunge la fine della sequenza temporale, si interrompe alla fine. Il numero non può essere negativo.

Puoi utilizzare la parola chiave infinite per eseguire il loop dell'animazione, vale a dire come funziona la demo "pulser" all'inizio di questa lezione.

animation-direction

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

Puoi impostare la direzione in cui viene eseguita la sequenza temporale sui fotogrammi chiave utilizzando animation-direction:

• normal: il valore predefinito, ovvero in avanti.
• reverse: corre indietro sulla sequenza temporale.
• alternate: per ogni iterazione dell'animazione, la sequenza temporale verrà eseguita in sequenza in avanti o all'indietro.
• alternate-reverse: il contrario di alternate.

animation-delay

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

La proprietà animation-delay definisce il tempo di attesa prima di avviare l'animazione. Come per la proprietà animation-duration, accetta un valore temporale.

A differenza della proprietà animation-duration, puoi definire questo valore come un valore negativo. Se imposti un valore negativo, la sequenza temporale in @keyframes inizierà in quel punto. Ad esempio, se l'animazione dura 10 secondi e imposti animation-delay su -5s, inizierà da 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 e se lo imposti su paused, l'animazione verrà 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 quando l'animazione è completa, i valori nella sequenza temporale vengono ignorati. Altre opzioni sono:

• 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: segue le regole sia per forwards sia per backwards.

L'abbreviazione di animation

Invece di definire tutte le proprietà separatamente, puoi definirle in un modo breve animation, che ti consente di definire le proprietà dell'animazione nel seguente ordine:

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 sull'animazione

Gli utenti possono definire nel loro sistema operativo che preferiscono ridurre gli spostamenti riscontrati durante l'interazione con applicazioni e siti web. Questa preferenza può essere rilevata 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 alla mancanza di animazioni, ma piuttosto alla riduzione delle animazioni, soprattutto quelle impreviste. Per ulteriori informazioni su questa preferenza e sul rendimento complessivo, consulta questa guida all'animazione.

Verifica la tua comprensione

Verifica le tue conoscenze sulle animazioni