interpolate-size

概要

従来、CSSではheight: 0からheight: autoへのアニメーションができませんでしたが、interpolate-sizeを使用するとこれが可能になります。アコーディオンやドロップダウンメニューの高さアニメーションなど、コンテンツ量に依存するサイズへの滑らかなトランジションを実現します。JavaScriptによる計算が不要になる画期的な機能です。

対応ブラウザ

基本構文

:root {
  interpolate-size: allow-keywords;
}
.accordion {
  height: 0;
  transition: height 0.3s ease;
}
.accordion.open {
  height: auto;
}

実務での使いどころ

• autoへの高さアニメーション

  アコーディオンの開閉でheight: 0からheight: autoへのスムーズなトランジションを、JavaScriptなしで実現します。

注意点

アクセシビリティ

• prefers-reduced-motionメディアクエリでアニメーションを無効化し、モーション感度の高いユーザーに配慮してください。

参考リンク

• MDN Web Docs — interpolate-size