CSS 애니메이션을 큐에 넣을 수 있습니까 (예)?

Question

현재이 JS 애니메이션 플러그인은 http://www.2meter3.de/code/hoverFlow/입니다. 뚜렷한 결과는 오렌지색 예제입니다. 내가 생각하기에 CSS 전환은 노란색 예제 만 수행 할 수 있습니다.

순전히 CSS로 이것을 복제하는 방법이 있습니까?

그렇다면 CSS 전환을 사용하는 방법이 있지만 JS (jQuery)가 동일한 원리 (두 세계의 좋은 조합)를 사용하여 제어합니까?

은 어쩌면이 내 사건을 도울 수 : http://cortys.de/cssAnimate/

Answer 1

가 최대한 멀리 볼 수있는, 즉 혼자 CSS와 수 없습니다.

요소에 다른 보이지 않는 애니메이션을 실행하여 make the animation run to the end on hover의 트릭이 있지만 다시 애니메이션을 적용하려는 경우에는 작동하지 않습니다.

$('div').mouseenter(function(){ 
    $(this).addClass('animate'); 
}).on('transitionend', function(){ 
    $(this).removeClass('animate'); 
}); 

데모 : : 그러나 http://jsfiddle.net/Guffa/oq83suw3/

, 그것을 애니메이션이 완료되면 마우스 마우스 오버는 다음 클래스를 제거 할 때 자바 스크립트의 조금으로

당신은 요소에 클래스를 추가 할 수 있습니다 전환 종료 이벤트가 항상 트리거되지는 않으므로 요소가 추가 된 클래스로 인해 막힐 수 있습니다. 대신 클래스를 제거하기 위해 제한 시간을 사용할 수 있습니다

$('div').mouseenter(function(){ 
    var e = $(this); 
    e.addClass('animate'); 
    window.setTimeout(function(){ 
    e.removeClass('animate'); 
    }, 300); 
}); 

데모 : http://jsfiddle.net/Guffa/u3c2knfj/