Capturar animaciones: qué ve el panel y qué es invisible para él

El panel de animaciones es de los pocos de las DevTools que se abren pocas veces y que las pocas veces resuelven en dos minutos algo que de otro modo cuesta media hora de recargar y mirar. Su modelo es sencillo: escucha las animaciones que el motor del navegador gestiona, las agrupa por proximidad temporal, y te deja pararlas, rebobinarlas y modificarlas. La parte que hay que entender antes de usarlo es qué entra en esa definición y qué queda fuera, porque lo que queda fuera es invisible por completo.

Abrir y capturar

El panel de animaciones vive en el cajón inferior y se abre por su nombre desde el menú de comandos.

Empieza vacío y se llena solo: en cuanto ocurre una animación en la página, aparece como un grupo. No hay que pulsar ningún botón de grabación.

El agrupamiento es por proximidad temporal: las animaciones que empiezan aproximadamente a la vez se consideran un grupo y se presentan juntas en una misma línea de tiempo. Es la decisión de diseño que hace útil el panel, porque una transición de interfaz real no suele ser una animación sino cinco o diez que se coordinan, y verlas juntas es lo que permite juzgar si la coordinación funciona.

Cada grupo muestra su duración total, y al seleccionarlo se despliega su contenido: una fila por cada animación, con el elemento al que afecta, sus tiempos y sus fotogramas clave.

Los tres tipos que captura

El panel ve lo que el motor de animación del navegador gestiona, y eso son exactamente tres cosas.

Transiciones CSS. Un cambio de propiedad con una transición declarada. El grupo aparece en el momento en que cambia la propiedad.

Animaciones CSS con fotogramas clave. Declaradas con una regla de fotogramas clave y aplicadas con la propiedad de animación.

Animaciones creadas con la API de animaciones web. Las que se crean llamando al método de animación de un elemento, o construyendo la animación explícitamente.

Las tres tienen algo en común que es lo que las hace capturables: el navegador conoce su estado completo por adelantado. Sabe dónde empieza, dónde acaba, cuánto dura, con qué curva y en qué momento está. Por eso puede pararlas, rebobinarlas y cambiarles la velocidad.

Lo que es invisible

Todo lo demás. Y “todo lo demás” incluye una parte importante del movimiento que hay en la web.

El movimiento hecho con sincronización de fotograma. Una función que se ejecuta en cada fotograma y modifica un estilo no es una animación para el navegador: son mutaciones sucesivas de un estilo. No hay estado, no hay duración, no hay curva. El panel no puede mostrarlo porque no existe como objeto.

Las librerías que animan escribiendo estilos. Muchas librerías de animación funcionan así, y por tanto su trabajo no aparece en este panel. Algunas ofrecen la opción de usar la API de animaciones web por debajo, y en ese caso sí aparecen. Merece la pena comprobarlo, porque cambia la depurabilidad por completo.

Los cambios de estilo directos. Cambiar una clase que mueve algo instantáneamente no es una animación.

El desplazamiento. Ni el del usuario ni el programático.

La consecuencia práctica es una comprobación de diagnóstico muy útil: si algo se mueve en la página y no aparece en este panel, lo está moviendo código en el hilo principal. Eso es un dato de rendimiento importante, porque significa que ese movimiento se congelará en cuanto el hilo se ocupe, y también significa que no se puede depurar aquí.

Inventario desde la consola

Para saber qué animaciones hay activas sin depender del panel, la API expone una consulta directa.

// Inventario de todas las animaciones activas del documento
(() => {
  const listar = () => {
    const animaciones = document.getAnimations();
    if (!animaciones.length) return console.log('No hay animaciones activas.');

    const filas = animaciones.map((a, i) => {
      const t = a.effect?.getTiming?.() ?? {};
      const objetivo = a.effect?.target;
      return {
        i,
        nombre: a.animationName || a.transitionProperty || a.id || '(WAAPI)',
        estado: a.playState,
        elemento: objetivo
          ? objetivo.tagName.toLowerCase() + (objetivo.id ? '#' + objetivo.id : '')
          : '(sin objetivo)',
        duracionMs: typeof t.duration === 'number' ? Math.round(t.duration) : t.duration,
        retrasoMs: t.delay ?? 0,
        iteraciones: t.iterations ?? 1,
        curva: t.easing ?? '',
        tiempoMs: Math.round(a.currentTime ?? 0)
      };
    });
    console.table(filas);
    return animaciones;
  };

  window.animaciones = listar;
  window.pausarTodas = () => { document.getAnimations().forEach(a => a.pause()); console.log('Pausadas.'); };
  window.reanudarTodas = () => { document.getAnimations().forEach(a => a.play()); console.log('Reanudadas.'); };
  window.ralentizarTodas = (factor = 0.1) => {
    document.getAnimations().forEach(a => { a.updatePlaybackRate(factor); });
    console.log('Velocidad puesta a', factor);
  };

  listar();
  console.log('Disponibles: animaciones(), pausarTodas(), reanudarTodas(), ralentizarTodas(0.1)');
})();

Esa consulta devuelve exactamente el mismo conjunto que el panel captura, lo que la convierte en una comprobación rápida: si tu movimiento no está en esa lista, no está en el panel, y ya sabes por qué.

La función de pausa global tiene además un uso práctico inmediato que nada tiene que ver con depurar animaciones: congelar la interfaz para poder inspeccionar un estado intermedio. Un menú que aparece con una animación de entrada es difícil de inspeccionar mientras se mueve; pausar todas las animaciones lo deja quieto en mitad del recorrido.