Animation et affichage CSS Aucun

Question

J'ai une animation CSS pour une div qui se glisse après un certain temps. Ce que je voudrais, c'est que quelques divs remplissent l'espace de la div animée qui se glisse à l'intérieur, ce qui poussera ensuite ces éléments vers le bas de la page.

Lorsque j'essaie de le faire, la première division qui se glisse à l'intérieur occupe toujours de l'espace, même si elle n'est pas visible. Si je change la div en display:none le div ne se glisse pas du tout.

Comment faire pour qu'un div n'occupe pas d'espace tant qu'il n'est pas programmé pour entrer (en utilisant le CSS pour la programmation) ?

J'utilise Animate.css pour les animations.

Voici à quoi ressemble le code :

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

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

Comme le montre le code, je voudrais que la div principale soit cachée et que les autres div s'affichent d'abord. Ensuite, j'ai défini le délai suivant :

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

C'est à ce moment-là que je voudrais que la division principale pousse les autres divisions vers le bas au fur et à mesure qu'elle arrive.

Comment dois-je m'y prendre ?

Note : J'ai envisagé d'utiliser jQuery pour faire cela, mais je préfère utiliser strictement CSS car c'est plus lisse et le timing est un peu mieux contrôlé.

EDIT

J'ai essayé ce que Duopixel a suggéré, mais soit j'ai mal compris et je ne fais pas les choses correctement, soit cela ne fonctionne pas. Voici le code :

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

Answer 1

Lors de l'animation de la hauteur (de 0 à auto), l'utilisation de la fonction transform: scaleY(0); est une autre approche utile pour masquer l'élément, au lieu de display: none; :

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

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

Answer 2

Comment faire pour qu'un div n'occupe pas d'espace tant qu'il n'est pas programmé pour entrer (en utilisant le CSS pour la programmation) ?

Voici ma solution au même problème.

De plus, j'ai un onclick sur la dernière image chargeant un autre diaporama, et il ne doit pas être cliquable avant que la dernière image ne soit visible.

En fait, ma solution consiste à conserver le div 1 pixel de haut en utilisant un scale(0.001) et de zoomer quand j'en ai besoin. Si vous n'aimez pas l'effet de zoom, vous pouvez rétablir l'effet de zoom. opacity à 1 après avoir effectué un zoom sur la diapositive.

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

Les autres images clés sont supprimées pour des raisons d'octets. Veuillez ignorer le codage bizarre, il est fait par un script php script qui prend des valeurs dans un tableau et remplace un modèle par str_replacing : Je suis trop paresseux pour tout retaper pour chaque préfixe propriétaire sur un diaporama de 100+ divs.

Answer 3

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: display 0s, opacity 0.5s linear;
}