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

Sometimes, we want to transition height: 0; to height: auto; using CSS.

We’ll look at how to transition height: 0; to height: auto; using CSS, in this article .

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

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

For instance, we can 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.

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 and the max-height applied at the end.

Conclusion

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