CSS
animazioni

Sintassi

• transition: <property> <duration> <timing-function> <delay>;
• @keyframes <identifier>
• [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*

Parametri

Animazioni con la proprietà di transizione

Utile per animazioni semplici, la proprietà di transition CSS consente alle proprietà CSS basate su numero di animare tra stati.

Esempio

.Example{
    height: 100px;
    background: #fff;
}

.Example:hover{
    height: 120px;
    background: #ff0000;
}

Visualizza risultato

Per impostazione predefinita, passando con il mouse su un elemento con la classe .Example , l'altezza dell'elemento salta 120px a 120px e il colore di sfondo 120px rosso ( #ff0000 ).

Aggiungendo la proprietà di transition , è possibile che queste modifiche si verifichino nel tempo:

.Example{
    ...
    transition: all 400ms ease;
}

Visualizza risultato

Il valore all applica la transizione a tutte le proprietà compatibili (basate sui numeri). Qualsiasi nome struttura compatibile (ad esempio height o top ) può essere sostituito per questa parola chiave.

400ms specifica il tempo richiesto dalla transizione. In questo caso, il cambio di altezza dell'elemento richiederà 400 millisecondi.

Infine, la ease valore è la funzione di animazione, che determina come viene riprodotta l'animazione. ease significa iniziare lentamente, accelerare, quindi terminare lentamente. Altri valori sono linear , ease-out e ease-in .

Compatibilità tra browser

La proprietà di transition è generalmente ben supportata su tutti i principali browser, ad eccezione di IE 9. Per le versioni precedenti dei browser basati su Firefox e Webkit, utilizzare i prefissi dei fornitori in questo modo:

.Example{
    transition:         all 400ms ease;
    -moz-transition:    all 400ms ease;
    -webkit-transition: all 400ms ease;
}

Nota: la proprietà di transition può animare le modifiche tra due valori numerici, indipendentemente dall'unità. Può anche transitare tra unità, come da 100px a 50vh . Tuttavia, non può transitare tra un numero e un valore predefinito o automatico, come la transizione dell'altezza di un elemento da 100px a auto .

Aumentare le prestazioni dell'animazione usando l'attributo `will-change`

Quando crei animazioni e altre azioni pesanti in GPU, è importante comprendere l'attributo will-change .

Entrambi i fotogrammi chiave CSS e la proprietà di transition utilizzano l'accelerazione GPU. Le prestazioni aumentano scaricando i calcoli sulla GPU del dispositivo. Questo viene fatto creando dei layer di vernice (parti della pagina che vengono singolarmente renderizzati) che vengono scaricati nella GPU per essere calcolati. La proprietà will-change dice al browser cosa si animerà, consentendo al browser di creare aree di disegno più piccole, aumentando così le prestazioni.

La proprietà will-change accetta un elenco di proprietà separate da virgola da animare. Ad esempio, se hai intenzione di trasformare un oggetto e modificarne l'opacità, devi specificare:

.Example{
    ...
    will-change: transform, opacity;
}

Nota: utilizzare will-change con parsimonia. L'impostazione will-change per ogni elemento di una pagina può causare problemi di prestazioni, poiché il browser potrebbe tentare di creare livelli di pittura per ogni elemento, aumentando notevolmente la quantità di elaborazione eseguita dalla GPU.

Animazioni con fotogrammi chiave

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

Esempi di sintassi

Il nostro primo esempio di sintassi mostra l'animazione della proprietà abbreviata utilizzando tutte le proprietà / parametri disponibili:

  animation: 3s         ease-in           1s      2                 reverse     both        paused       slidein;
  /*         duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name   */

Il nostro secondo esempio è un po 'più semplice e mostra che alcune proprietà possono essere omesse:

  animation: 3s         linear            1s      slidein;
  /*         duration | timing-function | delay | name   */

Il nostro terzo esempio mostra la dichiarazione più minimale. Nota che il nome dell'animazione e la durata dell'animazione devono essere dichiarati:

  animation: 3s         slidein;
  /*         duration | name */

Vale anche la pena ricordare che quando si utilizza l'animazione stenografia l'ordine delle proprietà fa la differenza. Ovviamente il browser potrebbe confondere la durata con il ritardo.

Se la brevità non è la tua passione, puoi anche saltare la proprietà stenografia e scrivere ciascuna proprietà individualmente:

animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
animation-name: slidein;