CSS

interpolate-size: animar height auto sin hacks

Aprende a transicionar tamaños intrínsecos como `height: auto` con CSS nativo, entendiendo cuándo usar `interpolate-size`, qué problemas resuelve y cómo dejar fallback razonable.

Test de Desarrollo Web (CulTest)

📘 Teoría

Qué problema resuelve exactamente

CSS siempre supo llegar a `auto`, pero no sabía dibujar el camino intermedio.

Una transición necesita dos valores interpolables. `height: 0` y `height: auto` no encajaban bien porque `auto` no es un número fijo sino un resultado de layout.

Por eso tantos componentes acababan usando `max-height: 999px` o cálculos de `scrollHeight` desde JavaScript. Funcionaban, sí, pero con topes arbitrarios, mantenimiento extra o microbugs cuando el contenido cambiaba.

Hack clásico: `max-height` con un máximo inventado.
Alternativa JS: medir contenido y escribir píxeles en runtime.
Nueva opción: permitir que el navegador interpole keywords intrínsecas.

Sintaxis base y dónde aplicarla

No se declara en el panel que cambia de altura, sino en el contexto donde quieres permitir esa interpolación.

El detalle importante es `allow-keywords`: sin esa orden, el navegador sigue tratando esos cambios como no interpolables.

Combina muy bien con `overflow: clip` para que el contenido no se salga durante el recorrido visual.

Patrón mínimo

.accordion {
  interpolate-size: allow-keywords;
}

.panel {
  height: 0;
  overflow: clip;
  transition: height 280ms ease;
}

.is-open .panel {
  height: auto;
}

Casos donde sí aporta valor

No todo necesita una animación de altura, pero cuando el patrón es frecuente compensa mucho.

FAQ y acordeones

El contenido puede crecer o encogerse sin que tengas que recalibrar límites máximos cada vez.

Filtros de ecommerce

Los grupos desplegables cambian con la cantidad de opciones y no siempre caben en un alto fijo razonable.

Tarjetas expandibles

Un resumen corto puede convertirse en un bloque rico con listas, enlaces o métricas sin romper la transición.

Fallback y criterio de compatibilidad

La regla moderna no te exime de pensar en navegadores que aún no han llegado.

Si la interfaz sigue siendo usable sin animación, ya tienes una base muy buena. Luego puedes mejorar con `interpolate-size` donde exista soporte.

Cuando la animación sea secundaria, el fallback más sano suele ser aceptar apertura y cierre instantáneos. Solo merece la pena volver al hack de `max-height` si el componente depende mucho de esa suavidad visual.

1 Qué problema resuelve exactamente 2 Sintaxis base y dónde aplicarla 3 Casos donde sí aporta valor 4 Fallback y criterio de compatibilidad

🧪 Aprende probando

Ejemplo Demo interactiva: before y after real Compara un acordeón resuelto con `max-height` frente a otro que anima `height: auto` con `interpolate-size`.

⌄

🏁 Retos

Reto Reto: abrir un panel hasta auto Activa la interpolación de keywords y haz que el panel abierto use su altura real.

⌄

🧰 Recursos

Enlaces útiles

MDN - interpolate-size MDN - Valores intrínsecos de tamaño

Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS

Recursos del curso 78

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 48

@property: custom properties tipadas y animables

Lección 50

Scroll moderno: snap, sticky y animaciones guiadas por desplazamiento

›