У меня есть 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
