Multiple transition delays
By Mike Street
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.