#优质博文 #前端 #css #新特性
CSS 现在终于支持高度 auto 过渡动画了

AI 摘要：在 Chrome 129 及以上版本中，CSS 引入了 calc-size 和 interpolate-size 属性，支持对 auto 高度的过渡动画。通过使用 calc-size(auto) ，可以使 height: auto 实现过渡效果，避免了之前无法过渡的限制。calc-size 还支持其他尺寸关键词，如 min-content 、max-content 等，甚至可以混合计算。为简化使用，interpolate-size: allow-keywords 属性允许全局支持关键词，如 auto ，免去局部修改的麻烦。此外，还可以利用 calc-size 或 interpolate-size 在 details 元素中实现展开折叠的过渡效果。此特性虽然兼容性较差，但为前端开发提供了更强的动画支持，可以渐进过渡

via 微信公众号 前端侦探

Weixin Official Accounts Platform

CSS 现在终于支持高度 auto 过渡动画了