css3 анимация и отображение нет

<p>у меня есть css 3 анимация для div, который скользит через определенное количество времени. я хотел бы, чтобы несколько div-ов заполняли пространство анимированного div-компонента, который вставляется, и затем он выталкивает эти элементы вниз по странице.</p><p>когда я пытаюсь это сделать сначала, div, который вставляется, по-прежнему занимает место, даже когда его не видно. если я изменю div на <code>display:none</code>, div вообще не будет вставлен.</p><p>как сделать так, чтобы div не занимал место, пока не пришло время войти (используя css для определения времени).</p><p>я использую animate.css для анимации.</p><p>вот как выглядит код:</p><pre><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> </code></pre><p>как показывает код, я бы хотел, чтобы основной div был скрыт, а остальные div показывались сначала. тогда я установил следующую задержку:</p><pre><code>#main-div{ -moz-animation-delay: 3.5s; -webkit-animation-delay: 3.5s; -o-animation-delay: 3.5s; animation-delay: 3.5s; } </code></pre><p>именно в этот момент я бы хотел, чтобы основной div выдвигал остальные div по мере их поступления.</p><p>как мне это сделать?</p><p>примечание: я рассмотрел использование jquery для этого, однако я предпочитаю использовать строго css, так как он более плавный, а время немного лучше контролируется.</p><p><em> <strong>редактировать</strong> </em></p><p>я попытался сделать то, что предложил дуопиксель, но либо неправильно понял, либо делаю это неправильно, либо это не работает. вот код:</p><p><em> <strong>html</strong> </em></p><pre><code><div id="main-div" class="animated fadeindownbig"><!-- content --></div> </code></pre><p><em> <strong>css</strong> </em></p><pre><code>#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; } </code></pre>

<p>уже есть несколько ответов, но вот мое решение:</p><p>я использую <code>opacity: 0</code> и <code>visibility: hidden</code>. чтобы убедиться, что <code>visibility</code> установлен перед анимацией, мы должны установить правильные задержки.</p><p>я использую <a href="http://lesshat.com">http://lesshat.com</a> , чтобы упростить демонстрацию, для использования без этого просто добавьте префиксы браузера.</p><p>(например, <code>-webkit-transition-duration: 0, 200ms;</code>)</p><pre><code>.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); } } </code></pre><p>поэтому, как только вы добавите класс <code>hidden</code> к вашему элементу, он исчезнет.</p>

<p>у меня была такая же проблема, потому что, как только <code>display: x;</code> находится в анимации, он не будет оживлять.</p><p>в итоге я создал пользовательские ключевые кадры, сначала изменив значение <code>display</code>, а затем другие значения. может дать лучшее решение.</p><p>или вместо использования <code>display: none;</code> используйте <code>position: absolute; visibility: hidden;</code> это должно работать.</p>

<p>вы можете создать чистую реализацию css с помощью <code>max-height</code></p><pre><code>#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;} } </code></pre><p>возможно, вам также придется установить <code>padding</code>, <code>margin</code> и <code>border</code> в 0 или просто <code>padding-top</code>, <code>padding-bottom</code>, <code>margin-top</code> и <code>margin-bottom</code>.</p><p>я обновил демо duopixel здесь: <a href="http://jsfiddle.net/qd5xx/231/">http://jsfiddle.net/qd5xx/231/</a> </p>

<p>при анимации высоты (от 0 до авто) использование <code>transform: scaley(0);</code> является еще одним полезным способом скрытия элемента вместо <code>display: none;</code>:</p><pre><code>.section { overflow: hidden; transition: transform 0.3s ease-out; height: auto; transform: scaley(1); transform-origin: top; &.hidden { transform: scaley(0); } } </code></pre>

<blockquote> <p>как сделать так, чтобы div не занимал место, пока не пришло время войти (используя css для определения времени).</p> </blockquote><p>вот мое решение той же проблемы.</p><p>более того, у меня есть <code>onclick</code> в последнем кадре, загружающем другое слайд-шоу, и на нем нельзя нажимать, пока не будет виден последний кадр.</p><p>по сути, мое решение состоит в том, чтобы поддерживать высоту <code>div</code> 1 пикселя с помощью <code>scale(0.001)</code>, увеличивая его, когда мне это нужно. если вам не нравится эффект масштабирования, вы можете восстановить <code>opacity</code> в 1 после увеличения слайда.</p><pre><code>#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); } } </code></pre><p>другие ключевые кадры удаляются ради байтов. пожалуйста, не обращайте внимания на странную кодировку, она создается сценарием php, который выбирает значения из массива и заменяет шаблон str\_: я слишком ленив, чтобы перепечатывать все для каждого проприетарного префикса в слайд-шоу с числом элементов 100+.</p>