CSS interpolate-size 尺寸插值动画生成器
可视化生成 CSS interpolate-size 规则，解决传统 transition 无法对
height: auto 过渡的长期痛点。完整支持 allow-keywords
与 numeric-only 两种取值，让浏览器原生支持
auto、min-content、max-content、fit-content
等尺寸关键字的平滑过渡。配合 calc-size() 函数可在尺寸关键字基础上做计算
（如 calc-size(auto, size + 20px)）。
8 组预设覆盖折叠面板、下拉菜单、卡片展开等场景。所有处理在浏览器本地完成。
实时预览
当前状态：折叠态 · allow-keywords 已启用，尺寸关键字将平滑过渡
原理说明
- 当前 interpolate-size 为 allow-keywords：浏览器允许在动画与过渡中插值尺寸关键字（auto、min-content、max-content、fit-content 等）。这是 CSS 2024 年新增的关键能力——传统 transition 对 height: auto 无法过渡，必须用 max-height 技巧或 JS 测量；allow-keywords 让浏览器原生支持 auto 高度的平滑过渡。
生成的 CSS
/* 容器：开启尺寸关键字插值 + 过渡声明 */
.accordion-panel {
interpolate-size: allow-keywords;
transition: height 0.4s ease;
overflow: hidden; /* 折叠态尺寸为 0 时裁剪溢出内容 */
}
/* 折叠态 */
.accordion-panel[data-state="collapsed"] {
height: 0;
}
/* 展开态：配合 interpolate-size: allow-keywords 实现 auto 等关键字平滑过渡 */
.accordion-panel[data-state="expanded"] {
height: auto;
}
/* 切换 data-state 即可触发过渡 */
<!-- <button onclick="el.dataset.state = el.dataset.state === 'collapsed' ? 'expanded' : 'collapsed'">切换</button> -->常见问题
什么是 CSS interpolate-size？它解决了什么问题？
interpolate-size 是 CSS 2024 年新增属性（Chrome 129+、Firefox 129+、Safari 17.4+），
用于控制尺寸关键字（auto、min-content、max-content、
fit-content 等）是否参与动画与过渡的插值。
它解决了一个长期痛点：传统 transition 无法对 height: auto 过渡——
因为浏览器不知道 auto 的具体数值，过渡会立即跳变。
开发者只能用 max-height 技巧（设置一个足够大的 max-height 过渡）或 JS 测量元素实际高度。
设置 interpolate-size: allow-keywords 后，浏览器原生支持
auto 等关键字与数值之间的平滑过渡，无需 JS。语法：
.panel { interpolate-size: allow-keywords; transition: height 0.4s; }。
allow-keywords 和 numeric-only 有什么区别？应该选哪个？
numeric-only（默认值）：仅数值（如 200px、50%）参与插值，
尺寸关键字（auto、min-content 等）不参与插值，过渡立即跳变。
这与传统 CSS 行为一致。
allow-keywords：允许尺寸关键字参与插值，浏览器在关键字与数值之间平滑过渡。
例如 height: 0 → auto 会从 0 平滑过渡到内容的实际高度。
选型原则：如果需要在 auto、min-content、max-content、
fit-content 等关键字与数值之间过渡，必须用 allow-keywords；
如果只在数值之间过渡（如 200px → 400px），numeric-only 即可。
实际项目中 allow-keywords 是更通用的选择。
calc-size() 函数是什么？什么时候需要用它？
calc-size() 是配合 interpolate-size: allow-keywords 使用的计算函数，
让开发者在尺寸关键字基础上做加减乘除计算。语法：calc-size(<basis>, <expression>)，
其中 basis 是基础尺寸关键字（如 auto），expression 是计算表达式
（size 代表基础尺寸的当前值）。
例如 calc-size(auto, size + 20px) 表示"自动高度加 20px"，
calc-size(auto, size * 0.5) 表示"自动高度的一半"。
使用场景：当你需要在 auto 基础上加额外空间（如 padding 补偿）、
或实现"半高展开"等效果时，calc-size() 让尺寸关键字具备计算能力。
如果只用纯 auto 过渡，无需 calc-size()。
interpolate-size 和 max-height 技巧相比有什么优势？
max-height 技巧（传统方案）：设置 max-height: 0 → 1000px 实现折叠过渡。
缺点：① 需要猜测一个"足够大"的 max-height 值，过小则内容被裁剪，过大则过渡提前结束（动画结束后才到实际高度）；
② 过渡曲线不自然（前半段过渡 max-height 但实际高度未到，后半段无过渡直接跳到实际高度）；
③ 嵌套折叠面板时 max-height 会相互干扰。
interpolate-size: allow-keywords（新方案）：height: 0 → auto 浏览器自动计算实际高度并平滑过渡。
优势：① 无需猜测高度值；② 过渡曲线自然（从 0 到实际高度全程平滑）；③ 嵌套面板互不干扰。
这是 interpolate-size 最大的价值——从"max-height 黑魔法"升级为"浏览器原生 auto 过渡"。
interpolate-size 和 @starting-style、view-transition 有什么关系？
三者都是 CSS 动画能力维度的拼图，互补不替代：
interpolate-size：管"尺寸关键字的插值"——让 auto、min-content 等关键字可过渡。
解决"高度宽度过渡"问题。
@starting-style：管"元素首次出现的入场过渡"——声明起始样式，浏览器从起始过渡到最终。
解决"首次渲染/display 切换/popover 显示无过渡"问题。
view-transition：管"DOM 状态切换的视图过渡"——浏览器捕获新旧快照实现平滑过渡。
解决"页面/组件切换无动画"问题。
三者可组合使用：折叠面板用 interpolate-size 实现 auto 高度过渡，
面板首次出现用 @starting-style 实现入场动画，
页面切换用 view-transition 实现视图过渡。
为什么预览中 auto 关键字过渡看起来不流畅？
本工具的预览区使用 React inline style 应用尺寸值。浏览器对 auto 等关键字的
inline style 支持有限——inline style 中的 height: auto 不会触发 interpolate-size 插值
（因为 inline style 不经过 CSS 级联与 interpolate-size 检测）。
真实效果以生成的 CSS 为准：将生成的 CSS 复制到项目中，
配合 data-state 属性切换，即可看到 auto 关键字的平滑过渡效果。
预览区主要展示折叠/展开的视觉概念，而非精确的过渡动画。
这是工具类网站预览用户输入的固有限制——inline style 无法完全模拟 CSS 级联行为。
interpolate-size 的浏览器兼容性如何？如何渐进增强？
Chrome 129+（2024 年 9 月）、Edge 129+、
Firefox 129+（2024 年 8 月）、Safari 17.4+（2024 年 3 月）支持。
不支持的浏览器会忽略 interpolate-size 属性，尺寸关键字过渡立即跳变
（功能完整但无过渡效果）——这是天然的渐进增强，无需额外降级代码。
如果需要保证动画效果，可用 @supports 检测：
@supports (interpolate-size: allow-keywords) { /* 支持时的增强样式 */ }。
实际项目中直接使用即可，新旧浏览器体验都不会出错（新浏览器有平滑过渡，旧浏览器直接跳变）。
这个工具会保存或上传我的数据吗？
不会。本工具是纯前端应用，所有配置编辑、预览渲染、代码生成都在浏览器本地完成， 不发起任何网络请求，不保存任何用户数据。配置仅存在于当前浏览器会话中，关闭页面即清除。 可放心编辑任意 CSS 配置，无隐私泄露风险。