interpolate-size: allow-keywords 必须设在父容器上，仅 Chromium 支持，需显式数值起点、明确 height transition，且仅支持数值与内在关键字（如 auto）间过渡。
interpolate-size: allow-keywords 必须设在父容器上
很多人把 interpolate-size: allow-keywords 直接加在要过渡的元素上，结果毫无动画——因为这个属性是继承性属性，且只影响「子元素的内在尺寸计算」。它对自身 height: auto 无效。
正确做法是设在目标元素的**直接父容器**（即包含块）上：
.accordion-header + .accordion-panel { height: 0; overflow: hidden; transition: height 0.3s ease; }
.accordion { interpolate-size: allow-keywords; }
.accordion-panel.expanded { height: auto; }
如果父容器是 :root 或 <body>，可全局启用；但注意：Flex/Grid 容器可能截断继承链，建议就近设置。
必须搭配显式数值起点和 transition 声明
interpolate-size: allow-keywords 本身不触发动画，只是“放行”关键字参与插值。真正驱动过渡的是 transition，且起点不能依赖默认值。
立即学习“前端免费学习笔记（深入）”；
-
height初始值必须显式写为0、20px等具体数值，不能留空或靠height: auto回退 -
transition必须明确包含height，例如transition: height 0.3s ease，不能只写transition: all（部分浏览器不识别） - 时长建议 ≥
0.25s，Chrome 下0.1s易跳帧
仅支持数值 ↔ 关键字，不支持 auto ↔ max-content 这类组合
该特性只允许一端是数值（如 80px、50%），另一端是内在尺寸关键字（auto、max-content、min-content、fit-content）。以下写法无效：
-
height: auto → height: max-content（两个关键字） width: min-content → width: fit-content
可行的组合示例：
.card { width: 120px; transition: width 0.4s; }
.card:hover { width: max-content; }
若需 auto → max-content，得用 calc-size(max-content) 或 JS 测量后赋值。
当前仅 Chromium 支持，Safari/Firefox 完全不认
截至 2026 年 9 月，interpolate-size 仍属实验性功能：
- 仅 Chrome 129+ / Edge 129+ 等 Chromium 内核浏览器支持
- 必须手动开启
chrome://flags/#enable-experimental-web-platform-features并**完全重启浏览器** - Safari 和 Firefox 当前无实现，也未列入公开路线图
生产环境必须 fallback：max-height 模拟或 JS 测量 + height 过渡。别指望靠它解决兼容性问题。
