CSS3 анимация и отображение нет

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

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

Как сделать так, чтобы div не занимал место, пока не пришло время войти (используя CSS для определения времени).

Я использую Animate.css для анимации.

Вот как выглядит код:






Как показывает код, я бы хотел, чтобы основной 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


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

Ответы на вопрос(7)

Ваш ответ на вопрос