У меня есть CSS 3 анимация для div, который скользит через определенное количество времени. Я хотел бы, чтобы несколько div-ов заполняли пространство анимированного div-элемента, который вставляется, и затем эти элементы перемещаются вниз по странице.

Когда я пытаюсь это сделать сначала, div, который вставляется, по-прежнему занимает место, даже когда его не видно Если я изменю div наdisplay:none Div не скользит вообще.

Как сделать так, чтобы 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, так как он более плавный, а время немного лучше контролируется.

РЕДАКТИРОВАТЬ

Я попытался сделать то, что предложил Дуопиксель, но либо неправильно понял, либо делаю это неправильно, либо это не работает. Вот код:

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;
}