为什么CSS中height属性的百分比单位无法实现动画/过渡效果

兄弟，这个问题我之前做定价卡片组件的时候也踩过坑！核心原因是CSS里百分比高度的工作逻辑——元素的百分比高度是相对于父元素的明确高度来计算的。你看你的.cards-container是flex布局，但它没有设置固定高度，高度是完全由子元素的内容撑起来的。

当你尝试让.middle-card从height:0%动画到height:100%时，浏览器根本不知道这个“100%”到底对应多少像素（因为父容器的高度会随着子元素展开而动态变化），所以它没法计算中间的过渡帧，只能直接从0跳到100%。而用具体像素值的时候，浏览器有明确的起止数值，自然能生成平滑动画。

我给你整理了几个实用的方案，你可以根据自己的布局需求选：

方案1：给父容器加固定高度（最简单，但不够灵活） #

如果你的卡片高度是固定的，直接给.cards-container设置一个明确的高度，这样子元素的百分比高度就有了参照：

.cards-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 50px auto;
  height: 348px; /* 把卡片的实际高度设给父容器 */
}

.middle-card {
  background: linear-gradient(#a3a8f0, #696fdd);
  color: white;
  height: 0;
  opacity: 0;
  animation: reveal-down 1s 1s cubic-bezier(.68, -0.55, .27, 1.55) forwards;
}

@keyframes reveal-down {
  to {
    height: 100%; /* 现在百分比就有意义了 */
    opacity: 1;
  }
}

这个方案的缺点是如果卡片内容高度变化，你得手动修改父容器的高度，不够灵活。

方案2：用max-height代替height（推荐，适配动态内容） #

这个方法不需要给父容器设高度，适合内容高度不固定的场景。我们通过设置max-height从0到一个足够大的值（确保能装下所有内容），配合overflow:hidden来实现展开效果：

.middle-card {
  background: linear-gradient(#a3a8f0, #696fdd);
  color: white;
  max-height: 0; /* 初始状态完全收起 */
  opacity: 0;
  overflow: hidden; /* 隐藏超出max-height的内容 */
  animation: reveal-down 1s 1s cubic-bezier(.68, -0.55, .27, 1.55) forwards;
}

@keyframes reveal-down {
  to {
    max-height: 1000px; /* 设一个比内容实际高度大的值就行 */
    opacity: 1;
  }
}

只要max-height的结束值大于卡片的实际高度，动画就会正常工作，就算内容后期有调整也不用改这个值，非常灵活。

方案3：用transform实现展开（性能最优） #

如果追求动画的流畅性，推荐用transform: scaleY()来实现垂直缩放，配合transform-origin: top让它从顶部向下展开——transform是GPU加速的，不会触发页面重排，动画会更丝滑：

.middle-card {
  background: linear-gradient(#a3a8f0, #696fdd);
  color: white;
  transform: scaleY(0); /* 初始完全收缩 */
  transform-origin: top center; /* 从顶部中心开始缩放 */
  opacity: 0;
  animation: reveal-down 1s 1s cubic-bezier(.68, -0.55, .27, 1.55) forwards;
}

@keyframes reveal-down {
  to {
    transform: scaleY(1); /* 完全展开 */
    opacity: 1;
  }
}

这个方案完全不用管高度的计算，适合复杂布局，而且动画性能最好。

• 百分比高度动画失效的本质是父元素没有明确的高度参照，浏览器无法计算百分比对应的像素值。
• 优先选max-height或transform的方案，比固定父容器高度更灵活，适配更多场景。

内容的提问来源于stack exchange，提问作者Sapinder Singh