interpolate-size
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
interpolate-size は CSS のプロパティで、アニメーションおよびトランジションを、<length-percentage> 値と、内在サイズ、fit-content。max-content との間で行うことができます。
このプロパティは通常、 width や height を、 <length-percentage> とそのコンテンツのフルサイズの間（つまり、「閉じた」と「開いた」状態、あるいは「非表示」と「表示」状態の間）でアニメーションさせる場合に使用します。 transform など、ボックスモデル以外の CSS プロパティをアニメーション化する場合、これは実行可能な解決策ではありません。
メモ: interpolate-size で選択された動作は、ウェブ全体で既定で有効にすることはできません。これは、多くのサイトでは、スタイルシートが、内在サイズ値はアニメーションできないと仮定して使用されているためです。これを既定で有効にすると、いくつかの下位互換性の課題が発生します（関連する CSS WG の議論を参照してください）。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
interpolate-size 実験的 | 129 | 129 | | | 129 | |
allow-keywords 実験的 | 129 | 129 | | | 129 | |
numeric-only 実験的 | 129 | 129 | | | 129 | |
基本構文
CSS
:root {
interpolate-size: allow-keywords;
}
.accordion {
height: 0;
transition: height 0.3s ease;
}
.accordion.open {
height: auto;
}ライブデモ
実務での使いどころ
-
autoへの高さアニメーション
アコーディオンの開閉でheight: 0からheight: autoへのスムーズなトランジションを、JavaScriptなしで実現します。
注意点
- 2026年3月時点でChrome/Edgeのみの対応です。フォールバックとしてmax-heightを使ったアニメーションを検討してください。
アクセシビリティ
- prefers-reduced-motionメディアクエリでアニメーションを無効化し、モーション感度の高いユーザーに配慮してください。