Multiple transition delays

Today I was working with transition-delay to make something expand before it grows in height. I wanted to change the delay when a class was added and removed.

Transition delay always has to have a time unit - even when zero.

To give you an example of this, the below code makes the width and height have different transition delays:

div {
	width: 50vmin;
	height: 50vmin;
	background: red;
	transition-timing-function: linear;
	transition-duration: 0.5s;
	transition-property: height, width;
	transition-delay: 0s, 0.5s;
}
div:hover {
	width: 80vmin;
	height: 80vmin;
	transition-delay: 0.5s, 0s;
}

See an example on Codepen:

See the Pen Transition delay by mikestreety (@mikestreety) on CodePen.