How to make a smooth transition in display:block?

Question

css

The situation is this.

<div class="mp-level mp-level-open">
<h2> MENU </h2>
<li>подменю</li>
</div>

css

.mp-menu > .mp-level h2 {
    display: none;
}

As you can see, the word MENU is hidden by default.
When you click on a submenu, the submenu goes from top to bottom of the page, i.e. it overlaps the main menu (via js, the mp-level-overlay style is added to the block), and the menu word appears

<div class="class="mp-level mp-level-open mp-level-overlay"">
<h2> MENU </h2>
<li>подменю</li>
</div>

.mp-menu .mp-level.mp-level-overlay > h2, .mp-level.mp-level-overlay > h2 {
    display: block !important;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;

But the problem is that the word MENU appears too quickly, i.e. the submenu does not have time to take its place, and there the word menu appears already, I tried 2 and 10 seconds in transition .. does not help. How to make the word appear after a while?

Answer 1

through opacity

Answer 2

If you want to use jquery then .fadeIn() .fadeOut()

Answer 3

There is a transition-delay property

Answer 4

transition gives smoothness only to those properties that have numeric values ​​(%, px..)
based on this - use workarounds, as your comrades have already advised you - opacity, fadeIn/Out etc..