How to make smooth media-query transition back and forth?

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.

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.

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.

.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;
}	
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

</head>

<body>
<div class="wrapper">
  <div class="logo">logo<br>
    <br>
    <br>
    <br>
  </div>
  <div class="nav">nav</div>
</div>
</body>
</html>

Solution

Ok finally made it work after playing around and researching a bit. Once I learned to control animation with delays on both sides it became easier.

.wrapper {
	width: 500px;
	background-color: #0C6;
}
.nav {
	background-color: #69C;
}
.logo {
    height: 0px;
    background-color: #FC3;
    visibility: hidden;
	opacity: 0;
	-webkit-transition: visibility 0.5s linear, opacity 0.5s linear, height 0.5s linear 0.8s;
	-moz-transition: visibility 0.5s linear, opacity 0.5s linear, height 0.5s linear 0.8s;
    -o-transition: visibility 0.5s linear, opacity 0.5s linear, height 0.5s linear 0.8s;
    transition: visibility 0.5s linear, opacity 0.5s linear, height 0.5s linear 0.8s;
}	
@media screen and (min-width: 500px){
.logo {
    height: 100px;
    visibility: visible;
	opacity: 1;
	-webkit-transition: height 0.5s linear 0.3s, visibility 0.5s linear 0s, opacity 0.5s linear 1s;
	-moz-transition: height 0.5s linear 0.3s, visibility 0.5s linear 0s, opacity 0.5s linear 1s;
    -o-transition: height 0.5s linear 0.3s, visibility 0.5s linear 0s, opacity 0.5s linear 1s;
    transition: height 0.5s linear 0.3s, visibility 0.5s linear 0s, opacity 0.5s linear 1s;
}	
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div class="wrapper">
  <div class="logo">logo<br>
    <br>
    <br>
    <br>
  </div>
  <div class="nav">nav</div>
</div>
</body>
</html>

Thanx to the following: http://www.greywyvern.com/?post=337 and Rémi Breton answer at: CSS transition shorthand with multiple properties?

hope this can be useful for others as well!