interpolate-size で details の開閉を height: auto までアニメーションさせる

:root { interpolate-size: allow-keywords; } を入れると height: 0 ⇄ height: auto が補間されるようになり、::details-content と組み合わせて JS なしのアコーディオン開閉アニメが作れる。

どんな時に使う？

FAQ などを <details> / <summary> で作っていて、パッと開くのではなくスッと伸びるように開閉させたい時
これまでは max-height に大きめの固定値を入れる、JS で scrollHeight を測る、grid-template-rows: 0fr → 1fr を使う…といった回避策が必要だった。auto そのものに向けて transition できるので、中身の量が変わっても破綻しない。

コード

css

/* 1. ページ全体で「数値 ⇄ auto などのキーワード」の補間を許可（継承するので :root に1回でOK） */
:root {
  interpolate-size: allow-keywords;
}

/* 2. details の中身（summary 以外の部分）を閉じた状態では高さ0に */
details::details-content {
  height: 0;
  overflow: clip;
  transition:
    height 0.3s ease,
    content-visibility 0.3s allow-discrete;
}

/* 3. 開いたら auto まで伸ばす */
details[open]::details-content {
  height: auto;
}

::details-content は <details> のうち <summary> を除いた中身を指す疑似要素。閉じている間ブラウザはこの部分を content-visibility: hidden にしているので、content-visibility も allow-discrete 付きで transition に入れないと、閉じるアニメーションが始まる前に中身が消えてしまう。
overflow: clip で伸び縮み中に中身がはみ出さないようにする。
interpolate-size は継承されるので、影響範囲を絞りたい場合は :root ではなく .faq などのコンテナに付ける。全体に効かせたくない時は、個別に height: calc-size(auto, size) と書いても同じ補間ができる。
「1つ開くと他が閉じる」排他アコーディオンにしたい時は、HTML 側で同じグループの <details> に同じ name 属性を付ける（投稿者が以前紹介していた HTML の小技）。

注意点・対応状況

interpolate-size / calc-size() は Chrome・Edge 129+ のみ（2026年10月時点）。Safari は Technology Preview 254 で追加されたばかりで安定版は未対応、Firefox も未対応。
未対応ブラウザでは開閉がアニメーションなしで切り替わるだけなので、プログレッシブエンハンスメントとしてそのまま入れてよい。
補間できるのは「数値（長さ・%）⇄ キーワード」の組み合わせだけ。auto ⇄ min-content のようにキーワード同士はアニメーションしない。
height のアニメーションはレイアウト再計算を伴うので、大量の要素を同時に動かす用途には向かない。prefers-reduced-motion: reduce では transition を切る。
ほかの「出現アニメ」との組み合わせ方はガイド: CSSだけで作るアニメーションを参照。

出典

@sanyampunia · 2026-10-17 （引用元の <details name> の投稿: @sanyampunia · 2026-10-03 ）