Olou Olou - 3 months ago 6
CSS Question

CSS transition and property delay not working on mouseout

I've made a hidden vertical menu, which show on hover/active. I'm using the

transition
property with a delay.


  • When mouse is hover, menu is showing with the delay

  • When mouse is out, menu is going/draw back, but without any delay.





li {
display: block;
padding: 10px;
}
ul ul {
max-height: 0em;
overflow: hidden;
}
ul > li:hover ul,
ul > li:active ul {
max-height: 10em;
transition: 1000ms all ease 500ms;
}

<ul>
<li>Option1
<ul>
<li>OptionA</li>
<li>OptionB</li>
</ul>
</li>
<li>Option2</li>
</ul>





How can I have a delay/duration, moving back to initial value ?

PS: I can't use JavaScript.

Answer

Add the transition to the element, not the state. When the state is over (leaving the element with your mouse) the CSS takes no more effect.

Updated. Snippet now opens instantly and has a closing delay of 2000ms. By increasing the hover state delay you can increase the opening delay.

li {
  display: block;
  padding: 10px;
}

ul ul {
  max-height: 0em;
  overflow: hidden;
  -webkit-transition: 1000ms all ease 2000ms;
     -moz-transition: 1000ms all ease 2000ms;
      -ms-transition: 1000ms all ease 2000ms;
       -o-transition: 1000ms all ease 2000ms;
          transition: 1000ms all ease 2000ms;
}

ul > li:hover ul,
ul > li:focus ul,
ul > li:active ul {
  max-height: 10em;
  -webkit-transition-delay: 0s;
     -moz-transition-delay: 0s;
      -ms-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
}
<ul>
  <li>Option1
    <ul>
      <li>OptionA</li>
      <li>OptionB</li>
    </ul>
  </li>
  <li>Option2</li>
</ul>

Note: You can also use transition: 1000ms max-height ease 500ms; in this case for slightly better performance. Not significant on a single transition but they might add up.