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