Sugerencias para Herramientas para desarrolladores: Cómo inspeccionar y modificar animaciones de CSS
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
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.
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2022-08-11 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2022-08-11 (UTC)"],[],[]]
