Animazioni

L'animazione è un ottimo modo per mettere in evidenza elementi interattivi e aggiungere interesse e divertenti per i tuoi progetti. In questo modulo, scopri come aggiungere e controllare di animazione con CSS.

A volte vedete dei piccoli aiutanti nelle interfacce che offrono informazioni sulla sezione in cui si trova quando fai clic su di essi. Questi spesso hanno un che lampeggia per segnalare in modo discreto che le informazioni sono presenti dovrebbe interagire. Questo modulo mostra come creare questi elementi di supporto e altre animazioni utilizzando CSS.

Le icone che lampeggiano sono un modo per assicurarti che gli utenti presta attenzione alle informazioni importanti.

Puoi utilizzare CSS per impostare una sequenza di animazione con fotogrammi chiave. Queste sequenze possono essere animazioni base con uno 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 l'animazione. ai timestamp di una sequenza temporale.

Ad esempio, di seguito è riportata la sequenza temporale dell'Assistente Google che lampeggia punto. L'animazione viene eseguita. per 1 secondo e ha 2 stati.

Gli stati dell'animazione pulsante nel periodo di tempo di 1 secondo
Gli stati dell'animazione lampeggiante.

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

Lo stesso diagramma di prima, ma questa volta con i fotogrammi chiave
Animazione lampeggiante con i fotogrammi chiave.

@keyframes

Supporto dei browser

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Origine

Servizio di shopping comparativo @keyframes si basano sullo stesso concetto dei fotogrammi chiave dell'animazione.

Di seguito è riportato un esempio con due stati:

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

La prima parte importante è identificatore personalizzato (custom-ident), il nome della regola dei 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 in qualsiasi altro punto del codice CSS.

All'interno della regola dei fotogrammi chiave, from e to sono parole chiave che rappresentano 0% e 100%, che rappresentano 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 nel periodo di tempo. Nell'esempio dell'assistente lampeggiante, ci sono due stati che si traducono in due fotogrammi chiave. Ciò significa che all'interno della regola dei fotogrammi chiave sono presenti due posizioni per rappresentano le modifiche per ciascuno di questi fotogrammi chiave.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}
Prova a modificare la regola pulse per vedere come funziona l'animazione modifiche.

Le proprietà animation

Supporto dei browser

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Origine

Per utilizzare @keyframes in una regola CSS, puoi definire diverse animazioni singolarmente o utilizza la animation una proprietà abbreviata.

animation-duration

Supporto dei browser

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Origine

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

Il parametro animation-duration definisce la durata della sequenza temporale di @keyframes sotto forma di valore temporale. Il valore predefinito è 0 secondi, il che significa che l'animazione è ancora in esecuzione, ma lo sarà anche rapidamente. Non puoi utilizzare valori temporali negativi.

animation-timing-function

Supporto dei browser

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Origine

Per aiutarti a ricreare il movimento naturale nell'animazione, puoi utilizzare funzioni di temporizzazione che calcolare la velocità di un'animazione in ogni punto. Spesso i valori calcolati curva, in modo che l'animazione venga eseguita a velocità variabili nel corso della animation-duration e fare in modo che l'elemento sembri rimbalzare se il browser calcola un valore superiore a quelli definiti in @keyframes.

Esistono diverse parole chiave disponibili come preimpostazioni 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;
}
Prova a cambiare la funzione di temporizzazione dell'animazione usi.

I valori delle funzioni di easing appaiono in una curva perché l'easing viene calcolato utilizzando una Curva di Bézier, un tipo di funzione utilizzato per modellare la velocità. Ciascuno dei tempi parole chiave di funzione, come 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 ciascuna parte della curva lungo gli assi X e Y.

Curva di Bézier in un grafico a progressione e a tempo
Esempio di curva di Bézier.

Comprendere le curve di Bézier è complicato. Strumenti visivi come generator di Lea Verou, sono molto utili.

La funzione di easing di steps

A volte potresti voler avere un controllo più granulare dell'animazione, che si spostano a intervalli anziché lungo una curva. La funzione di easing di steps() consente Suddividi la sequenza temporale in intervalli definiti di uguale durata.

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

Il primo argomento sono i passi numerici. Se ci sono lo stesso numero di come passaggi, ogni fotogramma chiave viene riprodotto in sequenza per l'esatta durata di passaggio, senza passare da uno stato all'altro. Se il numero di fotogrammi chiave è inferiore ai passaggi, il browser aggiunge altri passaggi tra fotogrammi chiave a seconda del secondo argomento.

Il secondo argomento è la direzione. Se viene impostato su end, che corrisponde al valore per impostazione predefinita, i passaggi terminano alla fine della sequenza temporale. Se viene impostato su start, il primo passaggio dell'animazione viene completato non appena si avvia, termina un passaggio prima di end.

Confronta le animazioni con e senza passaggi.

animation-iteration-count

Supporto dei browser

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Origine

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

Il parametro animation-itration-count definisce quante volte deve essere eseguita la sequenza temporale @keyframes durante l'animazione. Il valore predefinito è 1, il che significa che l'animazione si interrompe raggiunge la fine della sequenza temporale. Questo valore non può essere un numero negativo.

Prova a modificare il numero di iterazioni per questa animazione.

Per eseguire il loop dell'animazione, imposta il conteggio delle iterazioni su infinite. Ecco come l'animazione lampeggiante all'inizio di questa lezione funziona.

L'animazione lampeggiante viene ripetuta all'infinito.

animation-direction

Supporto dei browser

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Origine

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

Puoi impostare la direzione in cui la sequenza temporale viene eseguita sui fotogrammi chiave con animation-direction, che assume i seguenti valori:

  • normal: il valore predefinito, che è Inoltra.
  • reverse: viene eseguito a ritroso sulla sequenza temporale.
  • alternate: per ogni iterazione dell'animazione, la sequenza temporale si alterna tra che corre avanti e indietro.
  • alternate-reverse: come alternate, ma l'animazione inizia con la sequenza temporale a ritroso.
Prova a modificare la direzione dell'animazione.

animation-delay

Supporto dei browser

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Origine

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

L'opzione animation-delay definisce il tempo che il browser attende prima di avviare l'animazione. Come per la proprietà animation-duration, anche questo richiede un valore temporale.

A differenza di animation-duration, puoi definire animation-delay come un valore negativo che fa iniziare l'animazione dal punto corrispondente nella sequenza temporale. Ad esempio, se l'animazione dura 10 secondi e imposti animation-delay a -5s, l'animazione inizia a metà strada sequenza temporale.

Prova a modificare il ritardo dell'animazione.

animation-play-state

Supporto dei browser

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Origine

.my-element:hover {
    animation-play-state: paused;
}

Lo stato-riproduzione-animazione consente di riprodurre e mettere in pausa l'animazione. Il valore predefinito è running. Se lo imposti su paused, l'animazione viene messa in pausa.

Tieni il cursore sull'elemento animato per mettere in pausa l'animazione.

animation-fill-mode

Supporto dei browser

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Origine

La modalità animation-fill-mode definisce quali valori nella sequenza temporale di @keyframes vengono mantenuti prima del all'inizio o alla fine dell'animazione. Il valore predefinito è none, il che significa che Al completamento 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: il primo e l'ultimo fotogramma chiave vengono mantenuti.
Prova a cambiare la modalità di riempimento.

La forma abbreviata di animation

Anziché definire ciascuna proprietà separatamente, puoi definirla in un animation, che ti consente di definire le proprietà dell'animazione nella sezione 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'utilizzo delle animazioni

Gli utenti possono impostare il proprio sistema operativo in modo che preferisci i movimenti ridotti durante l'interazione con applicazioni e siti web. Puoi rilevare questa preferenza usando il comando prefers-reduced-motion query supporti:

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

Questa non è necessariamente una preferenza relativa all'assenza di animazioni. È una preferenza per meno in particolare un'animazione meno imprevista. Puoi scoprire di più su questa preferenza e il rendimento complessivo guida all'animazione.

Prova un esempio di animazione ridotta.

Verifica le tue conoscenze

Verifica le tue conoscenze sulle animazioni

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

No

Le parole chiave from e to sono le stesse di:

start e end.
0 e 1
0% e 100%.

animation-timing-function è anche comunemente noto come:

Ritardo
Facilitazione
Tempistica dinamica

Qual è il numero minimo di fotogrammi chiave richiesto all'interno di un'animazione @keyframes?

3
1
2
4