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 →






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

Animar el ancho y alto de CSS sin el efecto Squish

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

programar

es

https://pseint.es/static/images/programar-animar-el-ancho-y-alto-de-css-sin-el-efecto-squish-1290-0.jpg

2024-06-13

 

Animar el ancho y alto de CSS sin el efecto Squish
Animar el ancho y alto de CSS sin el efecto Squish

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences