我有一个CSS 3动画的div在一段时间后滑动。我想要的是几个div填充动画div的幻灯片中的空间，然后它将推这些元素下来的页面。
当我尝试这在第一div幻灯片仍然占用空间，即使它是不可见的。如果我改变div显示：无div不滑入。
如何让一个div不占用空间，直到它的时间进入(使用CSS的时间)。
我使用Animate.css的动画。
这里是代码看起来像：
<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div> <div id="div1"><!-- Content --></div> <div id="div2"><!-- Content --></div> <div id="div3"><!-- Content --></div>
代码显示我想要隐藏主div和其他divs首先显示。然后我有以下延迟集：
#main-div{
-moz-animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
animation-delay: 3.5s;
}
正是在这一点上，我想要主要的div推动其他divs下来，因为它进来。
我如何做到这一点？
注意：我已经考虑使用jQuery做到这一点，但我更喜欢使用严格的CSS，因为它更平滑，时间是一个更好的控制。
编辑
我尝试了Duopixel建议，但是我不明白，我不正确地做或它不工作。这里是代码：
HTML
<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>
CSS
#main-image{
height: 0;
overflow: hidden;
-moz-animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
animation-delay: 3.5s;
}
#main-image.fadeInDownBig{
height: 375px;
}
解决方法
CSS(或jQuery，为此)不能在显示之间进行动画：none;和display：block ;.更糟糕的是：它不能在高度：0和高度：auto之间进行动画。所以你需要硬编码的高度(如果你不能硬编码的值，那么你需要使用javascript，但这是一个完全不同的问题);
#main-image{
height: 0;
overflow: hidden;
background: red;
-prefix-animation: slide 1s ease 3.5s forwards;
}
@-prefix-keyframes slide {
from {height: 0;}
to {height: 300px;}
}
你提到你使用Animate.css，我不熟悉，所以这是一个香草CSS。
你可以在这里看到一个演示：http://jsfiddle.net/duopixel/qD5XX/
