延迟第二个 css 属性，直到第一个转换完成之后答案

【问题标题】：Delaying a second css property until after the first transition is complete延迟第二个 css 属性，直到第一个转换完成之后
【发布时间】：2021-06-06 16:15:41
【问题描述】：

我有一个 div，当你将鼠标悬停在它上面时，它的高度有一个 css 动画过渡。当您也将鼠标悬停在它上面时，背景颜色会从粉红色变为橙色。但是，我不希望这种背景颜色改变，直到我的高度完成过渡。有没有办法我可以做到这一点？我研究过使用transition-delay，但它似乎只能应用于一个转换属性？谢谢！

div {
  margin: 3rem;
  height: 10rem;
  width: 10rem;
  background: pink;
  transition: height 0.3s ease;
}

div:hover {
  height: 20rem;
  background: orange;
}

&lt;div /&gt;

【问题讨论】：

这能回答你的问题吗？ Apply CSS properties when transition ends

标签： html css

【解决方案1】：

您可以为您喜欢的任何属性指定延迟：

div {
  transition: height 0.3s ease, background 0.3s ease 0.3s;
}

（在这种情况下，最后 0.3 秒定义了背景颜色的延迟，参见例如MDN）

【讨论】：