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;应该起作用。