これまでは、CSSでheight: autoやwidth: autoといった「自動調整」のサイズをアニメーションさせるのは、とても難しいことでした。例えば、ボタンにマウスを合わせると幅が広がったり、アコーディオンメニューが開くときに高さがスムーズに伸びたりする動きです。
しかし、最近のCSSの進化によって、この「自動調整」のサイズも驚くほど簡単に、そしてスムーズにアニメーションさせることができるようになりました！その秘密は、新しく登場したinterpolate-sizeプロパティとcalc-size()関数にあります。今回は、これらの便利な機能がどのようなもので、どのように使えるのかを、初心者の方にもわかりやすく解説していきます。
これまでCSSでheight: autoやwidth: autoのような「自動調整」のサイズをアニメーションさせようとすると、アニメーションが途中でガクッと止まってしまったり、全く動かなかったりすることがほとんどでした。これは、autoのようなキーワード値が、具体的な数値とは異なり、アニメーションの途中の値を計算するのが難しかったためです。
そこで登場したのが、interpolate-sizeプロパティです。このプロパティをCSSの:root要素にallow-keywordsという値を指定することで、autoやmin-content、max-contentといったキーワード値と数値の間で、スムーズなアニメーションが可能になります。
:root { interpolate-size: allow-keywords; }この設定をすることで、例えば「幅が56pxからautoに変わる」といったアニメーションが、途切れることなく滑らかに動くようになります。ただし、注意点として、異なるキーワード値同士（例: autoからmin-contentへ）のアニメーションは、このプロパティだけでは補間できません。
•文字量に応じた幅のトランジション: ボタンやテキストエリアの幅を、中身の文字量に合わせて自動で広げたり縮めたりする際に、スムーズなアニメーションを実現できます。
•アコーディオンメニューの開閉: アコーディオンメニューを開閉する際、中身のコンテンツの量に合わせて高さをautoで調整し、滑らかなアニメーションで表示・非表示を切り替えることができます。
これらの例のように、コンテンツの量によってサイズが変動する要素のアニメーションを、より自然でユーザーフレンドリーなものにするために、interpolate-sizeは非常に役立ちます。
interpolate-sizeがキーワード値と数値の間のアニメーションを可能にする全体的な設定だったのに対し、calc-size()関数は、autoやmin-contentといったキーワード値に、具体的な数値を足したり引いたり、掛けたり割ったりして、より細かくサイズを制御したい場合に使う関数です。
例えば、「autoの幅にさらに100pxを足したサイズ」や、「max-contentの幅の80%のサイズ」といった計算を、アニメーションの中で行えるようになります。この関数を使うことで、より複雑で柔軟なサイズのアニメーションを実現できます。
button { width: 72px; /* アニメーション前のサイズ */ transition: width 0.4s; &:hover { width: calc-size(auto, size + 100px); /* auto + 100px のサイズ */ }
}calc-size()の最初の引数には、autoやmin-contentなどのアニメーション可能なキーワード値を指定します。2つ目の引数には計算式を記述し、この中でsizeというキーワードを使うと、最初の引数で指定したキーワード値（例: auto）を参照することができます。
•メニューの開閉アニメーション: メニューを開く際に、中身のコンテンツの幅に合わせてmin-contentの幅を基準にしつつ、さらに余白分の幅をcalc-size()で追加するといった、より洗練されたアニメーションが可能です。
calc-size()は、interpolate-size: allow-keywords;の設定がなくても単独で動作します。これは、calc-size()がキーワード値と数値の計算を部分的に行うための関数だからです。これにより、より細かいデザインの要求に応えることができます。
残念ながら、これらの新しいCSSプロパティや関数は、まだすべてのブラウザで利用できるわけではありません。2025年8月現在、interpolate-sizeプロパティとcalc-size()関数は、主にGoogle Chrome 129以上、Microsoft Edge 129以上でサポートされています。
SafariやFirefoxといった他の主要なブラウザでは、まだサポートされていませんので、これらの機能を使う際は、対象となるユーザーのブラウザ環境を考慮する必要があります。もし、すべてのブラウザで同じアニメーションを実現したい場合は、残念ながら他の方法を検討する必要があります。
https://caniuse.com/?search=interpolate-size
https://caniuse.com/?search=calc-size
では、これらのプロパティに対応していないSafariやFirefoxではどうしたらいいでしょうか。
max-heightをトランジションさせるか、CSS Gridを用いた方法が現実的な解になるでしょう。
こちらは古典的な方法ですね。max-heightをトランジションさせることによって、擬似的にheight:0→autoを実現します。
例えばアコーディオンを実装するとして、閉じた状態のアコーディオンにmax-height:50px;、開いた状態のアコーディオンにmax-height:300px;としておけば、50px〜300pxの範囲内ではコンテンツ量に合わせて高さがトランジションします。
.accordion{ max-height:50px; transition: max-height 0.3s ease-in; &.is-open{ max-height:300px; transition: max-height 0.3s ease-in; }
}ただし、中のコンテンツ量が増えてmax-heightの値を超えると動作しません。また、max-heightの値をコンテンツ量よりも大きくしすぎるとトランジションの動きが不自然な感じになります。
heightを使わずgrid-templateをトランジションさせることで、コンテンツ量に応じた可変な高さをトランジションさせることができます。コンテンツ量に左右されないので、max-heightより柔軟なアプローチです。
.accordion{ grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-in; &.is-open{ grid-template-rows: 1fr; transition: grid-template-rows 0.3s ease-in; }
}今回は、CSSアニメーションの新しい可能性を広げるinterpolate-sizeプロパティとcalc-size()関数についてご紹介しました。
これらの機能を使うことで、これまで難しかった「コンテンツの量に合わせてサイズが変動する要素」のアニメーションを、非常に簡単に、そして美しく実装できるようになります。紹介した例ではtransitionプロパティを使ったアニメーションが主でしたが、もちろんanimationプロパティでも同様に利用できます。
まだすべてのブラウザで利用できるわけではないので実務で使用する際は注意が必要ですが、全ブラウザがサポートするまではmax-heightやgrid-templateを使いつつ、早くSafariやFirefixにも実装されることを祈りましょう！
