title: Transition property works on the burger button but doesn't work on the menu with class "mobile" when hides/shows
body: <p>I'm experiencing an issue where the <code>transition</code> property works for the burger but it doesn't work for the menu. It hides/shows with no transition effect.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.top-menu .burger-menu {
    width: 35px;
    height: 5px;
    background: var(--text-dark-blue);
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    border-radius: 4px;
    transition: all .2s ease-in-out.2s;
  }
  
  .top-menu .burger-menu:before {
    content: '';
    display: block;
    width: 35px;
    height: 5px;
    background: var(--text-dark-blue);
    position: absolute;
    top: -10px;
    border-radius: 4px;
    transition: all .2s ease-in-out.2s;
  }
  
  .top-menu .burger-menu:after {
    content: '';
    display: block;
    width: 35px;
    height: 5px;
    background: var(--text-dark-blue);
    position: absolute;
    bottom: -10px;
    border-radius: 4px;
    transition: all .2s ease-in-out.2s;
  }
  
  .top-menu .burger-menu.open:before {
    transform: rotate(45deg);
    top: 0;
    transition: all .2s ease-in-out.2s;
  }
  
  .top-menu .burger-menu.open:after {
    transform: rotate(-45deg);
    bottom: 0;
    transition: all .2s ease-in-out.2s;
  }
  
  .top-menu .burger-menu .mobile {
    display: none;
    transition: all .2s ease-in-out.2s;
  }
  
  .top-menu .burger-menu.open {
    background: 0;
    transition: all .2s ease-in-out.2s;
  }
  
  .top-menu .burger-menu.open .mobile {
    display: block;
    position: absolute;
    top: 25px;
    left: -63px;
  }
  
  .top-menu .burger-menu.open .mobile ul li a {
    background: var(--text-dark-blue);
    color: #fff;
    display: block;
    min-width: 250px;
    font-size: 30px;
    line-height: 35px;
    padding: 10px;
  }
  
  .top-menu .burger-menu.open .mobile ul li a:hover {
    background-color: var(--text-light-blue);
    text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="top-menu"&gt;
    &lt;a href="#" class="logo"&gt;Site Logo&lt;/a&gt;
    &lt;div class="burger-menu"&gt;
      &lt;div class="mobile"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Free&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About us&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>