如何利用HTML的CSS的interpolate-size启用从height: 0到auto的平滑过渡动画-html教程-PHP中文网

chrome 129+ 支持 interpolate-size: allow-keywords 实现 height: 0 → auto 平滑过渡，safari 和 firefox 截至2026年5月仍不支持，需 fallback 到 max-height 方案。

如何利用html的css的interpolate-size启用从height: 0到auto的平滑过渡动画

Chrome 129+ 可直接用 interpolate-size: allow-keywords 实现 height: 0 → height: auto 平滑过渡，但 Safari 和 Firefox 当前（2026年5月）仍不支持该属性，必须降级 fallback。

为什么 `interpolate-size: allow-keywords` 能起作用

浏览器默认只对数值型长度做插值（numeric-only），auto 是关键字，被跳过动画。启用 allow-keywords 后，只要一端是数值（如 0）、另一端是关键字（如 auto），引擎就会在运行时把 auto 解析为实际像素值，并逐帧插值——本质是“动态求值 + 数值过渡”。

注意：它不解决 auto → max-content 这类纯关键字互转，也不修复 display: none 切换；只对 transition 中涉及的单个可动画属性生效。

必须加的三步配置（缺一不可）

仅写 :root { interpolate-size: allow-keywords; } 不够，常见漏项如下：

height 必须显式声明初始值（如 height: 0），不能依赖 height: auto 的默认行为
transition 必须包含 height，且时间不能太短（.1s 在 Chrome 下易跳帧，推荐 .25s–.35s）
必须保留 height: auto 作为 hover/active 状态的兜底（旧版浏览器会忽略 calc-size() 或 interpolate-size，直接走 fallback）

正确写法示例：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

div {
  height: 0;
  overflow: hidden;
  transition: height .3s ease;
}
div.expanded {
  height: auto;
  height: calc-size(auto); /* Chrome 127+ 实验开启或 129+ 默认 */
}

Safari / Firefox 用户必须 fallback 到 `max-height`

截至 2026 年 5 月，Safari 最新版（16.6）仍不支持 interpolate-size，Firefox 也未实现。此时若只靠 interpolate-size，动画在这些浏览器里会退化为“瞬间展开”，毫无过渡。

安全做法是双轨并行：

用 max-height 做主兼容方案（设一个足够大的值，如 max-height: 500px）
同时保留 height + interpolate-size 供新 Chrome 使用（现代浏览器优先取 height，老浏览器回退到 max-height）
避免用 9999px 这类过大值——会导致长内容展开时动画明显拖尾；建议按内容最大预期高度设（如 FAQ 项通常 ≤ 300px）

关键细节：max-height 必须配合 overflow: hidden，否则裁剪失效；且初始状态要设 max-height: 0，不是 none。