CSSのinterpolate-sizeでアコーディオンにトランジションをかける方法

どうも、くまだです。

CSSのinterpolate-sizeプロパティのメモ。

interpolate-sizeとは

interpolate-sizeは、height: autoやwidth: autoなどのキーワード値に対してトランジションをかけられるようにするプロパティです。

通常、height: 0からheight: autoに変化させてもアニメーションしませんが、interpolate-sizeを使うとアニメーションするようになります。

基本の書き方

:rootに以下を指定するだけで、ページ全体でautoへのトランジションが有効になります。

:root {

  interpolate-size: allow-keywords;

}

interpolate-sizeに指定できる値

interpolate-sizeに指定できる値は2つだけ。

• numeric-only：デフォルト。数値同士のみアニメーション可能
• allow-keywords：auto・min-contentなどのキーワード値もアニメーション可能

デフォルトがnumeric-onlyなので、何も指定しないとheight: 0→height: autoのような「数値→キーワード」のアニメーションは動かない。これが「今までできなかった理由」。

allow-keywordsを指定することで、キーワード値も補間対象になり、アニメーションが動くようになる。

アコーディオンへの実装例

アコーディオンのようなパーツで使うと、以下のようになります。

    <div class="container">

        <button class="btn">開く</button>
        <div class="box">
            <p>テキスト</p>
            <p>テキストテキストテキスト</p>
            <p>テキスト</p>
        </div>

    </div>

:root {
    interpolate-size: allow-keywords;
}

.container {
    padding: 80px;
    display: grid;
    row-gap: 20px;

}


.btn {
    background-color: orange;
    display: inline-block;
}


.box {
    height: 0;
    overflow: hidden;
    transition: height 0.5s;
}

.box.open {
    height: auto;
}

const btn = document.querySelector('button');
const box = document.querySelector('.box');

btn.addEventListener('click', () => {
  box.classList.toggle('open');
});

.openクラスをJSで付け外しすると、高さがアニメーションして切り替わります。

calc-size()との違い

calc-size()でも同様のことができますが、interpolate-sizeはルートに1行書くだけで済むのでシンプルです。

細かく制御したい場合はcalc-size()を使う場面もありますが、シンプルなアコーディオン程度ならinterpolate-sizeで十分です。

ブラウザ対応状況

2026年3月時点での対応状況です。

本番環境で使う際は、SafariやFirefoxユーザーへの影響を考慮してください。

まとめ

• interpolate-size: allow-keywordsを:rootに書くだけでheight: autoへのトランジションが有効になる
• アコーディオンなどの実装がシンプルに書ける
• Safari・Firefoxは未対応なので本番使用は要注意

ここまで読んでくださりありがとうございました。