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

我遇到了同样的问题，因为display: x;在动画中，它不会动画。我最终创建了自定义关键帧，首先更改了display值，然后更改了其他值。可能会提供更好的解决方案。或者，代替使用display: none;use position: absolute; visibility: hidden;应该起作用。