Edit Question - KnowledgeHub

Title Body

I have a CSS Animation for a div that slides in after a set amount of time. What I would like is for a few divs to fill the space of the animated div that slides in, which it will then push those elements down the page. When I attempt this at first div that slides in still takes up space even when it is not visible. If I change the div to display:none the div doesn't slide in at all. How do I have a div not take up space until it is timed to come in (using CSS for the timing.) I am using Animate.css for the animations. Here is what the code looks like: <div id="main-div" class="animated fadeInDownBig"></div> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> As the code shows I would like the main div to be hidden and the other divs show at first. Then I have the following delay set: #main-div{ -moz-animation-delay: 3.5s; -webkit-animation-delay: 3.5s; -o-animation-delay: 3.5s; animation-delay: 3.5s; } It is at that point that I would like the main div to push the other divs down as it comes in. How do I do this? Note: I have considered using jQuery to do this, however I prefer using strictly CSS as it is smoother and the timing is a bit better controlled. EDIT I have attempted what Duopixel suggested but either I mis-understood and am not doing this correctly or it doesn't work. Here is the code: HTML <div id="main-div" class="animated fadeInDownBig"></div> CSS #main-image{ height: 0; overflow: hidden; -moz-animation-delay: 3.5s; -webkit-animation-delay: 3.5s; -o-ani

Tags (comma-separated) Cancel