CSS3 애니메이션 연쇄?

Question

내 페이지의 다른 객체에 여러 클래스를 추가하여 애니메이션에 적용합니다.

페이지로드시 jquery와 함께 addClass를 사용하여 추가합니다.

체인을 연결하는 방법이 있는지 궁금 해서요. 첫 번째 요소에 첫 번째 .animate 클래스를 추가하고 완료되면 다음 .animate 클래스를 다른 요소에 추가하십시오.

Answer 1

가장 좋은 방법은 css3 전환의 끝을 감지하고 다음 전환이 적용될 수 있도록 클래스를 변경하는 일부 논리를 사용하는 것입니다.

$("#foo").on('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function(){ 
     if($(this).hasClass('transition1'){ 
      $(this).removeClass('transition1').addClass('transition2'); 
     } 
     // apply whatever logic you want to handle the transition chaining. 
});