【CSS】calc-size()でautoをアニメーション

どうも、くまだです。

CSSのcalc-size()を使ってauto値でもアニメーションさせるメモ。

calc-size()でautoをアニメーション

CSSのcalc-size()は、例えばautoやfit-content、min-contentなどの値に対してアニメーションさせることができます。

basisのところに、autoやmin-min-contentなどのキーワードを入れます。calculationの部分に、計算式が入ります。

calc-size(basis, calculation)

例えばシンプルに書くと以下のようになります。

height: calc-size(auto, size);

例えばアコーディオンパーツのようなものも、calc-size()を使うと展開時にアニメーションします。

<details>
  <summary>アコーディオン</summary>
  <div class="contents">
    <p>テキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキスト</p>
    <p>テキスト</p>
  </div>
</details>

details::details-content {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 1s;
}
 
details[open]::details-content {
  opacity: 1;
  overflow: auto;

  height: calc-size(auto, size);
}

ちなみに、calc-size()を使わずにheightを0→autoにしてもアニメーションしないというのもあったので、そういうときはcalc-size()を使えばいいかなと思います。

2025年11月時点で、ブラウザ使用状況は以下のようになります。

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