Анимация высоты от 0 до auto была вечным проклятием верстальщика — браузер не мог интерполировать keyword-значения, и приходилось изобретать костыли с max-height, transform: scaleY или JavaScript. В production — аккордеоны в админках, дропдауны в e-commerce, раскрывающиеся панели в дизайн-системах. Типичная ошибка: захардкоженное max-height, которое ломается при динамическом контенте или создаёт визуальный рывок.
Как это работает
Свойство
interpolate-size: allow-keywords разрешает браузеру анимировать между height: 0 и height: auto. Раньше auto воспринимался как нечисловое значение — теперь движок вычисляет конечную высоту и интерполирует. Минимальный пример:.accordion {
interpolate-size: allow-keywords;
height: 0;
overflow: hidden;
transition: height 0.3s;
}
.accordion.open {
height: auto;
}Никаких подгонов, работает с любым объёмом контента.
Где и как применять
* Аккордеоны, спойлеры, тултипы — везде, где контент меняется динамически (например, описание товара с отзывами).
* Компоненты дизайн-системы: экспандеры, dropdown-меню с серверными данными.
* Поддерживает не только auto, но и
fit-content, min-content, max-content — это закрывает кейсы с max-height и width.Типичная ошибка и trade-off
Ошибка: пытаться применить свойство к родителю при анимировании дочернего блока.
interpolate-size нужно вешать именно на тот элемент, который меняет высоту. Trade-off: пока поддержка только в Chrome 129+ и Edge 129+ (Firefox и Safari — в процессе). Для production используй с @supports как прогрессивное улучшение — браузеры без фичи увидят честное auto без анимации, это лучше, чем баг с max-height.Практический совет
Комбинируй с
content-visibility: auto для скрытых панелей — это отложит рендеринг, улучшив производительность при большом количестве элементов. Пример: лендинг с FAQ на 50 вопросов — interpolate-size убирает дёрганье, content-visibility снижает время загрузки.Вывод:
interpolate-size: allow-keywords позволяет забыть про max-height-хаки и делать предсказуемую анимацию раскрытия блоков с любым контентом, сохраняя стабильность layout в production-интерфейсах.