transition top only works with transition all - html

Question

Hello i have a Problem with transition top.
If i do it like this, it works:
.mb-navbarCollapse {
width: 100%;
top:0px;
background-color: #515151;
background-image: url('img/darkgrey-grid-pattern.png');
background-repeat: repeat;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
But if i do it like this, transition top is not working:
.mb-navbarCollapse {
width: 100%;
top:0px;
background-color: #515151;
background-image: url('img/darkgrey-grid-pattern.png');
background-repeat: repeat;
-webkit-transition: width 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out;
-ms-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
-webkit-transition: top 0.5s ease-in-out;
-moz-transition: top 0.5s ease-in-out;
-o-transition: top 0.5s ease-in-out;
-ms-transition: top 0.5s ease-in-out;
transition: top 0.5s ease-in-out;
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
-webkit-transition: background-image 0.1s ease-in-out;
-moz-transition: background-image 0.1s ease-in-out;
-o-transition: background-image 0.1s ease-in-out;
-ms-transition: background-image 0.1s ease-in-out;
transition: background-image 0.1s ease-in-out;
-webkit-transition: background-repeat 0.1s ease-in-out;
-moz-transition: background-repeat 0.1s ease-in-out;
-o-transition: background-repeat 0.1s ease-in-out;
-ms-transition: background-repeat 0.1s ease-in-out;
transition: background-repeat 0.1s ease-in-out;
}
This is my nav:
<nav class="navbar navbar-default navbar-static-top mb-bg-red mb-red-grid-pattern">
...
</nav>
maybe this information is important. I add my class mb-navbarCollapse to <nav> but i'm not removing the class navbar which look like this:
.navbar {
height:64px;
padding-left: 30px;
padding-right:-30px;
position: absolute;
top: 150px;
-webkit-transition: top 0.3s ease-in-out;
-moz-transition: top 0.3s ease-in-out;
-o-transition: top 0.3s ease-in-out;
-ms-transition: top 0.3s ease-in-out;
transition: top 0.3s ease-in-out;
}
Thanks for reading
EDIT: Harry's answer
Okay, i did this:
-webkit-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 0s ease-in-out, background-repeat 0.1s ease-in-out;
-moz-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 0s ease-in-out, background-repeat 0.1s ease-in-out;
-o-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 0s ease-in-out, background-repeat 0.1s ease-in-out;
-ms-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 0s ease-in-out, background-repeat 0.1s ease-in-out;
transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 0s ease-in-out, background-repeat 0.1s ease-in-out;
Now top is working but background-image its also animated but i don't want to animate it :/
EDIT2: Demo http://mirsoftware.de/muthbau/