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
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
In this tool we can find different types of tools to work in parallel with our code in a very efficient way.
Some features in which it can serve us are:
- Web accessibility
- Performance
- Renderizare
To make use of this service, we will have to open our inspector.
Click in the three points > More Tools > Rendering > Frame Rendering StatsOnce we have followed the route, we will see a small window to see the amount of frames that pass in a single second, also indicates the issue of memory and GPU 📢.
Now, if we go to the tab that says Performance 🎯, it will allow us to record our animation to be able to analyze it, with 10 sec it would be perfect, it would show us the following window.
With this, we will be able to analyze, thanks to a diagram at the end, the different layers through which passes the rendering explained in the previous article. We will also be able to analyze it according to fractions of time of our recorded animation ✨.
See you in the next articlase 💚.
Contribution created with contributions from: Angel David Osorio Leyva.
Contributions 6
Questions 2
Sort by:
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
Me gustó mucho descubrir esas funciones de las DevTools mencionadas en el curso. No tenía idea de que existían pero amé aprender sobre ellas, espero algún día utilizarlas
Want to see more contributions, questions and answers from the community?