También considerar reducir o en algunos casos eliminar las animaciones en dispositivos móviles, ya que el rendimiento no es el mismo.
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 se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
12 Días
6 Hrs
47 Min
20 Seg
Buenas prácticas para optimizar animaciones web
11/12Lectura
Teniendo en cuenta lo que vimos en la clase de CSS Triggers, te dejo aquí 5 buenas prácticas para optimizar tus animaciones web:
...
Regístrate o inicia sesión para leer el resto del contenido.
Aportes 6
Preguntas 2
Ordenar por:
Con los consejos de este modulo se logra mejorar el rendimiento de los frames, muy cercano a lo que se considera optimo 60fps (frames por segundo).
.
.
Pasamos de 30 y algo fps a 59 fps.
Resumen de la lectura
Usa opacity y transform para animar. Propiedades como width, height, background y cualquier otras que utilicen una gran cantidad de pixeles son greedy.
Seguí los consejos y me va super bien 😄
Muy interesante
buenas recomendaciones
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?