title: How do you transition between display:none and display:block?
body: <p>I am trying to delay the appearance of mobile nav items (ideally without using JS to delay their appearance) until the nav overlay fully expands (0.4s).</p>
  
  <p>There are two states:
  1. non-overlay state: The top nav has a hamburger menu on the left and my name on the right. The 4 nav links are hidden.
  2. overlay state: The hamburger menu turns to an x, the top nav transitions to cover the full page, and 4 nav links appear centralized on the nav overlay.</p>
  
  <p>I've read elsewhere that modern browsers will disregard any animation or transition specifications if display: changes. Is this still the case? How can I overcome this and delay the appearance of the nav items until the overlay fully expands?</p>
  
  <p>It appears to be working here: <a href="https://codepen.io/KingKabir/pen/QyPwgG" rel="nofollow noreferrer">https://codepen.io/KingKabir/pen/QyPwgG</a> but I'm not sure how they are accomplishing it?</p>
  
  <p>I've tried using visibility: and opacity: but they don't completely hide the 4 nav elements in the non-overlay state, thus messing up my name in the right side of the nav menu in the non-overlay state.</p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;nav class="nav_container" id="overlay"&gt;
      &lt;div class="hamburger" id="hamburger" onclick="mobileMenu()"&gt;
        &lt;div class="bar1"&gt;&lt;/div&gt;
        &lt;div class="bar2"&gt;&lt;/div&gt;
        &lt;div class="bar3"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="icon_personal_container"&gt;
        &lt;a href="../index.html"&gt;
          &lt;svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="icon_personal"&gt;
            &lt;title&gt;J Logo&lt;/title&gt;
            &lt;defs&gt;
              &lt;linearGradient x1="14.6040568%" y1="100%" x2="85.3959432%" y2="0%" id="linearGradient-1"&gt;
                &lt;stop stop-color="#12A9FF" offset="0%"&gt;&lt;/stop&gt;
                &lt;stop stop-color="#FF0096" offset="100%"&gt;&lt;/stop&gt;
              &lt;/linearGradient&gt;
            &lt;/defs&gt;
            &lt;g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"&gt;
              &lt;circle fill="#333333" cx="12" cy="11.94" r="12"&gt;&lt;/circle&gt;
              &lt;polygon points="18.57144 7.82616 14.68812 7.82616 12 7.82616 12 5.16 18.57144 5.16"&gt;&lt;/polygon&gt;
              &lt;path d="M12.0021063,5.16 L17.3805494,5.16 L14.6827527,7.80073139 L14.6827527,13.044557 C14.6827527,16.5810127 13.1030779,18.9 9.57770614,18.9 C8.045129,18.9 6.72924975,18.3030871 5.82008559,17.4140986 C5.81142009,17.4056254 6.46074609,16.7540162 7.76806357,15.459271 C8.20030047,15.9163181 8.81488621,16.2138397 9.57770614,16.2138397 C11.2344382,16.2138397 11.985747,15.1509705 11.985747,13.1218565 L11.985747,5.16 L12.0021063,5.16 Z"
                fill="url(#linearGradient-1)"&gt;&lt;/path&gt;
            &lt;/g&gt;
          &lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="nav_tab" id="nav_tab_about"&gt;&lt;a href="#about" class="nav_tab_hover_effect" onclick="mobileMenu()"&gt;About&lt;/a&gt;&lt;/div&gt;
      &lt;div class="nav_tab" id="nav_tab_work"&gt;&lt;a href="#work" class="nav_tab_hover_effect" onclick="mobileMenu()"&gt;Work&lt;/a&gt;&lt;/div&gt;
      &lt;div class="nav_tab" id="nav_tab_skills"&gt;&lt;a href="#skills" class="nav_tab_hover_effect" onclick="mobileMenu()"&gt;Skills&lt;/a&gt;&lt;/div&gt;
      &lt;div class="nav_tab" id="nav_tab_contact"&gt;&lt;a href="#contact" class="nav_tab_hover_effect" onclick="mobileMenu()"&gt;Contact&lt;/a&gt;&lt;/div&gt;
      &lt;div class="blanks"&gt;&lt;/div&gt;
      &lt;div class="blanks"&gt;&lt;/div&gt;
      &lt;div id="nav_text"&gt;Jordan Tranchina&lt;/div&gt;
    &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    .nav_container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr !important;
      grid-template-rows: auto;
      column-gap: 16px;
      grid-template-areas:
        "nav-far-left nav-left nav-right nav-far-right";
    }
    .nav_container.open {
      max-height: 100%;
      height: 200%;
      background-color: #000000;
      display: grid;
      grid-template-rows: auto auto auto auto auto;
      grid-template-areas:
        "nav-far-left nav-left nav-right nav-far-right"
        "second second second second"
        "third third third third"
        "fourth fourth fourth fourth"
        "fifth fifth fifth fifth";
      transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
  
    .icon_personal_container,.blanks{
      display: none;
    }
    .nav_tab {
      display: block;
      height: 0;
      width: 0;
      visibility: hidden;
      opacity: 0;
    }
    .nav_tab.open{
      display: block;
      height: auto;
      font-size: 32px;
      font-weight: 500;
      padding-top: 64px;
      visibility: visible;
      opacity: 1;
      transition: visibility 0s linear;
    }
  
    #nav_tab_about.open{
      grid-area: second;
      transition-delay: .10s;
      width: auto;
    }
    #nav_tab_work.open {
      grid-area: third;
      transition-delay: .15s;
      width: auto;
    }
    #nav_tab_skills.open {
      grid-area: fourth;
      transition-delay: .2s;
      width: auto;
    }
    #nav_tab_contact.open {
      grid-area: fifth;
      transition-delay: .25s;
      width: auto;
    }
  
    #nav_text {
      grid-area: 1 / nav-right / 1 / nav-far-right;
    }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function mobileMenu() {
    document.getElementById("hamburger").classList.toggle("active"); // toggling active class
    document.body.classList.toggle("overlay-body"); //toggling overlay state on body
    document.getElementById("overlay").classList.toggle("open"); //toggling overlay state on nav by setting classlist to "open"
    // improve below by grabing by class not by id
    document.getElementById("nav_tab_about").classList.toggle("open");
    document.getElementById("nav_tab_work").classList.toggle("open");
    document.getElementById("nav_tab_skills").classList.toggle("open");
    document.getElementById("nav_tab_contact").classList.toggle("open");
  }
  </code></pre>
  
  <p>I expect the nav elements of class "nav_tab" to appear a few 10ths of a second after the nav_container has time to expand fully.</p>
  
  <p>The current result is that the nav elements of class "nav_tab" appear immediately, before the nav_container has time to expand fully.</p>