interpolate-size是CSS全局控制开关，用于启用“数值↔关键字”（如0px→auto）的尺寸插值动画；需在:root设interpolate-size:allow-keywords并开启Chrome实验特性，且仅支持一端为明确数值的组合。

interpolate-size 目前只在 Chrome 129+（含 Canary / Dev）中可用，且需手动开启实验特性；它不能单独“修复” height: auto 动画，必须配合一端为明确数值（如 0px、50%）才能生效。

interpolate-size 是什么、怎么开

它不是 CSS 属性，而是根级 CSS 全局控制开关，决定浏览器是否允许“内在尺寸关键字”（如 auto、max-content）参与插值计算。默认行为是 numeric-only，即只对数字做动画。

要启用关键字插值，必须在 :root 或 html 上显式声明：

html {
  interpolate-size: allow-keywords;
}

⚠️ 注意：这个声明本身不会触发任何动画——它只是“放行”规则。没它，width: 100px → max-content 仍会跳变。

立即学习“前端免费学习笔记（深入）”；

开启前还需确认 Chrome 实验特性已启用：
访问 chrome://flags/#enable-experimental-web-platform-features → 启用 → 重启浏览器。

interpolate-size 能动哪些组合

它只解决“数值 ↔ 关键字”的过渡，不支持“关键字 ↔ 关键字”。常见有效组合包括：

• 80px → auto
• 0% → max-content
• min-content → 200px
• fit-content → 1.5rem

❌ 以下写法依然无效（浏览器直接忽略 transition）：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• auto → max-content
• min-content → fit-content
• max-content → auto（顺序反了也不行）

也就是说：你必须主动选一端“钉死”为可计算值，不能两边都甩给浏览器猜。

为什么 height: auto 还是动不了

即使开了 interpolate-size: allow-keywords，height: auto 依然大概率无法平滑过渡，原因有二：

• height 属性本身在多数布局上下文中（如 block 容器内）不参与 intrinsic sizing 计算，auto 对它的语义和 width: auto 不同；目前 Chrome 仅对 width / min-width / max-width / inline-size 等横向尺寸支持 auto 插值
• 即便未来支持，height: auto 在 flex/grid 容器中可能受 align-items 或 place-items 干扰，导致实际插值基准不可控

✅ 更可靠的做法仍是老方案：max-height + overflow: hidden，初始设 max-height: 0，展开时设一个足够大的安全值（如 max-height: 500px），并确保内容高度确实在该范围内。

calc-size() 和 interpolate-size 的关系

calc-size() 是另一个新函数，它依赖 interpolate-size 的基础能力，但用途不同：

• interpolate-size 解决“能不能动”的问题（启用插值权限）
• calc-size() 解决“怎么动得更精细”的问题（比如 calc-size(max-content, size * 0.8) 表示取 max-content 实际像素的 80%）

二者常搭配使用，例如：

.card {
  width: min-content;
  transition: width 0.3s;
}
.card:hover {
  width: calc-size(min-content, size + 20px);
}

但注意：calc-size() 中的 size 只代表当前关键字对应的实际尺寸，它本身不是变量，也不能嵌套或用于非尺寸属性（如 color）。

真正容易被忽略的是：这些特性目前仅限 Chrome，Safari 和 Firefox 尚未实现；生产环境若需兼容，仍得 fallback 到 JS 驱动的高度测量 + transform: scaleY() 或 max-height 方案。