interpolate-size: allow-keywords 仅启用关键字与数值间的插值能力，不触发动画；需配合 transition 使用，且必须设在子元素的父容器上，目前仅 Chromium 实验性支持。
interpolate-size: allow-keywords 本身不触发动画，只是“放行”规则
加了 interpolate-size: allow-keywords;，height: auto → height: 200px 依然会跳变——这不是 bug，是设计使然。它只解决「数值 ↔ 关键字」之间的插值能力，不提供动画逻辑。真正驱动过渡的，还是老朋友 transition，比如 transition: height 0.3s ease;。但如果没有 interpolate-size，浏览器压根不认为 auto 能参与插值计算，直接放弃过渡。
必须手动启用 Chrome 实验特性才能生效
截至 2026 年 5 月，interpolate-size 仍处于实验阶段，仅在 Chromium 内核浏览器（Chrome、Edge、Brave 等）中可用，且需主动开启：
- 访问
chrome://flags/#enable-experimental-web-platform-features - 将该 flag 设为
Enabled - 完全重启浏览器（不是刷新或新建窗口）
没重启 = 白配。Safari 和 Firefox 当前完全不支持该属性，也不在已知实现路线图中。
只支持数值 ↔ 关键字，不支持关键字 ↔ 关键字
interpolate-size 的作用边界很明确：它让浏览器能“估算”关键字对应的实际尺寸，再做线性插值。有效组合包括：
-
height: auto↔height: 120px -
width: max-content↔width: 300px -
min-width: fit-content↔min-width: 20em
但以下写法无效，不会过渡，也不会报错：
-
height: auto→height: fit-content（关键字到关键字） -
width: min-content→width: max-content
遇到这类需求，得换思路：用 JS 测量目标尺寸后显式设置数值，或改用 transform: scaleY() + overflow: hidden 模拟高度变化。
必须设在「尺寸被计算的容器」上，不是动画元素本身
正确做法是设在它的**父容器**（即该 漏掉这层父子关系，整个机制就卡死——这也是最常被忽略的部署细节。interpolate-size 是一个**继承性 CSS 属性**，但它只对「其子元素的内在尺寸计算」起作用。典型错误是把它写在要动 height 的那个 /* ❌ 错误：对自身 height:auto 无效 */<br>.box {<br> height: auto;<br> transition: height 0.3s;<br> interpolate-size: allow-keywords;<br>}
height: auto 元素的包含块）：/* ✅ 正确：父容器启用插值，子元素才可平滑过渡 */<br>.container {<br> interpolate-size: allow-keywords;<br>}<br>.box {<br> height: auto;<br> transition: height 0.3s;<br>}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
