如何在CSS中使用interpolate-size平滑过渡固有尺寸？-css教程-PHP中文网

Chrome 129+ 支持 interpolate-size: allow-keywords 实现 height: 0 → auto 平滑过渡，但 Safari/Firefox 至今不支持，须 fallback 到 max-height；该属性需设在父容器上，且仅生效于数值↔关键字过渡。

如何在css中使用interpolate-size平滑过渡固有尺寸？

Chrome 129+ 可以用 interpolate-size: allow-keywords 实现 height: 0 → height: auto 平滑过渡，但 Safari 和 Firefox 截至 2026 年 9 月仍完全不支持，必须 fallback 到 max-height 方案。

interpolate-size 必须写在父容器上，不是目标元素本身

很多人把 interpolate-size: allow-keywords 直接加在要展开的

 上，结果动画没反应——因为该属性是继承性属性，且只影响「子元素的内在尺寸计算」，对自身 height: auto 无效。正确做法是设在它的直接父级容器上：
.container {
  interpolate-size: allow-keywords;
}
.box {
  height: 0;
  overflow: hidden;
  transition: height .3s ease;
}
.box.expanded {
  height: auto;
}
如果父容器是  或 :root，可以全局生效；但要注意：若中间有 flex、grid 等布局上下文，可能打断继承链，建议就近设在直接父级。
三处容易漏掉，导致动画失效
即使父容器写了 interpolate-size: allow-keywords，动画仍可能跳帧或不触发。常见遗漏点：


height 初始值必须显式声明为 0（或具体数值），不能依赖默认的 auto


transition 必须明确包含 height，且时长建议 ≥ .25s（.1s 在 Chrome 下易跳帧）
展开状态必须保留 height: auto 作为兜底——老浏览器会忽略 interpolate-size，只认这个

interpolate-size 只支持「数值 ↔ 关键字」，不支持关键字 ↔ 关键字
它不能让 auto → max-content 或 min-content → fit-content 动起来。必须有一端是数值或百分比：

											
												
												
													CSS婚礼策划服务机构宣传网站模板
													CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
												
												下载
												
											
										

✅ 80px → auto

✅ 50% → max-content

❌ auto → max-content


这意味着你无法用它实现「从一个内在尺寸平滑过渡到另一个内在尺寸」，比如 min-content → max-content。这种场景需改用 calc-size() 配合 clamp() 或 JS 测量。
别指望它替代 max-height 方案
interpolate-size 是个实验性增强，不是兼容性解决方案。目前仅 Chrome 129+ 支持，且行为不稳定（例如在某些 flex 容器嵌套下会失效）。生产环境必须提供 fallback：

用 max-height + overflow: hidden 做主方案
用 @supports (interpolate-size: allow-keywords) 包裹 interpolate-size 启用逻辑
避免在关键交互路径中强依赖它，尤其是需要支持 Safari/iOS 的项目

最麻烦的点在于：它不报错，也不警告，只是静默失效——你得靠真实设备测试才能确认是否真动起来了。

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