Inspecciona y modifica animaciones con la pestaña del panel lateral Animations de Chrome DevTools.
Descripción general
Para capturar animaciones, abre el panel Animations. Detecta automáticamente animaciones y las organiza en grupos.
El panel Animations tiene dos propósitos principales:
- Inspecciona animaciones. Ralentiza, vuelve a reproducir o inspecciona el código fuente de una animación grupo.
- Modifica animaciones. Modificar la sincronización, el retraso, la duración o los desplazamientos de los fotogramas clave de una grupo de animación. No se admite la edición de fotogramas clave ni Bézier.
El panel Animations es compatible con animaciones de CSS, transiciones de CSS, animaciones web y la API de View Transitions.
Aún no se admiten las animaciones de requestAnimationFrame.
¿Qué es un grupo de animación?
Un grupo de animación es un conjunto de animaciones que parecen estar relacionadas entre sí.
Por ahora, la Web no tiene un concepto real de animación grupal, por lo que los diseñadores y desarrolladores de movimiento componen animaciones individuales y las cronometran para que aparezcan como un efecto visual coherente. El panel Animations predice animaciones relacionadas según la hora de inicio (sin incluir los retrasos) y las agrupa una al lado de la otra.
En otras palabras, el panel Animations agrupa animaciones que se activan en el mismo bloque de secuencia de comandos, pero si son asíncronas, terminarán en grupos diferentes.
Abrir el panel Animaciones
Existen dos maneras de abrir el panel Animations:
- Selecciona
Personalizar y controlar Herramientas para desarrolladores > Más herramientas > Animaciones.
Abre el menú de comandos presionando una de las siguientes opciones:
- En macOS: Command + Mayúsculas + P
- En Windows, Linux o ChromeOS: Control + Mayúsculas + P
Luego, comienza a escribir
Show Animationsy selecciona el panel lateral correspondiente.
De forma predeterminada, el panel Animations se abre como una pestaña junto al panel lateral Console. Como pestaña del panel lateral, puedes usarla con cualquier panel o moverla a la parte superior de Herramientas para desarrolladores.
El panel Animations captura automáticamente las animaciones en curso cuando lo abres. Si se activa una animación cuando se carga la página o ya se detuvo, vuelve a cargar la página con el panel abierto.
Familiarízate con la IU del panel Animaciones
El panel Animations tiene cuatro secciones principales:
- Controles. Desde aquí, puedes bloquear Borrar todos los grupos de animación capturados, pausar Pausar o play_arrow Reanudar las animaciones, o cambiar la velocidad del grupo de animación seleccionado.
Descripción general. Muestra grupos de animación capturados de dos tipos marcados con íconos: mouse desplazado y schedule normal (basado en el tiempo).
Aquí, selecciona un grupo de animación para inspeccionarlo y modificarlo en el panel Details.
Cronograma. Según el tipo de grupo de animación, el cronograma puede ser uno de los siguientes:
- En píxeles para animaciones basadas en desplazamientos del mouse
- Debe expresarse en milisegundos para las animaciones basadas en el tiempo de schedule.
En el cronograma, puedes volver a reproducir volver a reproducir una animación, arrastrarla o saltar a un punto específico.
Detalles Inspecciona y modifica el grupo de animación seleccionado.
Para capturar una animación, actívala mientras el panel Animations esté abierto.
Cómo inspeccionar animaciones
Una vez que hayas capturado una animación, tendrás las siguientes maneras de volver a reproducirla:
- Coloca el cursor sobre la miniatura en el panel Descripción general para obtener una vista previa.
- Arrastra el cabezal de reproducción (barra vertical roja) para arrastrar la animación del viewport, o haz clic en cualquier lugar de Timeline para establecer el cabezal de reproducción en un punto específico. La animación se sigue reproduciendo si ya se estaba reproduciendo y, de lo contrario, se detiene.
- Selecciona el grupo de animación en el panel Descripción general (para que se muestre en Detalles)
panel) y presiona el botón
Replay. El
la animación se vuelve a reproducir en el viewport.
Haz clic en los botones 
Velocidad de la animación en la barra Controles para cambiar la velocidad de vista previa del grupo de animación seleccionado.
Ver detalles de la animación
Una vez que hayas capturado un grupo de animación, haz clic en él en el panel Descripción general para ver sus detalles.
En el panel Detalles, cada animación individual tiene su propia fila. Para ver el nombre completo del elemento correspondiente, cambia el tamaño de la columna de nombre.
Coloca el cursor sobre una animación para destacarla en el viewport. Haz clic en la animación para seleccionarla en Panel Elements.
Algunas animaciones se repiten indefinidamente si su propiedad animation-iteration-count se establece en infinite. En el panel Animations, se muestran sus iteraciones y definiciones.
La sección más oscura y a la izquierda de una animación es su definición. Las secciones a la derecha y más atenuadas representan iteraciones.
Por ejemplo, en la siguiente captura de pantalla, las secciones dos y tres representan iteraciones de la sección uno.
Si dos elementos tienen aplicada la misma animación, el panel Animations les asigna la
del mismo color. El color en sí es aleatorio y no tiene importancia. Por ejemplo, en la siguiente captura de pantalla
los dos elementos div.eye.left::after y div.eye.right::after tienen la misma animación (eyes)
que se les aplican, al igual que los elementos div.feet::before y div.feet::after.
Cómo modificar animaciones
Existen tres maneras de modificar una animación con el panel Animations:
- Duración de la animación
- Tiempos de fotogramas clave
- Retraso de la hora de inicio.
Para esta sección, supongamos que la siguiente captura de pantalla representa la animación original:
Para cambiar la duración de una animación, arrastra el primer o el último círculo.
Si la animación define reglas de fotogramas clave, estas se representan como círculos internos blancos. Arrastra uno de estos para cambiar los tiempos del fotograma clave.
Para agregar un retraso a una animación, haz clic en ella (no en los círculos) y, luego, arrástrala a cualquier parte.
Edita @keyframes en vivo
Si modificas @keyframes en Estilos, podrás ver de inmediato los efectos en el panel Animaciones.
Pruébalo en esta página de demostración:
- Abre el panel Animations. Captura automáticamente la animación de pulso en curso en la página. Selecciona la animación que se encuentra debajo de los controles de la barra de acciones.
- En Elements, inspecciona el elemento con
class="pulser"y, en Elements, busca la sección@keyframes pulse. - Intenta modificar los fotogramas clave; por ejemplo, cambia el segundo fotograma de
50%a20%. - Observa cómo tus cambios en Estilos afectan la animación capturada por el panel Animaciones.
Editar los seudoelementos ::view-transition durante una animación
Con la API de View Transitions, puedes cambiar el DOM en un solo paso y, al mismo tiempo, crear una transición animada entre los dos estados. Durante una animación, la API construye un árbol de seudoelementos con la siguiente estructura:
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root)
└─ ::view-transition-new(root)
Para editar esta estructura en Elements > Estilos:
- Abre las Herramientas para desarrolladores y, luego, inspecciona una página que usó la API de transiciones de View. Por ejemplo, esta página de demostración.
- En Animaciones, haz clic en pause Pause.
En la página, activa una animación. El panel Animations lo captura y lo detiene de inmediato. Ahora puedes encontrar la estructura
::view-transitionen el DOM, encima del elemento<head>.
En Elements > Estilos: Modifica el CSS de los seudoelementos
::view-transition.Reanuda la animación y vuelve a reproducirla para ver el resultado.
Para obtener más información, consulta Transiciones fluidas y simples con la API de View Transitions.