Depurador de animaciones y transiciones

Chrome DevTools → More tools → Animations (o Cmd+Shift+P → "Animations"). El panel registra las transiciones y animaciones de CSS a medida que se ejecutan y las muestra en una línea de tiempo con controles para recorrerla y ajustar la velocidad de reproducción.

El panel Animations ofrece velocidades de reproducción del 10 %, 25 % y 100 %. Reducir la velocidad al 10 % revela problemas de temporización, problemas en las curvas de aceleración y tirones que son invisibles a velocidad normal, algo esencial para depurar coreografías complejas con varios elementos.

Cada animación registrada aparece como una fila con el nombre de su elemento, una barra de duración, un desplazamiento de retraso y el número de iteraciones. Los rombos de keyframes muestran los cambios en la función de temporización. Al pasar el cursor sobre una fila, se resalta el elemento en la ventana gráfica.

Arrastre el cabezal de reproducción del panel Animations hasta cualquier punto de la línea de tiempo de la animación. La página representa exactamente ese fotograma: puede congelar cualquier animación en cualquier momento para inspeccionar simultáneamente las posiciones de los elementos, la opacidad y los valores de transform en el panel Computed.

Haga clic en una fila de animación para expandirla. Los keyframes individuales aparecen como rombos en la línea de tiempo. Haga clic en un rombo de keyframe para saltar a la regla @keyframes correspondiente en el panel Styles y editarla con una vista previa en directo.

Chrome DevTools muestra curvas cubic-bezier para cada segmento de animación. Haga clic en el icono de curva situado junto a una función de temporización en el panel Styles para abrir el editor cubic-bezier; arrastre los puntos de control y observe cómo se actualiza la animación en tiempo real.

Las transiciones CSS se registran en el panel Animations cuando se activan. Active un estado hover o cambie una clase y el panel capturará la transición. Inspeccione su duración, retraso y función de temporización; resulta útil cuando las transiciones no funcionan como deberían, pero no está claro cuál es su origen.

Con Rendering → Layer Borders activado (DevTools → Rendering), los elementos animados que están en su propia capa de GPU muestran bordes verdes. Las animaciones que no se componen (al animar width, top o color) no muestran ningún borde de capa y pueden provocar destellos de pintura, visibles con Paint Flashing activado.

Grabe un perfil de Performance durante la animación. En el gráfico de llamas, busque eventos Paint o Layout prolongados que se correlacionen con los fotogramas de la animación. Las animaciones que solo utilizan el compositor (transform/opacity) aparecen únicamente como eventos Composite Layer: son rápidas y no requieren pintura.

Las animaciones de JS que utilizan rAF aparecen en el panel Performance, en la sección Frames. Los callbacks de rAF largos que superan los 16 ms provocan pérdidas de fotogramas. Perfile el callback para encontrar cálculos costosos y, si es posible, muévalos fuera del hilo principal mediante Web Workers.

La Web Animations API (element.animate()) y las bibliotecas basadas en WAAPI aparecen en el panel Animations junto con las animaciones CSS. El panel no puede distinguir el origen —CSS o WAAPI—, pero los controles para recorrer la línea de tiempo y reproducir a cámara lenta funcionan con ambos.

El panel Animations de DevTools registra transiciones y animaciones CSS con una línea de tiempo que se puede recorrer manualmente, velocidad de reproducción variable, inspección de keyframes y edición de cubic-bezier. Combinado con la creación de perfiles de Performance y la visualización de capas, proporciona herramientas completas para depurar tanto la corrección como el rendimiento de las animaciones CSS.