CSS Animazioni con fotogrammi chiave


Esempio

Per le animazioni CSS multistadio, è possibile creare CSS @keyframes . I fotogrammi chiave consentono di definire più punti di animazione, chiamati fotogrammi chiave, per definire animazioni più complesse.


Esempio di base

In questo esempio, creeremo un'animazione di base di base che cicla tra tutti i colori.

@keyframes rainbow-background {
         0%     { background-color: #ff0000; }
     8.333%     { background-color: #ff8000; }
    16.667%     { background-color: #ffff00; }
    25.000%     { background-color: #80ff00; }
    33.333%     { background-color: #00ff00; }
    41.667%     { background-color: #00ff80; }
    50.000%     { background-color: #00ffff; }
    58.333%     { background-color: #0080ff; }
    66.667%     { background-color: #0000ff; }
    75.000%     { background-color: #8000ff; }
    83.333%     { background-color: #ff00ff; }
    91.667%     { background-color: #ff0080; }
    100.00%     { background-color: #ff0000; }
}

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

Visualizza risultato

Ci sono alcune cose diverse da notare qui. Innanzitutto, la sintassi @keyframes effettiva.

@keyframes rainbow-background{

Questo imposta il nome dell'animazione rainbow-background .

0%     { background-color: #ff0000; }

Questa è la definizione di un fotogramma chiave all'interno dell'animazione. La prima parte, lo 0% nel caso, definisce dove si trova il fotogramma chiave durante l'animazione. Lo 0% indica che è 0% del tempo di animazione totale dall'inizio.

L'animazione passerà automaticamente tra i fotogrammi chiave. Quindi, impostando il colore di sfondo successivo al 8.333% , l'animazione impiegherà senza intoppi l'8,333% delle volte per passare da un fotogramma chiave all'altro.

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

Questo codice associa la nostra animazione a tutti gli elementi che hanno la classe .RainbowBackground .

La proprietà di animazione effettiva accetta i seguenti argomenti.

  • nome-animazione : il nome della nostra animazione. In questo caso, rainbow-background
  • durata animazione : la durata dell'animazione, in questo caso 5 secondi.
  • animation-iteration-count (Opzionale) : il numero di volte in cui l'animazione verrà ripetuta. In questo caso, l'animazione continuerà all'infinito. Per impostazione predefinita, l'animazione verrà riprodotta una volta.
  • ritardo di animazione (facoltativo) : specifica il tempo di attesa prima dell'avvio dell'animazione. Il valore predefinito è 0 secondi e può assumere valori negativi. Ad esempio, -2s l'animazione per 2 secondi nel suo ciclo.
  • animation-timing-function (Opzionale) : specifica la curva di velocità dell'animazione. Il valore predefinito per ease , in cui l'animazione inizia lenta, diventa più veloce e finisce lento.

In questo particolare esempio, entrambi i fotogrammi chiave 0% e 100% specificano { background-color: #ff0000; } . Ovunque due o più fotogrammi chiave condividano uno stato, è possibile specificarli in una singola istruzione. In questo caso, le due linee 0% e 100% potrebbero essere sostituite con questa singola riga:

0%, 100%     { background-color: #ff0000; }

Compatibilità cross-browser

Per i browser più vecchi basati su WebKit, è necessario utilizzare il prefisso del venditore sia sulla dichiarazione @keyframes sia sulla proprietà di animation , in questo modo:

@-webkit-keyframes{}

-webkit-animation: ...