La pestaña Animations de las Herramientas para desarrolladores de Chrome es una herramienta potente que te ayuda a disminuir la velocidad, volver a reproducirla, ajustar los tiempos de animación de CSS y ver los resultados de inmediato.
Mientras está abierta, la pestaña Animations graba 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.
- Ajusta la duración, el tiempo y los retrasos arrastrando puntos en una línea de tiempo en lugar de adivinar y establecer valores CSS de forma manual.
Además, puedes editar los tiempos de aceleración y establecer valores de curva cubic-bezier personalizados con el Editor de aceleración en el panel Elements > Styles. Para obtener más información, consulta Cómo editar los tiempos de animación y transición con el editor de aceleración.
Para obtener una experiencia de aprendizaje más práctica, sigue la guía Cómo inspeccionar y modificar efectos de animación CSS.