CSS-анимация и отображение: нет ⇐ CSS

[Anonymous]

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

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

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

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

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

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


Подробнее здесь: https://stackoverflow.com/questions/130 ... splay-none