Las animaciones son una poderosa adición a CSS, pero su formato de texto puede hacer que sea incómodo trabajar con ellas. ¡DevTools de Chrome al rescate!

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 depura todos los aspectos de tu CSS, y más además. Comience con este ejemplo simple para comprender cómo puede usarlo para inspeccionar animaciones.

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

Definir animaciones con HTML y CSS

El siguiente HTML representa una página con dos elementos: un y un. La página también importa un archivo CSS llamado

instagram viewer
estilo.css:

html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<linkrel="stylesheet"href="style.css">
head>
<body>
<divid="box">div>
<button>Test Buttonbutton>
body>
html>

Para diseñar ambos elementos, cree un estilo.css archivo en la misma carpeta que el HTML y agregue lo siguiente:

#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000msease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1pxsolidblack;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100msease-in-out, color 100msease-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 el Directiva CSS @keyframe, mientras que el botón utiliza una transición. Esto le permite comparar los dos enfoques utilizando las DevTools del navegador.

Para acceder al animaciones pestaña en Chrome DevTools:

  1. Haga clic derecho en su página para abrir el menú contextual.
  2. Hacer clic Inspeccionar.
  3. Haga clic en los puntos triples en la esquina superior derecha.
  4. Navegar a Má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. Puedes 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 etiqueta con el siguiente marcado:


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

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

class="move-me move-me-3">no steps</div>

Luego reemplace todos los estilos en su estilo.css archivo 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 8ssteps(4, end) infinite;
}


.move-me-2 {
animation: move-in-steps 8ssteps(4, start) infinite;
}


.move-me-3 {
animation: move-in-steps 8sinfinite;
}


body {
padding: 20px;
}


@keyframes move-in-steps {
 0% {
left: 0;
background: blue;
 }
 100% {
left: 100%;
background: red;
 }
}

Todos los elementos tienen el pasos de mudanza animació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 el animaciones pestañ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 del Estilos pestañ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, debes estar familiarizado con la función DevTools de tu navegador o su equivalente.