Html 使用CSS动画设置div height动画时出现问题

我正在尝试让一个div在加载时进行动画制作，从0px高缩放到它的全高。以下是我目前为止在Chrome中开发的相关CSS，因此我只有-webkit前缀：

#teaserbar {
  width: 100%;
  overflow: hidden;
  background-color: #333;
  -webkit-animation-name: barAppear;
  -webkit-animation-duration: 3s;
}

@-webkit-keyframes barAppear {
  from {
    height: 0;
  }
  to {
    height: auto;
  }
}

以及相关的HTML：

<div id="teaserbar">
  <div class="container">
    <div class="sixteen columns clearfix">
      <p><a href="#jumper">Lorem ipsum dolor sit amet! &#8681;</a></p>
    </div>
  </div>
</div>

我几乎没有成功地让动画实际工作——起初我认为这样缩放高度可能会有问题，但我也没有成功地为div的背景色设置动画。如果有人认为这可能有助于解决我的问题，我可以提供完整的匿名来源

有什么建议吗？我觉得我一定错过了一些非常明显的东西，因为我在过去的CSS动画工作中没有遇到任何问题

---

编辑：根据格林先生的建议进行了修改，可在

上找到，正如其他人在评论中指出的那样，CSS动画似乎不支持使用高度值

auto

，一种解决方案是改为使用固定高度

如果需要支持动态高度，可以使用jQuery测量高度，然后将测量的高度应用于动画

一种可能的方法是在

#tristerbar

周围添加一个容器。将容器设置为测量的高度，并为动画使用0%和100%的开始值和结束值。对于固定高度容器中的元素，使用0%和100%的快速测试成功。不确定此解决方案是否会给页面布局带来问题，但可能有其他方法可以利用测量的高度，但不会这样做

演示（仅针对Webkit浏览器）

• （没有jQuery）
• （使用jQuery）

HTML

<div id="container">
    <div id="teaserbar">
        <p><a href="#jumper">Lorem ipsum dolor sit amet! &#8681;</a></p>
    </div>
</div>

jQuery

$(document).ready(function(){
    $('#container').height( $('#teaserbar').height() );
});

---

正如其他人在评论中指出的，CSS动画似乎不支持使用高度值

auto

，一种解决方案是使用固定高度

如果需要支持动态高度，可以使用jQuery测量高度，然后将测量的高度应用于动画

一种可能的方法是在

#tristerbar

周围添加一个容器。将容器设置为测量的高度，并为动画使用0%和100%的开始值和结束值。对于固定高度容器中的元素，使用0%和100%的快速测试成功。不确定此解决方案是否会给页面布局带来问题，但可能有其他方法可以利用测量的高度，但不会这样做

演示（仅针对Webkit浏览器）

• （没有jQuery）
• （使用jQuery）

HTML

<div id="container">
    <div id="teaserbar">
        <p><a href="#jumper">Lorem ipsum dolor sit amet! &#8681;</a></p>
    </div>
</div>

jQuery

$(document).ready(function(){
    $('#container').height( $('#teaserbar').height() );
});

---

有些不相关：-不再需要webkit。CSS3已经在所有Chromium浏览器上完全实现。谢谢，@U_Green先生在底部添加了一个指向小提琴的链接。还有一点很好，@cygorx-webkit对于较旧的版本仍然是必需的，但对于我的测试来说确实不是必需的。我不经常使用CSS3动画，但由于似乎无法将动画设置为“自动”，所以使用固定高度应该可以工作。这似乎是个问题，@Simon——以前不确定出了什么问题，但我现在可以使用固定高度的动画。我认为webkit（根据规范）实现了自动作为动画选项，但事实并非如此。我唯一担心的是，div可能会根据浏览器宽度的不同而有不同的高度，但我认为这是Javascript的工作。有些无关紧要：-不再需要webkit。CSS3已经在所有Chromium浏览器上完全实现。谢谢，@U_Green先生在底部添加了一个指向小提琴的链接。还有一点很好，@cygorx-webkit对于较旧的版本仍然是必需的，但对于我的测试来说确实不是必需的。我不经常使用CSS3动画，但由于似乎无法将动画设置为“自动”，所以使用固定高度应该可以工作。这似乎是个问题，@Simon——以前不确定出了什么问题，但我现在可以使用固定高度的动画。我认为webkit（根据规范）实现了自动作为动画选项，但事实并非如此。我唯一担心的是div可能会根据浏览器的宽度而有不同的高度，但我想这是Javascript的工作。