height: autoのような「キーワード値」へのtransition/animationを可能にするプロパティです。アコーディオンの開閉など「0から自然な高さまで」のアニメーションが、max-heightハックやJavaScriptなしで書けるようになります。
interpolate-size: numeric-only | allow-keywords:root {
interpolate-size: allow-keywords;
}
details::details-content {
height: 0;
overflow: clip;
transition: height 0.3s, content-visibility 0.3s allow-discrete;
}
details[open]::details-content {
height: auto;
}details/summaryのアコーディオンを高さautoまで滑らかに開閉
.panel {
interpolate-size: allow-keywords;
width: 3rem;
transition: width 0.3s;
}
.panel:hover {
width: max-content;
}ホバーでmax-contentまで自然に広がるパネル
:rootに一度指定すれば継承されるため、サイト全体で有効化するのが手軽です。個別の値で使いたい場合はcalc-size()関数という選択肢もあります。
非対応ブラウザではアニメーションせず瞬時に切り替わります（表示自体は壊れません）。opt-in（明示的な指定）が必要な設計なので、指定なしでheight: autoへのtransitionを書いても動きません。
AIはアコーディオンの高さアニメーションにmax-heightハック（適当な大きい値へのtransition、速度が不自然になる欠陥あり）やgrid-template-rows: 0fr/1frテクニック、JSのscrollHeight実装を提案しがちです。Chrome系ではinterpolate-size: allow-keywordsが最も素直な解ですが、2026年7月時点でChrome限定（limited）のため、フォールバック前提の設計をAIに求めてください。
details/summaryのアコーディオンを、interpolate-sizeを使ってheight: autoまで滑らかに開閉させて。非対応ブラウザでは瞬時切替で良い
このmax-heightハックのアコーディオンをinterpolate-size + フォールバックの2段構えに書き換えて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。
Chrome/Edge限定（2026年7月時点）。非対応ブラウザではアニメーションせず瞬時に切り替わる