[筆記] CSS – 使用 interpolate-size: allow-keywords。啟用內在大小關鍵字的動畫

—

interpolate-size

一般設定動畫， height 或者 width 設定成 auto 無法呈現流暢的動畫效果調整至自然寬度，而是突然改變。

透過 CSS interpolate-size 屬性設定成 allow-keywords，即可呈現呈現流暢的動畫效果。

interpolate-size 屬性是可繼承的屬性，可以在 :root 上宣告該屬性

:root {
    interpolate-size: allow-keywords; /* 👈 */
}