Cómo inspeccionar tus animaciones CSS con Chrome DevTools

Lectores como usted ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

Las animaciones CSS, realizadas correctamente, pueden elevar su sitio a otro nivel. Pero crear estas animaciones puede resultar complicado sin herramientas que proporcionen un control preciso sobre ellas. ¿Qué pasaría si hubiera una manera de ver exactamente lo que sucede en cada paso de tu animación?

La función DevTools de Google Chrome y Firefox viene con la capacidad de inspeccionar tus animaciones. Aprenda a utilizar esta función para mejorar sus propias animaciones y aplicar ingeniería inversa a sus animaciones favoritas en la web.

DevTools de Chrome es una excelente manera de depurar todos los aspectos de su CSS y más. Comience con este ejemplo simple para comprender cómo puede usarlo para inspeccionar animaciones.

El código para estos ejemplos está disponible enun repositorio de GitHub.

Definir animaciones con HTML y CSS

El siguiente HTML representa una página con dos elementos: un<div>y un<button>. La página también importa un archivo CSS llamadoestilo.css:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="box"></div>
    <button>Test Button</button>
  </body>
</html>

Para diseñar ambos elementos, cree unestilo.cssarchivo en la misma carpeta que el HTML y agregue lo siguiente:

 #box {
  background: red;
  height: 400px;
  width: 400px;
  margin-bottom: 1rem;
  animation: rotateAndChangeColor 1000ms ease-in-out;
}button {
  font-size: larger;
  background-color: white;
  border: 1px solid black;
  padding: 0.5em 1em;
  color: black;
  height: 80px;
  width: 300px;
  border-radius: 0.5em;
  transition: background-color 100ms ease-in-out, color 100ms ease-in-out;
  cursor: pointer;
}
button:hover {
  background-color: black;
  color: white;
}
@keyframes rotateAndChangeColor {
  0% {
    rotate: 0deg;
    background: red;
  }
  10% {
    background: green;
  }
  40% {
    background: blue;
  }
  70% {
    background: yellow;
  }
  100% {
    rotate: 360deg;
    background: red;
  }
}

Estos estilos crean dos componentes:

Un cuadro simple que gira y cambia de color cuando se carga la página.
Un botón que cambia su color de fondo cuando pasas el cursor sobre él.

Tenga en cuenta que el cuadro rojo se anima usando la directiva CSS @keyframe, mientras que el botón usa una transición. Esto le permite comparar los dos enfoques utilizando DevTools del navegador.

Inspeccionar animaciones usando DevTools

Para acceder alanimacionespestaña en Chrome DevTools:

Haga clic derecho en su página para abrir el menú contextual.
Hacer clicInspeccionar.
Haga clic en los puntos triples en la esquina superior derecha.
Navegar aMás herramientas > Animaciones.

Esto abrirá el cajón de animación en la sección inferior.

Cualquier animación que ocurra en su página se mostrará aquí. Si actualiza su página y coloca el cursor sobre el botón, las animaciones aparecerán en la pestaña de animaciones.

El verdadero poder surge cuando haces clic en una de estas animaciones. Por ejemplo, si hace clic en la animación del cuadro, verá que el navegador presenta los fotogramas clave de la siguiente manera:

Las DevTools muestran todas las animaciones relacionadas con el elemento que seleccione. Dado que solo hay una animación definida para el cuadro rojo:rotar y cambiar color—solo verás sus detalles.

Puede arrastrar la línea hacia la izquierda para hacer la animación mucho más rápida o arrastrarla hacia la derecha para ralentizarla. También puedes pausar la animación en ciertos puntos alternando los íconos de pausa y reproducción. Los porcentajes en la parte superior te permiten reproducir la animación a un cuarto de su velocidad normal y a una décima parte de su velocidad respectivamente.

Cuando inspecciona la transición del botón, DevTools mostrará las propiedades individuales de la transición: el color y el color de fondo.

Esta herramienta te permite manipular tu animación para ver exactamente cómo funciona. Puede usarlo para solucionar problemas de su sitio web si hay algún problema.

Ejemplos de animación avanzada

Comience reemplazando el marcado dentro de su HTML<body>etiqueta con el siguiente marcado:

 <div class="move-me move-me-1">steps(4, end)</div>
<br />
<div class="move-me move-me-2">steps(4, start)</div>
<br />
<div class="move-me move-me-3">no steps</div>

Luego reemplace todos los estilos en suestilo.cssarchivo con esto:

 .move-me {
  display: inline-block; 
  padding: 20px;
  color: white;
  position: relative;
  margin: 0 0 10px 0;
}.move-me-1 {
  animation: move-in-steps 8s steps(4, end) infinite;
}
.move-me-2 {
  animation: move-in-steps 8s steps(4, start) infinite;
}
.move-me-3 {
  animation: move-in-steps 8s infinite;
}
body {
  padding: 20px;
}
@keyframes move-in-steps {
  0% {
    left: 0;
    background: blue;
  }
  100% {
    left: 100%;
    background: red;
  }
}

Mucho<div>los elementos tienen elpasos de mudanzaanimación que se les aplica, que cambia la posición y el color de fondo. Además, cada cuadro tiene una animación diferente para controlar la cantidad de pasos que dará.

Mientras que el tercer cuadro se desliza constantemente hacia la derecha, los dos primeros se moverán dos pasos a la vez hasta llegar al final de la pantalla (con el segundo cuadro comenzando antes del primero).

Si abres elanimacionespestaña en DevTools y actualiza la página, encontrarás toda la información relacionada con estas animaciones:

Hay varios elementos que animan todos durante el mismo período. En este escenario, el color de fondo y la posición del cuadro se animan al mismo tiempo para los tres cuadros.

Otra cosa a tener en cuenta son los nodos en cada línea de animación. Cuando una animación ocurre un número infinito de veces, los nodos muestran dónde comienza y termina cada repetición en la animación.

Los nodos vacíos son esencialmente los fotogramas clave de la animación, mientras que los de colores sólidos representan el inicio y el final de la animación. Tendrás nodos de color oscuro cada vez que tu animación comience de nuevo.

Finalmente, puedes editar las animaciones usando DevTools, tal como puedes hacerlo con cualquier propiedad CSS. Todos los cambios que realice utilizando la interfaz de usuario de animación se mostrarán en los estilos en línea debajo delEstilospestaña y viceversa. Esto le permite realizar cambios, probarlos y copiarlos en su proyecto real.

La función DevTools de Google Chrome es una herramienta increíble para depurar CSS, incluidas las animaciones. Proporciona una vista detallada de cada transición y animación en su página, para que pueda ver exactamente lo que sucede en cada paso.

Como desarrollador web, debe estar familiarizado con la función DevTools de su navegador o su equivalente.