Подтвердить что ты не робот

Анимация перехода css chain

После загрузки страницы я хочу "отобразить" три DIVs один за другим.

как я могу это сделать?

Я знаю, как сделать одиночный div появлением на мыши, но без какого-либо запуска, один за другим, используя css, как я могу добиться такого плавного перехода?

4b9b3361

ОТВЕТЫ

Ответ 1

Хитрость заключается в том, чтобы сначала выполнить анимацию, чтобы скрыть все элементы (при загрузке страницы), и связать ее с анимацией, которая покажет элементы. Это рабочий пример для вас в PURE CSS & HTML:

div.slideIn { 
          position: absolute; 
          top: 200px; 
          width: 100px; 
          height: 100px; 
          border: 1px solid black; 
          animation-name: hide, slideIn;
          animation-duration: 5s;
          animation-timing-function: ease-in;
          animation-iteration-count: 1; 
          -moz-animation-name: hide, slideIn;
          -moz-animation-duration: 5s;
          -moz-animation-timing-function: ease-in;
          -moz-animation-iteration-count: 1; 
          -webkit-animation-name: hide, slideIn;
          -webkit-animation-duration: 5s;
          -webkit-animation-timing-function: ease-in;
          -webkit-animation-iteration-count: 1; 
          -o-animation-name: hide, slideIn;
          -o-animation-duration: 5s;
          -o-animation-timing-function: ease-in;
          -o-animation-iteration-count: 1; 
          opacity: 1;
      } 
      div.slideIn.first {
          left: 50px; 
          animation-delay: 0s, 0s;
          -moz-animation-delay: 0s, 0s;
          -webkit-animation-delay: 0s, 0s;
          -o-animation-delay: 0s, 0s;
      }
      div.slideIn.second {
          left: 150px;
          animation-delay: 0s, 2s;
          -moz-animation-delay: 0s, 2s;
          -webkit-animation-delay: 0s, 2s;
          -o-animation-delay: 0s, 2s;
      }
      div.slideIn.third {
          left: 250px;
          animation-delay: 0s, 4s;
          -moz-animation-delay: 0s, 4s;
          -webkit-animation-delay: 0s, 4s;
          -o-animation-delay: 0s, 4s;
      }
      @keyframes hide
      { 
          from { opacity: 0; } to { opacity: 0 }
      }
      @-moz-keyframes hide
      { 
          from { opacity: 0; } to { opacity: 0 }
      }
      @-webkit-keyframes hide
      { 
          from { opacity: 0; } to { opacity: 0 }
      }
      @-o-keyframes hide
      { 
          from { opacity: 0; } to { opacity: 0 }
      }
      @keyframes slideIn
      { 
            0% { opacity: 0; top: -100px; }
            1% { opacity: 1; top: -100px; }
          100% { opacity: 1; top:  200px; } 
      } 
      @-moz-keyframes slideIn
      { 
            0% { opacity: 0; top: -100px; }
            1% { opacity: 1; top: -100px; }
          100% { opacity: 1; top:  200px; } 
      } 
      @-webkit-keyframes slideIn
      { 
            0% { opacity: 0; top: -100px; }
            1% { opacity: 1; top: -100px; }
          100% { opacity: 1; top:  200px; } 
      } 
      @-o-keyframes slideIn
      { 
            0% { opacity: 0; top: -100px; }
            1% { opacity: 1; top: -100px; }
          100% { opacity: 1; top:  200px; } 
      } 
]
    
<div class="slideIn first">I slid in</div> 
    <div class="slideIn second">I'm 2nd</div> 
    <div class="slideIn third">I'm 3rd</div>

Ответ 2

Что вы, вероятно, ищете, это обратные вызовы анимации для переходов CSS. Фабрицио Стеллуто написал отличную статью по этой теме, демонстрируя несколько подходов к решению этой самой проблемы.

Если вы используете jQuery, вы можете избежать накладных расходов на обнаружение функции (sniffing), поскольку плагин уже написан (конечно...) для этой цели. Вы можете использовать его для цепочки переходов CSS, как обычно, используя вызовы анимации JavaScript в jQuery, т.е. Используя обратные вызовы анимации для вызова дополнительных обратных вызовов.

Кроме того, в StackOverflow было найдено несколько вопросов, которые вы можете найти:

Ответ 3

Используя фреймворк, такой как jQuery Transit, вы можете выполнить следующее:

JavaScript:

$(document).ready(function () {

    showDiv($('div:first'));

    function showDiv(div) {
        div.transition({
            opacity: 1
        }, 1000, function () {
            //call back
            showDiv(div.next("div"));
        });
    }
});

HTML:

<div></div>
<div></div>
<div></div>

CSS

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background-color: black;
    float: left;
    opacity: 0;
}

JS Fiddle Demo