Анимация элемента details на CSS (без использования JavaScript)

CSS в последние годы очень активно развивается и постепенно добавляет решения, позволяющие сделать то, что раньше без JavaScript было нереально. Одна из таких возможностей — анимация ширины или высоты элемента из нуля в неопределенное значение типа auto, fit-content, max-content.

У меня уже есть статья, в которой я рассказывал, как сделать анимацию тега <details> с использованием JavaScript — FAQ на тегах details и summary с анимацией и микроразметкой. Оно охватывает большое количество браузеров и их версий. Новое же решение работает даже не во всех популярных браузерах (Safari и Firefox на момент написания статьи отстают), и его можно использовать в качестве прогрессивного улучшения, когда <details> и <summary> сами по себе работают везде, но анимация — только в тех браузерах, которые поддерживают новые CSS-свойства, указанные ниже.

Минимально рабочий код выглядит следующим образом:

details::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.3s, content-visibility 0.3s allow-discrete;
  interpolate-size: allow-keywords;
}

details[open]::details-content {
  height: auto;
}

Что здесь интересного:

1. ::details-content — псевдоэлемент, который выбирает содержимое тега <details> за исключением <summary>. Именно он анимируется по высоте.
2. overflow: clip — обрезает контент во время анимации.
3. content-visibility 0.3s allow-discrete — обеспечивает плавное сворачивание, без этой части контент резко скрывается.
4. interpolate-size: allow-keywords — ключевое правило, благодаря которому возможна анимация из 0 в auto.

Кроме того, относительно недавно тег <details> стал поддерживать атрибут name, суть которого в следующем: если использовать его с одинаковым значением на нескольких тегах, то они объединяются в группу, и при раскрытии одного остальные сворачиваются. Здесь прослеживается аналогия с тегом <input type="radio" name="..." />.

Демо

Полный пример в виде FAQ с использованием микроразметки (на основе моего решения c JavaScript):

See the Pen FAQ на details и summary с анимацией и микроразметкой, без JavaScript

Все, что описано в статье, используется на данном сайте, можно посмотреть в сайдбаре.