La primera regla de animar en la web: no animar width y height. Obliga al navegador a recalcular un montón de cosas y es lento (o “caro”, como dicen). Si puede salirse con la suya, animar cualquier transform la propiedad es más rápida (y “más barata”).
a tope, transform puede ser complicado. Compruebe lo compleja que se vuelve esta animación de abrir/cerrar menú para que sea realmente eficaz. Rik Schennink bloguea sobre otra situación complicada: border-radius. Cuando animas la escala de un elemento en una dirección, obtienes un efecto blando donde las esquinas no mantienen su agradable radio. ¿La solución? Escala de 9 cortes:
Este método le permite escalar el elemento y estirar la imagen 2, 4, 6 y 8, mientras vincula 1, 3, 7 y 9 a sus respectivas esquinas usando el posicionamiento absoluto. Esto da como resultado esquinas que no se estiran cuando se escalan.
Es como la versión 2020 de las puertas correderas.
Enlace directo →