interpolate-size
Разрешает переходы к ключевым словам размера и от них — `auto`, `min-content`, `fit-content`. Наконец-то `height: 0` → `height: auto`.
Синтаксис
:root { interpolate-size: allow-keywords; }Значения
| Параметр | Тип | Описание |
|---|---|---|
| numeric-only | keyword | По умолчанию: анимируются только числа вроде `200px` или `50%`. |
| allow-keywords | keyword | Анимируются и ключевые слова размера. Свойство наследуется, поэтому его обычно ставят один раз на `:root`. |
Примеры
Блок плавно раскрывается до своей естественной высоты:
<style>
:root { interpolate-size: allow-keywords; }
.more {
height: 0; overflow: hidden;
transition: height 0.4s;
background: lightyellow;
}
.wrap:hover .more { height: auto; }
</style>
<div class="wrap">
<p>Hover to read more ↓</p>
<div class="more"><p>The hidden text appears smoothly, whatever its length.</p></div>
</div>Примечания
Родственная функция calc-size() делает то же для одного значения: height: calc-size(auto, size). Поддерживается только в браузерах на Chromium (с 2024 года); в остальных изменение просто происходит без анимации — вполне приемлемый запасной вариант.
См. также
- transition — Плавно анимирует изменение свойства от старого значения к новому.
- height — Высота элемента.
- <details>, <summary> — Раскрывающийся блок без JavaScript: `<summary>` — видимый заголовок, остальное скрыто до клика.
- transition-behavior — Разрешает переходы дискретных свойств вроде `display` и `overlay`, чтобы элемент успел плавно исчезнуть, прежде чем пропасть.
Вопросы и ответы по теме
В учебнике
- Анимация появления и исчезновения — Как плавно показать и спрятать элемент — правило @starting-style, transition-behavior: allow-discrete, переход из display: none, анимация открытия диалога и popover, interpolate-size для height: auto.