⁣Наконец-то нормальная анимация height: auto без костылей

Раньше, чтобы плавно раскрыть элемент от 0 до auto, приходилось идти на ухищрения: угадывать max-height: 9999px с дергающейся анимацией, измерять scrollHeight через JS или городить grid-конструкции с 0fr в 1fr. Все это — хрупкие решения, которые ломаются при изменении контента или на разных устройствах. Теперь в CSS есть встроенная поддержка для этой задачи.

Как работает interpolate-size
На родителе или :root включаем разрешение анимации ключевых слов:

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

Это свойство позволяет CSS интерполировать значения auto, min-content, max-content и fit-content в анимациях. Без него браузер не знает, как плавно перейти от 0 к auto.

Реальный пример — аккордеон
Свойство calc-size() задает конечное положение:

.panel {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.panel.active {
  height: calc-size(auto, size);
}

Второй аргумент size — это псевдофункция, которая возвращает окончательное вычисленное значение. Анимация идет от 0 до этого значения плавно, без рывков.

Почему это круто
- Больше не нужно угадывать max-height: 9999px — анимация точная под любой контент.
- Никакого JS для измерения scrollHeight — уходит лишняя перерисовка и зависимость от событий.
- Работает для height, width, flex-basis — подходит для дропдаунов, аккордеонов, модалок с изменяемой высотой.

Типичная ошибка
Многие разработчики забывают про interpolate-size и пытаются анимировать calc-size(auto) без него. Это не сработает, и элемент просто прыгнет на финальную высоту. Обязательно добавьте interpolate-size: allow-keywords на родителя или :root.

Вывод: interpolate-size и calc-size() решают давнюю проблему плавного раскрытия контента, избавляя от устаревших хаков и делая анимации предсказуемыми на production — но пока только в Chrome 129+.