Animar el ancho y alto de CSS sin el efecto Squish

La primera regla para animar en la web: no animar widthy 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 transformpropiedad es más rápido (y “más barato”).

Pero transformpuede ser complicado. Vea lo compleja que se vuelve esta animación de apertura/cierre de menú para que sea realmente eficaz. Rik Schennink escribe en su blog 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? Escalado de 9 cortes:

Este método le permite escalar el elemento y estirar las imágenes 2, 4, 6 y 8, mientras vincula 1, 3, 7 y 9 a sus respectivas esquinas mediante posicionamiento absoluto. Esto da como resultado esquinas que no se estiran cuando se escalan.

Es como la versión 2020 de puertas correderas .

Enlace directo →