Come creare animazioni CSS ad alte prestazioni

Kayce Basques

Rachel Andrew Technical Writer

Questa guida spiega come creare animazioni CSS ad alte prestazioni.

Consulta Perché alcune animazioni sono lente? per scoprire la teoria alla base di questi consigli.

Compatibilità del browser

Tutte le proprietà CSS consigliate in questa guida hanno un buon supporto cross-browser.

transform

opacity

will-change

Sposta un elemento

Per spostare un elemento, utilizza i valori delle parole chiave translate o rotation della proprietà transform.

Ad esempio, per far scorrere un elemento nella visualizzazione, utilizza translate.

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

Utilizza rotate per ruotare gli elementi. L'esempio seguente ruota un elemento di 360 gradi.

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Ridimensiona un elemento

Per ridimensionare un elemento, utilizza il valore della parola chiave scale della proprietà transform.

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

Modifica la visibilità di un elemento

Per mostrare o nascondere un elemento, utilizza opacity.

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Evita le proprietà che attivano il layout o il paint

Prima di utilizzare qualsiasi proprietà CSS per l'animazione (diversa da transform e opacity), determina l'impatto della proprietà sulla pipeline di rendering. Evita qualsiasi proprietà che attivi il layout o il paint, a meno che non sia assolutamente necessario.

Forza la creazione del livello

Come spiegato in Perché alcune animazioni sono lente?, il posizionamento degli elementi su un nuovo livello consente al browser di ridipingerli senza dover ridipingere il resto del layout.

In genere, i browser sono in grado di prendere decisioni corrette su quali elementi devono essere posizionati su un nuovo livello, ma puoi forzare manualmente la creazione dei livelli con la proprietà will-change. Come suggerisce il nome, questa proprietà indica al browser che questo elemento verrà modificato in qualche modo.

In CSS, puoi applicare will-change a qualsiasi selettore:

body > .sidebar {
  will-change: transform;
}

Tuttavia, la specifica suggerisce di aggiungere questo attributo solo agli elementi che stanno per cambiare. Ad esempio, questo potrebbe essere utilizzato per una barra laterale che l'utente può far scorrere verso l'interno e verso l'esterno. Se l'elemento non cambia di frequente, applica will-change utilizzando JavaScript quando è probabile che si verifichi una modifica. Assicurati di dare al browser il tempo necessario per eseguire le ottimizzazioni necessarie e rimuovi la proprietà quando la modifica è stata interrotta.

Per forzare la creazione di livelli in un browser senza supporto per will-change, puoi impostare transform: translateZ(0).

Esegui il debug di animazioni lente o con problemi

Chrome DevTools e Firefox DevTools possono aiutarti a capire perché le tue animazioni sono lente o presentano problemi.

Controlla se un'animazione attiva il layout

Un'animazione che sposta un elemento utilizzando un valore diverso da transform potrebbe essere lenta. L'esempio seguente mette a confronto un'animazione che utilizza transform con un'animazione che utilizza top e left.

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

Puoi testarlo nei due esempi seguenti ed esplorare le prestazioni utilizzando DevTools.

• Prima, con l'animazione top e left.
• Dopo, con transform.

Chrome DevTools

1. Apri il riquadro Prestazioni.
2. Registra le prestazioni di runtime durante l'animazione.
3. Esamina la scheda Riepilogo.

Se vedi un valore diverso da zero per Rendering nella scheda Riepilogo, potrebbe significare che l'animazione sta facendo eseguire al browser un lavoro di layout.

Firefox DevTools

In Firefox DevTools, la cascata può aiutarti a capire dove il browser sta impiegando tempo.

1. Apri il riquadro Prestazioni.
2. Avvia la registrazione delle prestazioni mentre l'animazione è in corso.
3. Interrompi la registrazione e controlla la scheda Waterfall.

Se vedi voci per Ricalcola stile, significa che il browser deve tornare all'inizio della cascata di rendering per eseguire il rendering dell'animazione.

Controlla la presenza di frame persi

1. Apri la scheda Rendering in Chrome DevTools.
2. Attiva la casella di controllo Misuratore FPS.
3. Osserva i valori mentre l'animazione è in esecuzione.

Presta attenzione all'etichetta Frames (Frame) nella parte superiore della UI del misuratore di FPS. Vengono visualizzati valori come 50% 1 (938 m) dropped of 1878. Un'animazione ad alte prestazioni ha una percentuale elevata, ad esempio 99%, il che significa che vengono ignorati pochi frame e l'animazione appare fluida.

Controlla se un'animazione attiva la visualizzazione

Alcune proprietà sono più costose da visualizzare per il browser rispetto ad altre. Ad esempio, tutto ciò che comporta una sfocatura (come un'ombra) richiede più tempo per la visualizzazione rispetto al disegno di una casella rossa. Queste differenze non sono sempre evidenti nel CSS, ma gli Strumenti per sviluppatori del browser possono aiutarti a identificare le aree che devono essere ridisegnate, nonché altri problemi di prestazioni relativi alla visualizzazione.

Chrome DevTools

1. Apri la scheda Rendering in Chrome DevTools.
2. Seleziona Evidenzia aggiornamenti.
3. Sposta il puntatore sullo schermo.

Se vedi l'intero schermo lampeggiare o aree evidenziate che ritieni non debbano cambiare, esamina ulteriormente la situazione.

Se devi determinare se una determinata proprietà sta causando problemi di prestazioni relativi alla pittura, il profiler di pittura di Chrome DevTools può aiutarti.

Firefox DevTools

1. Apri Impostazioni e aggiungi un pulsante della casella degli strumenti per Attiva/disattiva l'evidenziazione delle aree ridisegnate.
2. Nella pagina che vuoi ispezionare, attiva il pulsante e sposta il mouse o scorri per visualizzare le aree evidenziate.

Animazione nella fase di composizione

Se possibile, limita le animazioni a opacity e transform per mantenerle nella fase di composizione del percorso di rendering. Utilizza DevTools per verificare quale fase del percorso è interessata dalle tue animazioni.

Utilizza il profiler di visualizzazione per verificare se alcune operazioni di visualizzazione sono particolarmente costose. Se trovi qualcosa, controlla se una proprietà CSS diversa offre lo stesso aspetto con un rendimento migliore.

Utilizza la proprietà will-change con parsimonia e solo se riscontri un problema di prestazioni.