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
: comealternate
, 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:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
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
Il nome o l'identificatore personalizzato di un'animazione @keyframes
è sensibile alle maiuscole?
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:
Qual è il numero minimo di fotogrammi chiave richiesto all'interno di un'animazione @keyframes
?