La pestaña Animations de las Herramientas para desarrolladores de Chrome es una herramienta potente que te ayuda a ralentizar, volver a reproducir, ajustar los tiempos de animación de CSS y ver los resultados de inmediato.
La pestaña Animaciones, mientras está abierta, registra las animaciones automáticamente, las agrupa de forma conveniente y te permite hacer lo siguiente:
- Vuelve a reproducir y ralentiza las animaciones para inspeccionarlas mejor.
- Arrastra puntos en un cronograma para ajustar las duraciones, los tiempos y los retrasos, en lugar de adivinar y establecer valores de CSS de forma manual.
Además, puedes editar los tiempos de suavización y establecer valores de curva cubic-bezier personalizados con el Editor de suavización en el panel Elementos > Estilos. Para obtener más información, consulta Cómo editar la animación y los tiempos de transición con el editor de suavización.
Para obtener una experiencia de aprendizaje más práctica, sigue la guía Cómo inspeccionar y modificar los efectos de animación de CSS.