HTML怎么用CSS interpolate-size_html CSS interpolate-size过渡【常见问题】-html教程-PHP中文网

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

html怎么用css interpolate-size_html css interpolate-size过渡【常见问题】

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

它不是 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 → 启用 → 重启浏览器。

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

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

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

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

即使开了 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 的基础能力，但用途不同：

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 方案。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！