height:autoをアニメーションできる時代へ：interpolate-size & calc-size の実例つき解説

interpolate-size の概要と用途

interpolate-size は CSS Values and Units Module Level の一部で、<length> や <percentage> と auto, max-content などの "intrinsic size" をトランジション対象として滑らかに補間できるようにするプロパティです。

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

.panel {
  height: 2rem;
  overflow: hidden;
  transition: height .4s ease;
}

.panel.open {
  height: auto;
}

上記のように height: auto を指定した状態への遷移も滑らかになります。

各ブラウザの対応状況 (2025年7月現在)

Chrome（および Chromium系ブラウザ）

• バージョン 129 から正式に対応開始
• interpolate-size: allow-keywords と calc-size() の両方対応

Edge (Chromium)

• 同じく v129 以降で対応

Firefox / Safari

• 現在は 未対応
• Can I use や MN でも "unsupported" の表示

️ 活用方法

interpolate-size は CSS の オプトインプロパティ で、明示的に有効化しない限り効果が出ません。

:root {
  @supports (interpolate-size: allow-keywords) {
    interpolate-size: allow-keywords;
  }
}

これを書いておくことで、対応ブラウザでは0px → auto や max-content → 200px といったトランジションの補間が滑らかになります。

calc-size() の使い方とブラウザ対応

calc-size() とは？

calc-size() は intrinsic（内在的）なサイズ、例えば auto、max-content、min-content、fit-content、content に対して演算を加えられる関数です。CSS の calc() では扱えなかったサイズに対して、演算が可能になります。 さらに、calc-size() を使うと、自動的に interpolate-size: allow-keywords が適用されたように振る舞い、アニメーションやトランジションが効くようになります。

使い方の例

.element {
  width: ;
  transition: width .6s ease;
}

.element.open {
  width: calc-size(auto, size + 2px);
}

このように書くと、auto の幅に 2px を加えたサイズへ滑らかに遷移します。

calc() との違い

• calc()：数値やパーセントを演算できるが、auto や max-content のような intrinsic サイズは扱えない。
• calc-size()：そんな intrinsic サイズを起点にした演算が可能で、しかも補間もできる。

つまり、“自動サイズ × 演算” を実現する強力な架け橋なのです。

ブラウザ対応状況（2025年7月現在）

使用時の注意点

• calc-size() を使うと、その要素には 自動的に補間能力（interpolate-size）が適用されたようになるため、interpolate-size を明示的に書かなくても遷移できます。
• ただし、ほとんどの場合、サイト全体に適用するなら interpolate-size: allow-keywords を使った方がシンプルです。
• 非対応ブラウザには @supports (calc-size()) あるいは @supports (interpolate-size: allow-keywords) を使ってフォールバックを書きましょう。

.element {
  width: fit-content;
}

.element.open {
  width: calc-size(fit-content, size + 2rem);
}

このように calc-size() は、「自動サイズのまま微調整して滑らかに動かしたい」 というUI要件にぴったりです。

サンプルコード：interpolate-size対応アコーディオン

以下は interpolate-size を使ったアコーディオンの実装例です。Chrome 129+ または Edge 129+ でご確認ください。

まとめ：interpolate-size と calc-size が開く新しいCSSアニメーション

interpolate-size や calc-size() は、これまで CSS 単体では困難だった auto へのスムーズなアニメーションを可能にする画期的なプロパティです。たとえばアコーディオンUIやドロワーなど、要素のサイズがコンテンツによって変化するケースにおいて、従来は max-height や JavaScript を併用する必要がありました。しかしこれからは、CSS のみで自然で滑らかなトランジションが実現できるようになります。

現時点での対応ブラウザは Chrome 129+ および Edge 129+ に限られていますが、今後 Firefox や Safari での実装が進めば、すべての主要ブラウザで利用可能な標準機能として普及していくことが期待されます。

特に height: auto のトランジションは、長年フロントエンド開発者の間で「できそうでできない」と言われ続けてきた難題でした。これを CSS だけで解決できるようになるという点で、interpolate-size はまさに全コーダー待望のプロパティだと言えるでしょう。

これからの CSS は「できないことを避ける」フェーズから、「できるように進化する」フェーズへと突入しています。interpolate-size と calc-size() は、その象徴的な存在です。今のうちから実験的に取り入れて、次世代の UI 実装に備えておきましょう。CSSのみでUI動作を完結する時代に向けて大きな一歩となりそうです。