Animaciones: Cómo inspeccionar y modificar los efectos de animación CSS

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Inspecciona y modifica animaciones con la pestaña del panel lateral Animations de las Herramientas para desarrolladores de Chrome.

Descripción general

Para capturar animaciones, abre la pestaña Animaciones. Detecta automáticamente animaciones y las ordena en grupos.

La pestaña Animations tiene dos objetivos principales:

  • Inspeccionar animaciones. Disminuye la velocidad, vuelve a reproducirla o inspecciona el código fuente de un grupo de animación.
  • Cómo modificar animaciones Modifica la sincronización, el retraso, la duración o los desplazamientos de los fotogramas clave de un grupo de animaciones. No se admite la edición de fotogramas clave ni de Bézier.

La pestaña Animations admite animaciones y transiciones CSS, animaciones web y la API de View Transitions. Aún no se admiten las animaciones 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 las animaciones individuales y las crean para que aparezcan como un efecto visual coherente. La pestaña Animations predice animaciones relacionadas según el tiempo de inicio (sin incluir retrasos) y las agrupa en paralelo.

En otras palabras, la pestaña Animations agrupa las animaciones que se activan en el mismo bloque de secuencia de comandos, pero si son asíncronas, terminan en diferentes grupos.

Comenzar

Existen dos maneras de abrir la pestaña Animations:

  • Selecciona Más. Customize and control Herramientas para desarrolladores > Más herramientas > Animaciones. Animaciones en el menú.
  • Abre el menú de comandos presionando una de las siguientes opciones:

    • En macOS: Comando + Mayúsculas + P
    • En Windows, Linux o ChromeOS: Control + Mayúsculas + P

    Luego, comienza a escribir Show Animations y selecciona el panel del panel lateral correspondiente. Mostrar animaciones.

De forma predeterminada, la pestaña Animations se abre como una pestaña junto al panel lateral Console. Como pestaña de un panel lateral, puedes usarla con cualquier panel o moverla a la parte superior de Herramientas para desarrolladores.

Pestaña Animaciones vacía.

La pestaña Animations tiene cuatro secciones principales:

Las secciones del panel Animaciones.

  1. Controles. Desde aquí, puedes bloquear Borrar todos los grupos de animación capturados, pausar Pausar o play_arrow Reanudar animaciones, o bien cambiar la velocidad del grupo de animación seleccionado.
  2. Descripción general. Selecciona un grupo de animaciones aquí para inspeccionarlo y modificarlo en el panel Details.
  3. Cronograma: Vuelve a reproducir Vuelve a reproducir una animación, arrástrala o salta a un punto específico.
  4. Detalles Inspecciona y modifica el grupo de animación seleccionado.

Para capturar una animación, actívala mientras la pestaña Animaciones esté abierta. Si se activa una animación cuando se carga la página, vuelve a cargarla.

Cómo inspeccionar animaciones

Una vez que hayas capturado una animación, habrá algunas formas de reproducirla:

  • Coloca el cursor sobre su miniatura en el panel Overview para obtener una vista previa.
  • Arrastra el cabezal de reproducción (la barra vertical roja) para arrastrar la animación de la vista del puerto o haz clic en cualquier parte del Cronograma 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 Overview (para que se muestre en el panel Details) y presiona el botón Botón Volver a reproducir. Replay. La animación se vuelve a reproducir en el viewport.

Haz clic en los botones Botones de velocidad de la animación. Velocidad de animación en la barra Controles para cambiar la velocidad de vista previa del grupo de animaciones seleccionado.

Ver detalles de la animación

Después de capturar un grupo de animaciones, haz clic en él desde 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.

El panel de detalles

Coloca el cursor sobre una animación para destacarla en el viewport. Haz clic en la animación para seleccionarla en el panel Elements.

Coloca el cursor sobre una animación para destacarla en viewport.

Algunas animaciones se repiten indefinidamente si su propiedad animation-iteration-count se establece en infinite. La pestaña Animations muestra sus iteraciones y definiciones.

Iteraciones de animación.

La sección más a la izquierda y más oscura 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.

Diagrama de iteraciones de animación.

Si dos elementos tienen la misma animación aplicada, la pestaña Animations les asigna el mismo color. El color en sí es aleatorio y no tiene ningún significado. Por ejemplo, en la captura de pantalla a continuación, los dos elementos div.eye.left::after y div.eye.right::after tienen aplicada la misma animación (eyes), al igual que los elementos div.feet::before y div.feet::after.

Animaciones con código de colores

Cómo modificar animaciones

Existen tres maneras de modificar una animación con la pestaña 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:

Animación original antes de la modificación.

Para cambiar la duración de una animación, arrastra el primer o el último círculo.

Duración modificada

Si la animación define reglas de fotogramas clave, estas se representan como círculos internos blancos. Arrastra uno de estos para cambiar la sincronización del fotograma clave.

Se modificó el fotograma clave.

Para agregar un retraso a una animación, haz clic en ella, no en los círculos, y arrástrala a cualquier parte.

Retraso modificado.

Editar los pseudoelementos ::view-transition durante una animación

Con la API de View Transitions, puedes cambiar el DOM en un solo paso y, a la vez, 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 > Styles, sigue estos pasos:

  1. Abre Herramientas para desarrolladores y, luego, inspecciona una página que usó la API de transiciones de vistas. Por ejemplo, esta página de demostración.
  2. En Animaciones, haz clic en Pausar Pausar.
  3. En la página, activa una animación. El panel Animations lo captura y se detiene de inmediato. Ahora puedes encontrar la estructura ::view-transition en el DOM, en la parte superior del elemento <head>.

    Edición de la CSS del seudoelemento ::view-transition

  4. En Elementos > Estilos, modifica la CSS de los pseudoelementos ::view-transition.

  5. 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.