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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
13 Días
13 Hrs
12 Min
25 Seg
Debugging de animaciones con DevTools
10/12Recursos
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
Para hacer uso de este servicio, deberemos abrir nuestro inspector.
Darle en los tres puntos > More Tools > Rendering > Frame Rendering Stats
Una vez hayamos seguido la ruta, nos aparecerá una pequeña ventana para poder ver la cantidad de frames que pasan en un solo segundo, también nos indica el tema de la memoria y la GPU 📢.
Ahora, si nos vamos a la pestaña que dice Performance 🎯, nos permitirá grabar nuestra animación para poder analizarla, con 10 seg estaría perfecto, nos mostraría la siguiente ventana.
Con ello, podremos analizar, gracias a un diagrama al final, las distintas capas por las que pasa el renderizado explicado en la articlase anterior. También podremos analizarlo de acuerdo a fracciones de tiempo de nuestra animación grabada ✨.
Nos vemos en la siguiente articlase 💚.
Contribución creada con los aportes de: Angel David Osorio Leyva.
Aportes 5
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
Quiero hacer una aclaración importante, la profesora dice que lo ideal es que nuestras animaciones corran a 60FPS para que se vean bien y darle buena experiencia de navegación al usuario.
Esto no es exactamente cierto.
Si bien el objetivo de esta clase es lograr un buen rendimiento es decir más FPS, lograr una cantidad alta es beneficiosa pero no del todo necesario, es decir esto es opcional. Esto es porque nuestros ojos no perciben la diferencia entre digamos, 30 y 60FPS a menos que te pongan dos pantallas mostrando la misma animación en diferentes framerates ahí si se nota la diferencia.
Esto también lo digo porque la televisión y el cine tienen formatos que van de 24FPS a 30FPS y rara vez exceden estos valores porque estos medios se ven bien así, igual pasa con las páginas web. Dudo que la profesora Teff o cualquiera que esté leyendo esto sea capaz de notar la diferencia entre una animación fluyendo a 30FPS y otra a 60FPS, a menos que tengas el ojo entrenado para ver en framerates altos. Incluso si se logran más de 60FPS no sirve de nada si la pantalla desde donde el usuario está viendo tu web es de 60Hz, así que no importa que optimizes tu página para que las animaciones corran a 120FPS, al usuario promedio le basta con sus 30FPS y siempre y cuando no baje de esta cifra las páginas se verán bien.
🤔 Mucho cuidado con el rendimiento como tal de tu web. Todas las computadoras tienen un rendimiento diferente, por ejemplo la mía es muy poderosa, lo que hace que tenga incluso más de 60 FPS gracias a la aceleración por Hardware. Si le pongo tantas animaciones que empieza a rozar los 60 fps entonces en otras computadoras no tan poderosas, no irá a 60 fps.
😁 Siempre prueba tus webs en otros dispositivos y ve que todo esté realmente optimizado.
`@keyframes subebaja { `
`0% {transform: translateY(15px) rotate(-5deg);} `
`25% {transform: translateY(55px);} `
`50% {transform: translateY(-80px) rotate(7deg);}`
`75% {transform: translateY(85px);}`
`100% {transform: translateY(0);}`
`}`
y luego quitando la propiedad de rotate me dió GPU memory 5.2 used
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?