El Inspector de Animaciones te da control total sobre cada animación CSS y transición que se ejecuta en cualquier página web. Pausa todas las animaciones a la vez, redúcelas a inspección cuadro por cuadro, acelérales para probar el rendimiento, o avanza manualmente por la línea de tiempo — todo desde un panel flotante sin tocar las DevTools del navegador.
Las animaciones CSS pueden ser notoriamente difíciles de depurar. Ocurren rápido, se superponen, y las DevTools del navegador te obligan a buscar entre los estilos calculados para encontrar propiedades de animación. El Inspector de Animaciones resuelve esto detectando automáticamente cada animación @keyframes y transición CSS en la página, listándolas con su configuración completa (duración, suavizado, retraso, número de iteraciones), y dándote controles de reproducción que funcionan de forma global o por animación individual. Ya sea que estés depurando un efecto hover tembloroso, ajustando el tiempo de una secuencia de entrada de página, o tratando de entender cómo funciona una biblioteca de animaciones compleja, esta herramienta te pone en control.
Congela instantáneamente cada animación en la página con un solo clic. Todas las animaciones se pausan en su posición actual — no se reinician al principio. Haz clic en reproducir para reanudar exactamente desde donde se detuvieron. Esencial para inspeccionar estados a mitad de animación que son imposibles de capturar a simple vista.
Ajusta la velocidad de reproducción de todas las animaciones simultáneamente. Elige entre 0,25x (velocidad cuarta), 0,5x, 1x (normal), 2x o 4x. Ejecutar a 0,25x hace que incluso las transiciones más rápidas de 200ms sean fáciles de observar y depurar.
Cada animación CSS y transición en la página se detecta automáticamente y se muestra en una lista desplazable. Cada entrada muestra el nombre de la animación (o propiedad de transición), duración, función de tiempo (ease, linear, cubic-bezier), retraso, número de iteraciones y estado de ejecución actual.
Arrastra el control deslizante de la línea de tiempo para avanzar manualmente por una animación cuadro por cuadro. Ve exactamente qué sucede al 25%, 50% o en cualquier punto del ciclo de animación. La página se actualiza en tiempo real mientras arrastras.
Pausa, reproduce o ajusta la velocidad de animaciones individuales de forma independiente. Aísla una sola animación para depurarla sin distraerte con otros elementos en movimiento de la página.
Haz clic en cualquier animación de la lista para ver su declaración CSS completa — definición @keyframes, desglose de la abreviatura de animación, estados calculados de inicio y fin, y a qué elementos se aplica.
Inspector de Animaciones covers the following, organized by category:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-statetransition-propertytransition-durationtransition-timing-functiontransition-delayeaseease-inease-outease-in-outlinearcubic-bezier()steps()transformtransform-origintranslaterotatescaleskewRalentiza una animación a 0,25x para identificar exactamente dónde ocurre un tartamudeo. Comprueba si el problema es causado por thrashing de layout (animando width/height en lugar de transform), suavizado incorrecto o animaciones en conflicto en el mismo elemento.
Usa el desplazamiento por la línea de tiempo para ver cómo se ve realmente tu curva de suavizado cubic-bezier en la práctica. Compara el comportamiento de ease-in vs ease-out en porcentajes específicos. Ajusta valores y repite hasta que el movimiento se sienta correcto.
Visita un sitio web con animaciones impresionantes (páginas de aterrizaje, sitios de portafolio) e inspecciona exactamente cómo están construidas. Ve las definiciones @keyframes, valores de tiempo y targeting de elementos que hace que las secuencias complejas funcionen.
Verifica que los efectos hover, spinners de carga, pantallas skeleton y transiciones de página se comporten correctamente. Pausa en estados intermedios para comprobar fallos visuales como elementos superpuestos, z-index incorrecto durante la animación o redistribución de contenido.
Identifica animaciones que podrían causar problemas a usuarios con trastornos vestibulares. Comprueba si prefers-reduced-motion es respetado correctamente pausando todas las animaciones y verificando si la página sigue siendo completamente funcional.
Abre el dock flotante de DevSuite Pro y haz clic en el icono del Inspector de Animaciones. La herramienta escanea inmediatamente la página y detecta todas las animaciones CSS y transiciones en ejecución.
Aparece un panel flotante que lista cada animación encontrada en la página. Cada entrada muestra el nombre, duración, función de suavizado y si está en ejecución o pausada. El contador muestra el número total de animaciones detectadas.
Haz clic en el botón global de Pausa para congelar todas las animaciones simultáneamente. Los elementos permanecen en su estado actual a mitad de animación, permitiéndote inspeccionar propiedades CSS, tomar capturas de pantalla o comparar posiciones.
Usa el selector de velocidad para ralentizar las animaciones a 0,25x para observación detallada, o acelerarlas a 4x para recorrer rápidamente animaciones largas. Los cambios de velocidad se aplican instantáneamente sin reiniciar.
Arrastra el control deslizante de la línea de tiempo hacia izquierda y derecha para avanzar manualmente por la animación. La página se actualiza en tiempo real mostrando exactamente cómo se ve cada cuadro. Perfecto para detectar fallos o verificar curvas de suavizado.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.