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

Ответ 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 было найдено несколько вопросов, которые вы можете найти:

• Обратный вызов перехода CSS
• Есть ли обратный вызов после завершения анимации CSS3
• Обратный вызов при завершении перехода CSS3

Ответ 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