Анімація та відображення CSS відсутні

У мене є CSS-анімація для div, який ковзає через заданий проміжок часу. Я хотів би, щоб декілька div заповнили простір анімованого div, який ковзає, і потім він висуне ці елементи вниз по сторінці.

Коли я спробую це спочатку div, який ковзає, все одно займає місце, навіть коли його не видно. Якщо я змінив div на display:nonediv, він взагалі не ковзає.

Як мені, щоб div не займав простір, доки він не приурочений до введення (використовуючи CSS для хронометражу.)

Я використовую Animate.css для анімації.

Ось як виглядає код:

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

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

Як показує код, я хотів би, щоб основний div був прихований, а інші div відображалися спочатку. Тоді у мене встановлена ​​така затримка:

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

Саме в цей момент я хотів би, щоб основний div підштовхував інші div, коли він надходить.

Як це зробити?

Примітка: Я розглядав можливість використовувати jQuery для цього, однак я віддаю перевагу використанню строго CSS, оскільки він є більш плавним і час трохи краще контролюється.

РЕДАГУВАТИ

Я спробував те, що запропонував Duopixel, але або я неправильно зрозумів і не роблю це правильно, або це не працює. Ось код:

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 (або jQuery, з цього приводу) не може анімувати між display: none;і display: block;. Гірше ще: він не може оживити між height: 0і height: auto. Тому вам потрібно жорстко кодувати висоту (якщо ви не можете жорстко кодувати значення, тоді вам потрібно використовувати javascript, але це зовсім інше питання);

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

Ви згадуєте, що використовуєте Animate.css, з яким я не знайомий, тож це ванільний CSS.

Демонстрацію ви можете побачити тут: http://jsfiddle.net/duopixel/qD5XX/

Уже є кілька відповідей, але ось моє рішення:

Я використовую opacity: 0і visibility: hidden. Щоб переконатися, що visibilityце встановлено перед анімацією, ми повинні встановити правильні затримки.

Я використовую http://lesshat.com для спрощення демонстрації, для використання без цього просто додайте префікси браузера.

(наприклад -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);
    }
}

Тож як тільки ви додасте клас hiddenдо свого елемента, він зникає.

У мене була та ж проблема, тому що як тільки display: x;входить анімація, вона не оживить.

У підсумку я створив власні ключові кадри, спочатку змінивши displayзначення, а потім інші значення. Може дати краще рішення.

Або, замість використання display: none;use, position: absolute; visibility: hidden;це має спрацювати.

Ви можете отримати чисту реалізацію CSS за допомогою 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;}
}

Ви , можливо , доведеться також встановити padding, marginі border0, або просто padding-top, padding-bottom, margin-topі margin-bottom.

Я оновив демо-версію Duopixel тут: http://jsfiddle.net/qD5XX/231/

Наступне допоможе вам анімувати елемент, коли

1. Показувати дисплей - немає
2. Надаючи йому дисплей - блок

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

Під час анімації висоти (від 0 до автоматичної) використання transform: scaleY(0);є іншим корисним підходом для приховування елемента замість display: none;:

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

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

Як мені, щоб div не займав простір, доки він не приурочений до введення (використовуючи CSS для хронометражу.)

Ось моє рішення тієї ж проблеми.

Більше того, у мене onclickна останньому кадрі завантажується інше слайд-шоу, і його не можна натискати, поки не буде видно останній кадр.

В основному моє рішення полягає в тому, щоб підтримувати divвисоту 1 пікселя за допомогою a scale(0.001), масштабуючи його, коли мені це потрібно. Якщо вам не подобається ефект масштабування, ви можете відновити значення opacity1 після масштабування слайда.

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

Інші ключові кадри видаляються заради байтів. Будь ласка, нехтуйте непарним кодуванням, це робиться за допомогою php-скрипта, вибираючи значення з масиву та замінюючи шаблон___замінивши шаблон: я лінуюсь переписати все для кожного власного префікса в слайд-шоу понад 100 divs.