CSS背景颜色过渡不起作用

Question

其他所有东西都在使用过渡等...但是当它设置background-color时它不会淡入但只会立即改变颜色。有人有什么想法吗？

小提琴：https://jsfiddle.net/0zortp3g/1/

menuBackground是设置的类。

CSS：

header {
    width: 100%;
      height: 100%;
      top: 0;

      -webkit-transition: height 0.5s;
      -moz-transition: height 0.5s;
      -ms-transition: height 0.5s;
      -o-transition: height 0.5s;
      transition: height 0.5s;

      -webkit-transition: top 0.5s;
      -moz-transition: top 0.5s;
      -ms-transition: top 0.5s;
      -o-transition: top 0.5s;
      transition: top 0.5s;

      background-color: transparent;
      -webkit-transition: background-color 1s ease;
      -moz-transition: background-color 1s ease;
      -ms-transition: background-color 1s ease;
      -o-transition: background-color 1s ease;
      transition: background-color 1s ease;

      .header-toolbar {
        -webkit-transition: top 0.5s;
        -moz-transition: top 0.5s;
        -ms-transition: top 0.5s;
        -o-transition: top 0.5s;
        transition: top 0.5s;
        top: 35px;
      }

      h1 {
        &.header-logo {
          img {
            display: inline-block;
            height: 72px;
            line-height: 72px;
            float: left;
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -ms-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s;
          }
        }
      }

      nav {
        &.header-desktop-nav {
          position: relative;
          top: 25px;

          ul {
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -ms-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s;
          }

          .header-nav-links {
            .home {
              padding-right: 26px;
            }
          }

        }
      }

      &.smaller {
        height: 100px;
        position: fixed !important;
        top: 0px;

        -webkit-transition: top 0.5s;
        -moz-transition: top 0.5s;
        -ms-transition: top 0.5s;
        -o-transition: top 0.5s;
        transition: top 0.5s;

        &.homepage {
          top: 42px;

          -webkit-transition: top 0.5s;
          -moz-transition: top 0.5s;
          -ms-transition: top 0.5s;
          -o-transition: top 0.5s;
          transition: top 0.5s; 
        }

        h1 {
          &.header-logo img {
            height: 45px;
            line-height: 45px;
          }
        }

        nav {
          &.header-desktop-nav {
            top: 10px;
          }
        }

        .header-toolbar {
          -webkit-transition: top 0.5s;
          -moz-transition: top 0.5s;
          -ms-transition: top 0.5s;
          -o-transition: top 0.5s;
          transition: top 0.5s;
          top: 50px !important;
          float: right;
          z-index: 1;
        }

      }

      &.menuBackground {
        background-color: #333333 !important;
        -webkit-transition: background-color 1s ease;
        -moz-transition: background-color 1s ease;
        -ms-transition: background-color 1s ease;
        -o-transition: background-color 1s ease;
        transition: background-color 1s ease;
      }

    }