我有一个div的CSS动画，经过一定时间后会滑入。我想要几个div填充滑入的动画div的空间，然后它将这些元素向下推到页面上。

当我在第一个div尝试此操作时，即使看不见，幻灯片仍会占用空间。如果我将div更改为div，display:none则根本不会滑入。

我如何让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，而其他div首先显示。然后我设置了以下延迟：

#main-div{
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

正是在这一点上，我希望主div在出现其他div时将其推下。

我该怎么做呢？

注意：我已经考虑过使用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;
}