En Chrome también hay una opción muy curiosa para debuguear animaciones 👀. Simplemente le dan click al botón de los 3 puntitos de las DevTools, seleccionan “More Tools” y eligen “Animations”:
.
.
Si apenas lo acaban de abrir les aparecerá algo como “Waiting for an animation”, simplemente recarguen la página (con esta sección abierta) y automáticamente les registrará la animación que hayan hecho:
.
.
Aquí también pueden jugar con los controles de sus animaciones 👀👇:
.
Requisitos para tomar el curso
Sabes más de animaciones de lo que crees
Animationland game
Creando contadores con CSS en Animationland
Maquetando a nuestros conejitos en Animationland: contexto de apilamiento
Dibujando a nuestros conejitos con CSS en Animationland
Animation y keyframes en CSS
Animation name y keyframe
Animation duration
Animation timing function, iteration count y delay
Animation direction, fill mode y play state
Rendimiento de animaciones con CSS
CSS Triggers: layout, paint y composite
Debugging de animaciones con DevTools
Buenas prácticas para optimizar animaciones web
Libros recomendados y próximos pasos
Continúa en el Curso Práctico de Animaciones con CSS
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Debugging de animaciones con DevTools
10/12Recursos
Aportes 2
Preguntas 2
Ordenar por:
El poder de Dev Tools 😮
En esta herramienta podemos encontrar diferentes tipos de herramientas para trabajar en paralelo con nuestro código de una manera muy eficiente.
.
Algunas características en la cual nos puede servir son:
- Accesibilidad web
- Performance
- Renderizare
.
Y otros muchos mas 😃
.
Te recomiendo este curso dictado por nuestro profe Diego donde explica varios de estos temas a detalle. 👇
Curso de Debugging con Chrome DevTools
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.