If you want different CSS transition delays on hover
and mouseout
, you have to set them using the relevant selectors. In the example below, when an element is hovered, the initial delay on hover is 0
but on mouseout
the transition is delayed by 1s
.
/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; }
/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }
You can find the full CSS in my question’s updated demo below. I’ve used the shorthand transition
property, the order of the values are:
transition:<property> <duration> <timing-function> <delay>;