. La página también importa un archivo CSS llamado style.css:
<!DOCTYPE html>
Para aplicar estilo a ambos elementos, cree un archivo style.css en la misma carpeta que el HTML y agregue lo siguiente:
#box {button {
button:hover {
@keyframes rotateAndChangeColor {
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.
Para acceder a la pestaña Animaciones en Chrome DevTools:
Haga clic derecho en su página para abrir el menú contextual.
Haga clic en Inspeccionar.
Haga clic en los puntos triples en la esquina superior derecha.
Vaya 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 (rotateAndChangeColor), 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.
Comience reemplazando el marcado dentro de su etiqueta HTML
con el siguiente marcado:
<div class="move-me move-me-1">steps(4, end)</div>
Luego reemplace todos los estilos en su archivo style.css con esto:
.move-me {.move-me-1 {
.move-me-2 {
.move-me-3 {
body {
@keyframes move-in-steps {
100% {
A todos los elementos
se les aplica la animación de pasos, 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 abre la pestaña Animaciones en DevTools y actualiza la página, encontrará 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 aparecerán en los estilos en línea en la pestaña Estilos 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.
