⁣Анимация auto без JS: interpolate-size и calc-size()

Годами transition: height .3s c height: auto не работал: keyword-значения размеров анимируются дискретно, поэтому свойство просто прыгало. Лечили это замером scrollHeight в JS или grid-трюком 0fr → 1fr.

В Chromium 129 появились две CSS-фичи, которые закрывают задачу на уровне стилей.

1. interpolate-size: allow-keywords

Переключатель, разрешающий интерполировать keyword-значения размеров (auto, min-content, max-content, fit-content) с обычными длинами. Свойство наследуемое, поэтому вешают на :root:

:root {
interpolate-size: allow-keywords;
}

.panel {
block-size: 0;
overflow: hidden;
transition: block-size .3s ease;
}

.panel.is-open {
block-size: auto;
}

Работает для width/height/inline-size/block-size и их min-/max- вариантов. Под капотом auto трактуется как calc-size(auto, size)