title: How to make smooth media-query transition back and forth?
body: <p>I've been digging all day long with this and can't make it work properly. I'm not a coder, so maybe that's the problem. Anyway, I'm trying to make my logo appear nicely when screen size changes. I realize I can't do it with display:none; to display:block; so I have tried visibility, opacity and height transition. </p>
  
  <p>If you look at this code below, you'll see that when going from larger screen to smaller, there's sort of delay that appears before fading out, then height animation plays. However, if you go from smaller window to larger, it transitions like 2x faster. I'm not sure how to make it reverse, so animation is smooth going back and forth. I tried to play with numerous snippets from the web, but nothing let's me control the animation properly.</p>
  
  <p>My idea is to hide logo on mobile devices, but when ppl flip a tablet, a nice transition would let logo appear for larger screens (and not only mobile, just re-sizing desktop browser would make it look more professional). Hope you can help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
   width: 500px;
   background-color: #0C6;
  }
  .nav {
   background-color: #69C;
  }
  .logo {
   max-height: 0px;
   background-color: #FC3;
     -moz-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
   visibility: hidden;
   opacity: 0;
  } 
  @media screen and (min-width: 500px){
  .logo {
   max-height: 200px;
   visibility: visible;
   opacity: 1;
  } 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class="logo"&gt;logo&lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
    &lt;/div&gt;
    &lt;div class="nav"&gt;nav&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>