CSS动画和显示无

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

}


叮当猫咪
浏览 683回答 3
3回答

qq_花开花谢_0

我遇到了同样的问题,因为display: x;在动画中,它不会动画。我最终创建了自定义关键帧,首先更改了display值,然后更改了其他值。可能会提供更好的解决方案。或者,代替使用display: none;use position: absolute; visibility: hidden;应该起作用。
打开App,查看更多内容
随时随地看视频慕课网APP