0

I have a div that has a css animation transition for it's height when you hover over it. When you also hover over it, the background color change from pink to orange. However, I don't want this background color to change until after my height is done transitioning. Is there a way I can do this? I looked into using transition-delay but it seems that it can only be applied to one transition property? Thanks!

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

div:hover {
  height: 20rem;
  background: orange;
}
<div />
Jimmy
  • 2,209
  • 6
  • 32
  • 80
  • 1
    Does this answer your question? [Apply CSS properties when transition ends](https://stackoverflow.com/questions/16730597/apply-css-properties-when-transition-ends) – Eng_Farghly Mar 08 '21 at 19:07

1 Answers1

1

You can specify delays for any property you like:

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

(In this case the last 0.3s defines the delay for the background color, see e.g. on MDN)

rauberdaniel
  • 976
  • 9
  • 22