Debugger di animazioni e transizioni

Chrome DevTools → More tools → Animations (oppure Cmd+Shift+P → "Animations"). Il pannello registra le transizioni e le animazioni CSS mentre vengono eseguite, mostrandole su una timeline con controlli per lo scorrimento fotogramma per fotogramma e per la velocità di riproduzione.

Il pannello Animations offre velocità di riproduzione del 10%, 25% e 100%. Rallentare al 10% rivela problemi di temporizzazione, curve di easing errate e scatti invisibili alla velocità massima: è essenziale per il debug di sequenze complesse con più elementi.

Ogni animazione registrata viene visualizzata come una riga con il nome dell'elemento, la barra della durata, l'offset del ritardo e il numero di iterazioni. I rombi dei fotogrammi chiave mostrano i cambiamenti della funzione di temporizzazione. Passando il cursore su una riga viene evidenziato l'elemento nell'area visibile.

Trascini l'indicatore di riproduzione nel pannello Animations fino a un punto qualsiasi della timeline dell'animazione. La pagina esegue il rendering esatto di quel fotogramma: può bloccare qualsiasi animazione in qualunque momento per esaminare contemporaneamente le posizioni degli elementi, l'opacità e i valori di trasformazione nel pannello Computed.

Faccia clic su una riga dell'animazione per espanderla. I singoli fotogrammi chiave vengono visualizzati come rombi sulla timeline. Faccia clic su un rombo per passare alla regola @keyframes corrispondente nel pannello Styles e modificarla con un'anteprima in tempo reale.

Chrome DevTools mostra le curve cubic-bezier per ogni segmento dell'animazione. Faccia clic sull'icona della curva accanto a una funzione di temporizzazione nel pannello Styles per aprire l'editor cubic-bezier, quindi trascini i punti di controllo e osservi l'aggiornamento dell'animazione in tempo reale.

Le transizioni CSS vengono registrate nel pannello Animations quando vengono attivate. Attivi un effetto hover o una modifica di classe: il pannello acquisirà la transizione. Ne analizzi durata, ritardo e funzione di temporizzazione; è utile quando le transizioni non producono il risultato previsto ma non è chiara la loro origine.

Con Layer Borders attivato in Rendering (DevTools → Rendering), gli elementi animati sul proprio livello GPU mostrano bordi verdi. Le animazioni non composte (che animano width, top o color) non mostrano alcun bordo del livello e possono causare lampeggiamenti durante il painting, visibili con Paint Flashing attivato.

Registri un profilo Performance durante l'animazione. Nel flame chart, cerchi eventi Paint o Layout lunghi che corrispondono ai fotogrammi dell'animazione. Le animazioni eseguite solo dal compositor (transform/opacity) compaiono esclusivamente come eventi Composite Layer: sono rapide e non richiedono il painting.

Le animazioni JavaScript che utilizzano rAF compaiono nel pannello Performance, nella sezione Frames. Callback rAF di durata superiore a 16 ms causano la perdita di fotogrammi. Analizzi il profilo della callback per individuare i calcoli costosi e, se possibile, li sposti dal thread principale utilizzando Web Workers.

La Web Animations API (element.animate()) e le librerie basate su WAAPI compaiono nel pannello Animations insieme alle animazioni CSS. Il pannello non è in grado di distinguere l'origine, CSS o WAAPI, ma i controlli per lo scorrimento della timeline e la riproduzione al rallentatore funzionano per entrambe.

Che cosa consente di fare lo scorrimento dell'indicatore di riproduzione nel pannello Animations?

Il pannello Animations di DevTools registra transizioni e animazioni CSS con una timeline navigabile fotogramma per fotogramma, velocità di riproduzione variabile, ispezione dei fotogrammi chiave e modifica delle curve cubic-bezier. In combinazione con la profilazione tramite Performance e la visualizzazione dei livelli, offre strumenti completi per il debug della correttezza e delle prestazioni delle animazioni CSS.