Possiedo un'animazione CSS 3 per un div che scorre dopo un determinato intervallo di tempo. Quello che vorrei è che per alcuni divichi riempia lo spazio del div animato in cui scorre, che poi spingerà quegli elementi lungo la pagina.CSS3 Animazione e visualizzazione Nessuno
Quando provo questo al primo div che fa scorrere ancora occupa spazio anche quando non è visibile. Se cambio il div a display:none
il div non entra affatto.
Come ho un div non occupare spazio fino a quando non è a tempo di venire a (utilizzando i CSS per la tempistica.)
Sto usando Animate.css per le animazioni.
Ecco ciò che il codice è simile:
<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>
<div id="div1"><!-- Content --></div>
<div id="div2"><!-- Content --></div>
<div id="div3"><!-- Content --></div>
Come il codice mostra Vorrei che il div principale per essere nascosto e gli altri div mostrano in un primo momento. Poi ho il seguente ritardo impostato:
#main-div{
-moz-animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
animation-delay: 3.5s;
}
E 'a quel punto che vorrei il div principale per spingere gli altri div verso il basso come si tratta in
Come faccio a fare questo.?
Nota: ho preso in considerazione l'utilizzo di jQuery per farlo, tuttavia preferisco utilizzare rigorosamente CSS poiché è più fluido e il tempo è un po 'meglio controllato.
EDIT
ho cercato quello Duopixel suggerito ma o io mis-capito e non sto facendo questo correttamente o non funziona. Ecco il codice:
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;
}
Grazie per l'aiuto, non funziona o io non ce l'ho corretta. Vedi la mia modifica alla mia domanda. – L84
Scusa, stavo pensando alle transizioni CSS quando l'ho scritto (è molto più semplice tra l'altro), ho aggiornato il codice per la sintassi di animazione – Duopixel
Beautiful! Funziona come un fascino. Grazie! Dovresti controllare [Animate.css] (http://daneden.me/animate/) uno strumento molto utile per le animazioni. – L84