Animación y visualización CSS Ninguno

Tengo una animación CSS para un div que se desliza después de un período de tiempo determinado. Lo que me gustaría es que algunos divs llenen el espacio del div animado que se desliza, que luego empujará esos elementos hacia abajo en la página.

Cuando intento esto al principio, el div que se desliza todavía ocupa espacio incluso cuando no es visible. Si cambio el div a display:nonediv no se desliza en absoluto.

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

Estoy usando Animate.css para las animaciones.

Así es como 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 el div principal estuviera oculto y los otros divs se mostraran 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 el div principal empujara a los otros divs hacia abajo a medida que entra.

¿Cómo hago esto?

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

EDITAR

Intenté lo que sugirió Duopixel, pero entendí mal 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;
}

CSS (o jQuery, para el caso) no puede animar entre display: none;y display: block;. Peor aún: no puede animar entre height: 0y height: auto. Por lo tanto, debe codificar la altura (si no puede codificar los valores, entonces debe usar javascript, pero esta es una pregunta completamente diferente);

#main-image{
    height: 0;
    overflow: hidden;
    background: red;
   -prefix-animation: slide 1s ease 3.5s forwards;
}

@-prefix-keyframes slide {
  from {height: 0;}
  to {height: 300px;}
}

Mencionas que estás usando Animate.css, con el que no estoy familiarizado, así que este es un CSS de vainilla.

Puede ver una demostración aquí: http://jsfiddle.net/duopixel/qD5XX/

Ya hay algunas respuestas, pero aquí está mi solución:

Yo uso opacity: 0y visibility: hidden. Para asegurarnos de que visibilityesté configurado antes de la animación, tenemos que configurar los retrasos correctos.

Utilizo http://lesshat.com para simplificar la demostración, para usar sin esto, solo agregue los prefijos del navegador.

(por ejemplo -webkit-transition-duration: 0, 200ms;)

.fadeInOut {
    .transition-duration(0, 200ms);
    .transition-property(visibility, opacity);
    .transition-delay(0);

    &.hidden {
        visibility: hidden;
        .opacity(0);
        .transition-duration(200ms, 0);
        .transition-property(opacity, visibility);
        .transition-delay(0, 200ms);
    }
}

Tan pronto como agregue la clase hiddena su elemento, se desvanecerá.

Tuve el mismo problema, porque tan pronto como display: x;esté en animación, no se animará.

Terminé creando fotogramas clave personalizados, primero cambiando el displayvalor y luego los otros valores. Puede dar una mejor solución.

O, en lugar de usar display: none;use position: absolute; visibility: hidden;It debería funcionar.

Puede lograr tener una implementación CSS pura con max-height

#main-image{
    max-height: 0;
    overflow: hidden;
    background: red;
   -prefix-animation: slide 1s ease 3.5s forwards;
}

@keyframes slide {
  from {max-height: 0;}
  to {max-height: 500px;}
}

Puede que tenga que establecer también padding, marginy borderen 0, o simplemente padding-top, padding-bottom, margin-topy margin-bottom.

Actualicé la demostración de Duopixel aquí: http://jsfiddle.net/qD5XX/231/

Lo siguiente le permitirá animar un elemento cuando

1. Darle una pantalla - Ninguno
2. Darle una pantalla - Bloque

CSS

.MyClass {
       opacity: 0;
       display:none;
       transition: opacity 0.5s linear;
       -webkit-transition: opacity 0.5s linear;
       -moz-transition: opacity 0.5s linear;
       -o-transition: opacity 0.5s linear;
       -ms-transition: opacity 0.5s linear;
 }

JavaScript

function GetThisHidden(){
    $(".MyClass").css("opacity", "0").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', HideTheElementAfterAnimation);
}

function GetThisDisplayed(){
    $(".MyClass").css("display", "block").css("opacity", "1").unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend");
}

function HideTheElementAfterAnimation(){
    $(".MyClass").css("display", "none");
}

Al animar la altura (de 0 a automático), usar transform: scaleY(0);es otro enfoque útil para ocultar el elemento, en lugar de display: none;:

.section {
  overflow: hidden;
  transition: transform 0.3s ease-out;
  height: auto;
  transform: scaleY(1);
  transform-origin: top;

  &.hidden {
    transform: scaleY(0);
  }
}

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

Aquí está mi solución al mismo problema.

Además, tengo un onclicken el último fotograma cargando otra presentación de diapositivas, y no se debe poder hacer clic hasta que el último fotograma sea visible.

Básicamente, mi solución es mantener el div1 píxel alto usando un scale(0.001)zoom cuando lo necesito. Si no le gusta el efecto de zoom, puede restaurarlo opacitya 1 después de hacer zoom en la diapositiva.

#Slide_TheEnd {

    -webkit-animation-delay: 240s;
    animation-delay: 240s;

    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;

    -moz-animation-duration: 20s;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;

    -moz-animation-name: Slide_TheEnd;
    -webkit-animation-name: Slide_TheEnd;
    animation-name: Slide_TheEnd;

    -moz-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

    -moz-animation-direction: normal;
    -webkit-animation-direction: normal;
    animation-direction: normal;

    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    transform: scale(0.001);
    background: #cf0;
    text-align: center;
    font-size: 10vh;
    opacity: 0;
}

@-moz-keyframes Slide_TheEnd {
    0% { opacity: 0;  transform: scale(0.001); }
    10% { opacity: 1; transform: scale(1); }
    95% { opacity: 1; transform: scale(1); }
    100% { opacity: 0;  transform: scale(0.001); }
}

Otros fotogramas clave se eliminan por el bien de los bytes. Por favor, ignore la codificación extraña, está hecha por un script php que selecciona valores de una matriz y str_replacing una plantilla: Soy demasiado vago para volver a escribir todo para cada prefijo propietario en una presentación de diapositivas de más de 100 divs.