# interpolate-size

> height: autoのような「キーワード値」へのtransition/animationを可能にするプロパティです。アコーディオンの開閉など「0から自然な高さまで」のアニメーションが、max-heightハックやJavaScriptなしで書けるようになります。

- カテゴリ: アニメーション・エフェクト
- URL: https://www.css-dictionary.com/property/interpolate-size/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/interpolate-size

## 構文

```css
interpolate-size: numeric-only | allow-keywords
```

## ブラウザ対応

- 対応が限定的
- Chrome 129+ / Firefox 未対応 / Safari 未対応 / Edge 129+
- 補足: Chrome/Edge限定（2026年7月時点）。非対応ブラウザではアニメーションせず瞬時に切り替わる

## コード例

### 例1: details/summaryのアコーディオンを高さautoまで滑らかに開閉

```css
: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;
}
```

### 例2: ホバーでmax-contentまで自然に広がるパネル

```css
.panel {
  interpolate-size: allow-keywords;
  width: 3rem;
  transition: width 0.3s;
}

.panel:hover {
  width: max-content;
}
```

## TIPS

:rootに一度指定すれば継承されるため、サイト全体で有効化するのが手軽です。個別の値で使いたい場合はcalc-size()関数という選択肢もあります。

## よくある間違い

非対応ブラウザではアニメーションせず瞬時に切り替わります（表示自体は壊れません）。opt-in（明示的な指定）が必要な設計なので、指定なしでheight: autoへのtransitionを書いても動きません。

## AIがよく間違えるポイント

AIはアコーディオンの高さアニメーションにmax-heightハック（適当な大きい値へのtransition、速度が不自然になる欠陥あり）やgrid-template-rows: 0fr/1frテクニック、JSのscrollHeight実装を提案しがちです。Chrome系ではinterpolate-size: allow-keywordsが最も素直な解ですが、2026年7月時点でChrome限定（limited）のため、フォールバック前提の設計をAIに求めてください。

## AIへの依頼文例

- details/summaryのアコーディオンを、interpolate-sizeを使ってheight: autoまで滑らかに開閉させて。非対応ブラウザでは瞬時切替で良い
- このmax-heightハックのアコーディオンをinterpolate-size + フォールバックの2段構えに書き換えて

## 関連プロパティ

- [transition](https://www.css-dictionary.com/property/transition.md)
- [height](https://www.css-dictionary.com/property/height.md)
- [max-width](https://www.css-dictionary.com/property/max-width.md)
- [at-starting-style](https://www.css-dictionary.com/property/at-starting-style.md)