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.

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.

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.

@keyframes

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;
  }
}

Le proprietà animation

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

animation-duration

.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

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;
}

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.

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.

animation-iteration-count

.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.

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

animation-direction

.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.

animation-delay

.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.

animation-play-state

.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.

animation-fill-mode

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.

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.

Verifica le tue conoscenze

Verifica le tue conoscenze sulle animazioni