Un’introduzione all’animazione dei css Keyframes

Tempo di lettura: 7 minuti

Hai sentito almeno qualcosa sull’animazione in CSS3 usando la sintassi basata sui Keyframes. Il modulo di animazioni CSS3 nelle specifiche ha il potenziale per diventare una grande parte del web design.

Utilizzando le animazioni dei Keyframes CSS, gli sviluppatori possono creare animazioni fluide e gestibili che si comportano relativamente bene e che non richiedono risme di scripting. È solo un altro modo in cui CSS3 sta aiutando a risolvere un problema del mondo reale in modo elegante. Se non hai ancora iniziato a studiare la sintassi per le animazioni CSS, ecco la tua occasione per prepararti quando questa parte delle specifiche CSS3 supera la fase di bozza di lavoro .

In questo articolo, tratteremo tutte le parti importanti della sintassi e ti inseriremo nel supporto del browser in modo che tu sappia quando iniziare a usarlo.

Il @Keyframes At-Rule

La prima cosa insolita che noterai di qualsiasi codice di animazione CSS3 è la @keyframes. Secondo le specifiche, questa regola CSS @ specializzata è seguita da un identificatore (scelto dallo sviluppatore) a cui si fa riferimento in un’altra parte del CSS.

La regola @ e il suo identificatore sono quindi seguiti da una serie di set di regole (ovvero regole di stile con blocchi di dichiarazione, come nel normale codice CSS). Questo gruppo di set di regole è delimitato da parentesi graffe, che nidificano i set di regole all’interno della regola @, proprio come si farebbe con altre regole @ .

Ecco la regola @ che useremo:

@keyframes sunrise {
    /* rule sets go here … */
}

La parola sunrise  è un identificatore della nostra scelta che useremo per fare riferimento a questa animazione.

Si noti che non sto usando alcun prefisso fornitore per tutti gli esempi di codice qui e nella demo. Discuterò del supporto del browser alla fine di questo articolo, ma per ora renditi conto che attualmente nessun browser supporta questa sintassi standard, quindi per far funzionare il codice, devi includere tutti i prefissi del fornitore.

I Selettori Di Fotogrammi Chiave

Aggiungiamo alcuni set di regole all’interno della regola @:

@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}

Con l’aggiunta di questi nuovi set di regole, abbiamo introdotto il selettore di Keyframes. Nell’esempio di codice precedente, i selettori Keyframes sono 0%, 33%, 66%e 100%. I selettori 0%e 100%potrebbero essere sostituiti dalle parole chiave “da” e “a”, rispettivamente, e otterresti gli stessi risultati.

Ognuno dei quattro set di regole in questo esempio rappresenta un’istantanea diversa dell’elemento animato, con gli stili che definiscono l’aspetto dell’elemento in quel punto dell’animazione. I punti non definiti (ad esempio, dal 34% al 65%) comprendono il periodo di transizione tra gli stili definiti.

Sono state definite alcune regole che gli agenti utente devono seguire. Ad esempio, l’ordine dei Keyframes non ha importanza. I Keyframes verranno riprodotti nell’ordine specificato dai valori percentuali e non necessariamente nell’ordine in cui appaiono. Pertanto, se si posiziona il Keyframes “a” prima del Keyframes “da”, l’animazione continuerà a funzionare allo stesso modo. Inoltre, se un “a” o “da” (o il suo equivalente basato su percentuale) non viene dichiarato, il browser lo costruirà automaticamente. Pertanto, i set di regole all’interno della regola @ non sono regolati dalla cascata che si trova nei set di regole CSS standard.

I KEYFRAMES CHE ANIMANO IL SOLE

Allo scopo di animare il sole in questa demo, ho impostato quattro Keyframes. Come accennato, il codice sopra include commenti che descrivono le modifiche.

Nel primo Keyframes, il sole è rosso (come se stesse solo sorgendo o tramontando), ed è posizionato sotto terra (cioè non visibile). Naturalmente, l’elemento stesso deve essere posizionato relativamente o assolutamente in modo che i valori lefte bottomabbiano effetto. Ho anche usato z-index per impilare gli elementi (per assicurarmi, ad esempio, che il terreno sia sopra il sole). Nota che gli unici stili mostrati nei fotogrammi chiave sono gli stili animati. Gli altri stili (come z-indexe position, che non sono animati) sono dichiarati altrove nel foglio di stile e quindi non sono mostrati qui.

0% {
    bottom: 0; /* sun at bottom */
    left: 340px; /* sun at right */
    background: #f00; /* sun is red */
}

A circa un terzo dell’animazione (33%), il sole si trova sullo stesso piano orizzontale ma si è alzato e cambiato in un giallo-arancione (per rappresentare la piena luce del giorno):

33% {
    bottom: 340px; /* sun rises */
    left: 340px;
    background: #ffd630; /* changes color */
}

Quindi, a circa due terzi dell’animazione (66%), il sole si è spostato a sinistra di circa 300 pixel, ma rimane sullo stesso piano verticale. Notate qualcos’altro nel Keyframes 66%: ho ripetuto lo stesso colore dal fotogramma chiave 33%, per evitare che il sole ritorni al rosso troppo presto.

66% {
    bottom: 340px;
    left: 40px; /* sun moves left across sky */
    background: #ffd630; /* maintains its color */
}

Alla fine, il sole si anima gradualmente fino al suo stato finale (il rosso pieno) mentre scompare sotto terra.

100% {
    bottom: 0; /* sun sets */
    left: 40px;
    background: #f00; /* back to red */
}

Associare Il Nome Dell’animazione A Un Elemento

Ecco il prossimo pezzo di codice che aggiungeremo nel nostro esempio. Associa il nome dell’animazione (in questo caso, la parola sunrise) a un elemento specifico nel nostro HTML:

#sun.animate {
    animation-name: sunrise;
}

Qui stiamo introducendo la proprietà animation-name. Il valore di questa proprietà deve corrispondere a un identificatore in una regola @keyframes esistente , altrimenti non si verificherà alcuna animazione. In alcune circostanze, è possibile utilizzare JavaScript per impostarne il valore su none(l’unica parola chiave riservata per questa proprietà) per impedire il verificarsi di un’animazione.

L’oggetto che abbiamo preso di mira è un elemento con un id di sune una classe di animate. Il motivo per cui ho raddoppiato l’id e la classe in questo modo è che posso usare gli script per aggiungere il nome della classe animate. Nella demo, ho avviato la pagina staticamente; quindi, con il clic di un pulsante, a tutti gli elementi con un nome di classe particolare verrà aggiunta un’altra classe chiamata animate. Ciò attiverà tutte le animazioni contemporaneamente e consentirà all’utente di controllare l’animazione.

Certo, questo è solo un modo per farlo. Come nel caso di qualsiasi cosa in CSS o JavaScript, ci sono altri modi per ottenere lo stesso risultato.

Durata Dell’animazione E Funzione Di Temporizzazione

Aggiungiamo altre due righe al nostro CSS:

#sun.animate {
    animation-name: sunrise;
    animation-duration: 10s;
    animation-timing-function: ease;
}

È possibile specificare la durata dell’animazione utilizzando la proprietà animation-duration. La durata rappresenta il tempo impiegato per completare una singola iterazione dell’animazione. È possibile esprimere questo valore in secondi (ad esempio, 4s), millisecondi ( 2000ms) e secondi in notazione decimale ( 3.3s).

La specifica non sembra specificare tutte le unità di misura del tempo disponibili. Tuttavia, sembra improbabile che qualcuno abbia bisogno di qualcosa di più lungo di secondi; e anche allora, potresti esprimere la durata in minuti, ore o giorni semplicemente calcolando quelle unità in secondi o millisecondi.

La proprietà animation-timing-function, quando dichiarata per l’intera animazione, consente di definire il modo in cui un’animazione avanza su una singola iterazione dell’animazione. I valori per animation-timing-functionsono ease, linear, ease-out, step-starte molti altri, come descritto nelle specifiche .

Per il nostro esempio, ho scelto ease, che è l’impostazione predefinita. Quindi, in questo caso, possiamo tralasciare la proprietà e l’animazione avrà lo stesso aspetto.

Inoltre, puoi applicare una funzione di temporizzazione specifica a ciascun Keyframes, in questo modo:

@keyframes sunrise {
   0% {
      background: #f00;
      left: 340px;
      bottom: 0;
      animation-timing-function: ease;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
      animation-timing-function: linear;
   }

   66% {
      left: 40px;
      bottom: 340px;
      background: #ffd630;
      animation-timing-function: steps(4);
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
      animation-timing-function: linear;
   }
}

Una funzione di temporizzazione separata definisce ciascuno dei fotogrammi chiave sopra. Uno di questi è il valore steps, che fa avanzare l’animazione di un numero predeterminato di passaggi. Il Keyframes finale ( 100%o to) ha anche una propria funzione di temporizzazione, ma poiché è per lo stato finale di un’animazione in esecuzione in avanti, la funzione di temporizzazione si applica solo se l’animazione viene riprodotta al contrario.

Nel nostro esempio, non definiremo una funzione di temporizzazione specifica per ciascun Keyframes, ma ciò dovrebbe essere sufficiente per dimostrare che è possibile.

Conteggio E Direzione Dell’iterazione Dell’animazione

Aggiungiamo ora altre due righe al nostro CSS:

#sun.animate {
    animation-name: sunrise;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-direction: normal;
}

Ciò introduce altre due proprietà: una che indica all’animazione quante volte riprodurre e una che dice al browser se alternare o meno la sequenza dei frame su più iterazioni.

La proprietà animation-iteration-countè impostata su 1, il che significa che l’animazione verrà riprodotta una sola volta. Questa proprietà accetta un valore intero o infinite.

Inoltre, la proprietà  animation-direction è impostata su normal(impostazione predefinita), il che significa che l’animazione verrà riprodotta nella stessa direzione (dall’inizio alla fine) ogni volta che viene eseguita. Nel nostro esempio, l’animazione è impostata per essere eseguita una sola volta, quindi la proprietà non è necessaria. L’altro valore che potremmo specificare qui è alternate, che rende l’animazione riprodotta al contrario su ogni altra iterazione. Naturalmente, affinché il valore alternate abbia effetto, il conteggio dell’iterazione deve avere un valore 2o superiore.

Lo stato di ritardo e di gioco dell’animazione

Aggiungiamo altre due righe di codice:

#sun.animate {
    animation-name: sunrise;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-delay: 5s;
    animation-play-state: running;
}

Innanzitutto, introduciamo la proprietà animation-delay, che fa esattamente quello che pensi: ti consente di ritardare l’animazione di un determinato periodo di tempo. È interessante notare che questa proprietà può avere un valore negativo, che sposta parzialmente il punto iniziale attraverso l’animazione in base al valore negativo.

La proprietà animation-play-state, che potrebbe essere rimossa dalla specifica, accetta uno dei due valori possibili: runninge paused. Questo valore ha un uso pratico limitato. Il valore predefinito è runninge il valore pausedfa semplicemente iniziare l’animazione in uno stato di pausa, fino a quando non viene riprodotta manualmente. Non è possibile specificare uno stato paused nel CSS per un singolo Keyframes; il vero vantaggio di questa proprietà diventa evidente quando si utilizza JavaScript per modificarlo in risposta all’input dell’utente o qualcos’altro.

La Modalità Di Riempimento Dell’animazione

Aggiungeremo un’altra riga al nostro codice, la proprietà per definire la “modalità di riempimento”:

#sun.animate {
    animation-name: sunrise;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-delay: 5s;
    animation-play-state: running;
    animation-fill-mode: forwards;
}

La proprietà animation-fill-mode consente di definire gli stili dell’elemento animato prima e / o dopo l’esecuzione dell’animazione. Un valore di backwardsfa sì che gli stili nel primo fotogramma chiave vengano applicati prima dell’esecuzione dell’animazione. Un valore di forwardsfa sì che gli stili nell’ultimo fotogramma chiave vengano applicati dopo l’esecuzione dell’animazione. Un valore di bothfa entrambe le cose.

La proprietà animation-fill-mode non si trova nell’ultima bozza della specifica, ma si trova nella bozza degli editor . Inoltre, alcune versioni di Safari (5.0 e precedenti) applicheranno il valore di “forward” solo se sono stati definiti esattamente due fotogrammi chiave. Questi browser sembrano sempre usare il secondo fotogramma chiave come stato “in avanti”, che non è il modo in cui lo fanno gli altri browser; il comportamento corretto utilizza il fotogramma chiave finale. Questo problema è stato risolto in Safari 5.1.

Abbreviazione

Infine, la specifica descrive la notazione abbreviata per le animazioni, che combina sei delle proprietà sopra descritte. Questo include tutto tranne animation-play-statee animation-fill-mode.

Alcune Note Sulla Pagina Demo E Supporto Del Browser

Come accennato, il codice in questo articolo è per l’animazione di un solo elemento nella demo: il sole. Per vedere il codice completo, visita la pagina demo . Puoi visualizzare tutta la sorgente insieme o utilizzare le schede nella barra laterale per visualizzare il codice per i singoli elementi nell’animazione.

La demo non utilizza alcuna immagine e l’animazione non si basa su JavaScript. Il sole, la luna e il cloud sono tutti creati utilizzando CSS3 border-radiuse l’unico script sulla pagina è per le schede a destra e per il pulsante che consente agli utenti di avviare e ripristinare l’animazione.