Sometimes, we want to add transitions on the CSS display property.
In this article, we’ll look at how to add transitions on the CSS display property.
How to add transitions on the CSS display property?
To add transitions on the CSS display property, we set the transition property.
For instance, we 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 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
To add transitions on the CSS display property, we set the transition property.
