CSS动画和显示无

Question

我有一个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;
}

Answer 1

CSS（或jQuery）无法在display: none;和之间设置动画display: block;。更糟糕的是：它无法在height: 0和之间创建动画height: 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。