In this article, w’ell look at how to transition height: 0; to height: auto; using CSS.

How to transition height: 0; to height: auto; using CSS?

To transition height: 0; to height: auto; using CSS, we set the max-height.

For instance, we write

<div id="menu">
  <a>hover me</a>
  <ul id="list">
    <!-- ... -->
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

to add a div with a ul.

if(typeof ez_ad_units != ‘undefined’){ez_ad_units.push([[250,250],’thewebdev_info-medrectangle-3′,’ezslot_2′,320,’0′,’0′])};__ez_fad_position(‘div-gpt-ad-thewebdev_info-medrectangle-3-0’);

Thenw we write

#menu #list {
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
  background: #d5d5d5;
}

#menu:hover #list {
  max-height: 500px;
  transition: max-height 0.25s ease-in;
}

to set the max-height of the list.

And we set the transition property to the effect with the max-height applied at the end.

Conclusion

To transition height: 0; to height: auto; using CSS, we set the max-height.