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

Kayce Basques

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.

Punto clave: Puedes editar los tiempos de la transición de CSS y las aceleraciones de animación, y configurar curvas Bézier personalizadas con el Editor de aceleración en el panel Elementos > Estilos.

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 Customize and control Herramientas para desarrolladores > Más herramientas > Animaciones.

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

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.

La pestaña Animations tiene cuatro secciones principales:

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. Muestra los grupos de animación capturados de dos tipos marcados con íconos: mouse basado en desplazamientos y schedule regular (basado en el tiempo).

   Selecciona un grupo de animaciones aquí para inspeccionarlo y modificarlo en el panel Details.

3. Cronograma. Según el tipo de grupo de animación, el cronograma puede tener alguno de los siguientes estados:

   • En píxeles para las animaciones basadas en desplazamientos del mouse.
   • En milisegundos para las animaciones basadas en el tiempo de programación.

   En el cronograma, puedes volver a reproducir una reproducción de una animación, arrastrarla o saltar 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 Replay. La animación se vuelve a reproducir en el viewport.

Haz clic en los botones 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.

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

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

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.

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.

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.

Punto clave: Cualquier cambio que realices en la pestaña Animations aplicará estilos intercalados a los elementos correspondientes para que puedas ver y volver a reproducir las animaciones resultantes de inmediato.

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 la sincronización del 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.

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

   

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.