CSS过渡属性不适用于标题标签

Question

有人能告诉我为什么我的网站上的标题标签上似乎没有转换属性：http://www.hccoinc.com/about/

我有一个粘性（固定）菜单，滚动一条路径后会缩小。除了菜单上的过渡属性外，一切正常 - 高度变化应该在 0.3 秒内过渡，但它会立即发生。

这是html结构：

<header id="masthead" class="site-header" role="banner">
  <div class="container">
    <a class="site-branding" rel="home" title="HCCO, Inc. (WOSB)" href="http://www.hccoinc.com/">
      <h1 class="site-title">
      <h2 class="site-description">Piecing IT Together</h2>
    </a>
    <nav id="site-navigation" class="site-primary-navigation slide-left">
      ...
    </nav>
  </div>
</header>

这是相关的 CSS：

.site-header {
  position: fixed;
  width: 100%;
}

.site-main {
  margin-top: 107px;
}

header, header .site-title img {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

header.site-header.smaller {
  height: 55px;
  background: rgba(51, 153, 204, 0.93);
}

header.site-header.smaller .container {
  padding: 0;
}

header.site-header.smaller .site-title img {
  max-height: 54px;
}

谢谢。

Answer 1

我想通了。由于其他原因，我不得不为 .container div 应用背景颜色，然后我将过渡时间应用到 .container 高度，它现在可以工作了。