过渡顶部仅适用于全部过渡

Question

您好，我遇到转换问题。

如果我这样做，它会起作用：

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

但是，如果我这样做，过渡顶部不起作用：

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

这是我的导航：

    <nav class="navbar navbar-default navbar-static-top mb-bg-red mb-red-grid-pattern">
...
</nav>

也许这些信息很重要。我将课程 mb-navbarCollapse 添加到<nav>，但我没有删除类似导航栏的课程：

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

感谢您阅读

编辑：哈利的回答

好的，我这样做了：

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

现在顶部正在工作，但背景图像也是动画但我不想动画它：/

EDIT2：演示http://mirsoftware.de/muthbau/