interpolate-size
一般設定動畫， height 或者 width 設定成 auto 無法呈現流暢的動畫效果調整至自然寬度，而是突然改變。
透過 CSS interpolate-size 屬性設定成 allow-keywords，即可呈現呈現流暢的動畫效果。
interpolate-size 屬性是可繼承的屬性，可以在 :root 上宣告該屬性
:root {
interpolate-size: allow-keywords; /* 👈 */
}
目前瀏覽器支援度
Demo
chrome for developers 介紹 https://developer.chrome.com/docs/css-ui/animate-to-height-auto?hl=zh-tw