Tengo una animación CSS 3 para un div que se desliza después de una cantidad de tiempo establecida. Lo que me gustaría es que unos pocos divs ocupen el espacio del div animado en el que se deslizan, que luego empujará esos elementos hacia abajo en la página.

Cuando intento esto en la primera división, las diapositivas aún ocupan espacio incluso cuando no está visible. Si cambio el div adisplay:none el div no se desliza en absoluto

¿Cómo puedo hacer que un div no ocupe espacio hasta que esté programado para entrar (usando CSS para la sincronización)?

Estoy usando Animate.css para las animaciones.

Aquí es cómo se ve el código:

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>

<div id="div1"><!-- Content --></div>
<div id="div2"><!-- Content --></div>
<div id="div3"><!-- Content --></div>

Como muestra el código, me gustaría que la división principal esté oculta y que las otras div se muestren al principio. Entonces tengo el siguiente retraso establecido:

#main-div{
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

Es en ese punto que me gustaría que la división principal empuje a las otras divs hacia abajo a medida que entran.

¿Cómo hago esto?

Nota: he considerado usar jQuery para hacer esto, sin embargo, prefiero usar estrictamente CSS porque es más suave y el tiempo está un poco mejor controlado.

EDITAR

He intentado lo que Duopixel sugirió, pero no entendí bien y no lo estoy haciendo correctamente o no funciona. Aquí está el código:

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