Animaciones CSS que no destruyen el rendimiento
Abril C.
Nivel 3 ·
Hice una animación de un menú lateral animando left y en celulares de gama baja se traba. ¿Qué propiedades conviene animar?
Respuestas 6
yoselin C.
Nivel 2 ·
2 0 transform y opacity. Son las que el navegador puede animar en la etapa de composición, sin recalcular el layout ni repintar todo en cada frame.
Franco G.
Nivel 1 ·
0 0 En vez de animar left de -300px a 0, animá de transform: translateX(-100%) a translateX(0). Mismo efecto, mucho más fluido.
Ciro A.
Nivel 3 ·
0 0 Animar width, height, top, left o margin obliga a recalcular el layout en cada frame. En equipos lentos se nota.
Tano72
Nivel 3 ·
0 0 will-change: transform puede ayudar en algunos casos, pero no lo pongas en todo, que consume memoria.
Franco G.
Nivel 1 ·
0 0 Y respetá prefers-reduced-motion: hay gente a la que las animaciones le provocan mareo.
Abril C.
Nivel 3 ·
1 0 Cambié a translateX y la diferencia es enorme. Gracias!