How to add transitions on the CSS display property?

Sometimes, we want to add transitions on the CSS display property.

We’ll look at how to add transitions on the CSS display property, in this article.

How to add transitions on the CSS display property?

First we set the transition property, to add transitions on the CSS display property.

For instance, we can write

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

to add a div with a ul element.

Then we can write

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

to add the transition property toi transition the visibility property from hidden to visible and vice versa when hover and move our mouse away from the ul respectively.

Conclusion

Then we set the transition property, to add transitions on the CSS display property.