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"><!-- Content --></div>
<div id="div1"><!-- Content --></div>
<div id="div2"><!-- Content --></div>
<div id="div3"><!-- Content --></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"><!-- 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;
}
display: none
will terminate any running animation applied to the element and its descendants. If an element has adisplay
ofnone
, updatingdisplay
to a value other thannone
will start all animations applied to the element by theanimation-name
property, as well as all animations applied to descendants withdisplay
other thannone
. drafts.csswg.org/css-animations/#animations