aspect-ratio 不支持 CSS 动画，transition 无效；可行方案是用 transform: scale() 模拟视觉比例变化，或用 height + JS 计算配合 transition 实现高度渐变动画。
aspect-ratio 本身不支持 CSS 动画，直接 transition aspect-ratio 会静默失效
浏览器目前（截至 2026 年 10 月）**不支持对 aspect-ratio 属性做过渡动画**。写 transition: aspect-ratio 0.3s 不会报错，但也不会产生任何动画效果——该属性会被完全忽略，高度切换是瞬时的。
常见错误现象：div { aspect-ratio: 4 / 3; transition: aspect-ratio 0.3s; } → 切换 class 改为 aspect-ratio: 16 / 9 时，高度突变，无缓动。
- 原因：
aspect-ratio是一个布局计算属性，参与盒模型构建阶段，不属于可插值的“呈现属性”（如opacity、transform） - 它不像
width或height那样有明确的数值中间态；浏览器不会在两个比例间线性插值出“8.5 / 5.2”这种中间比值 - 所有主流引擎（Blink、Gecko、WebKit）均未实现该属性的动画支持，
@supports (aspect-ratio: 1 / 1)也无法检测动画能力
用 transform + 容器缩放模拟“比例变化动画”
真正可行的平滑方案，是放弃动 aspect-ratio，改用 transform: scale() 控制视觉比例变化，同时保持原始容器尺寸稳定。
适用场景：卡片展开/收起、预览图放大、响应式网格中某项高亮放大等需要“看起来像比例变了”的交互。
立即学习“前端免费学习笔记（深入）”；
- 给容器设固定
aspect-ratio（比如aspect-ratio: 4 / 3），确保基础布局不抖动 - 内部内容层（如
<div class="content">）设 <code>transform-origin: center，并用scale()控制缩放 - 动画目标不是改变比例，而是让内容“填满新比例区域”的视觉错觉：例如从 4:3 缩放到 16:9，实际是内容横向拉伸 + 纵向压缩
- 必须配
transform: scale(1.33, 0.75)这类非等比缩放（16/4 = 4, 9/3 = 3 → 横向 ×4、纵向 ÷3？不对 —— 正确是：目标宽高比 / 原宽高比 = (16/9) / (4/3) = 4/3 ≈ 1.33，所以scaleX(1.33)即可模拟横向延展感） - 慎用：
scale会缩放子元素文字和边框，需额外重置font-size或用transform: scale()+transform: scale(1 / 1.33)反向补偿 - 先移除
aspect-ratio，改用 JS 计算：比如容器宽度是300px，目标比例16 / 9→ 高度 =300 * 9 / 16 = 168.75px - 设置
height: 168.75px; transition: height 0.3s ease;，再切到4 / 3时高度变为225px - 为防内容溢出跳动，加
overflow: hidden，并确保子元素不触发最小高度撑开 - 注意兼容性：Safari ≤ 15.4 不支持
aspect-ratio，但支持height过渡，此方案天然兜底 - 性能提示：
height动画会触发 layout，不如transform流畅；若容器内只有图片，可用max-height+padding-tophack 组合过渡（但更复杂）
用 height + max-height + overflow 实现“高度渐变”动画
当你要的是“容器高度随比例变化而平滑伸缩”，而不是视觉上拉伸内容，最稳的 fallback 是放弃 aspect-ratio 动画，改用传统尺寸过渡。
关键点：用 JS 读取目标比例，算出对应高度值，再交由 CSS 过渡。
真正容易被忽略的点：动画时机必须和 IntersectionObserver / load 事件对齐
如果你在懒加载图片后触发动画，别只监听 img.onload 就立刻开始 transition —— 此时 aspect-ratio 容器可能还没完成首次布局计算，尤其在 Safari 中会有 1 帧延迟。
正确做法是：等容器渲染完成后再启动动画，推荐用 requestAnimationFrame 套一层：
img.addEventListener('load', () => {
requestAnimationFrame(() => {
container.classList.add('animate-height');
});
});否则你会看到：图片一闪出现，然后容器才“啪”地一下拉高，动画起点错位。
