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.

View this post on Github

You might also enjoy…

Mike Street

Written by Mike Street

Mike is a CTO and Lead Developer from Brighton, UK. He spends his time writing, cycling and coding. You can find Mike on Mastodon.