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.