CSS3 애니메이션 완료시 있습니까?

CSS3 애니메이션 완료시 있습니까?

---

CSS3 애니메이션의 경우의 경우 함수를 구현하는 방법이 있습니까? 자바 스크립트 애니메이션의 경우 가능하지만 css3에서 수행하는 방법을 찾지 못합니다.

내가 볼 수있는 한 가지 방법은 애니메이션 지속 시간 지속을 실행하는 것이 애니메이션이 끝나고 항상 호출지만 보장합니다. 브라우저 UI에 따라 증가합니다. 더 강력한 방법을 원합니다. 단서가 있습니까?

---

네, 있습니다. 이벤트는 이벤트가 발생해야 할 이벤트를 추가해야합니다. 다음은 jQuery를 공장 예입니다.

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

또는 순수 js :

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

라이브 데모 : http://jsfiddle.net/W3y7h/

---

CSS3 전환 / 브라우저 사용 처리하는 것을 수행하는 쉬운 방법은 jQuery Transit Plugin 입니다. 예 :

//Pulsing, moving element
$("#element").click( function () {
    $('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});

JS Fiddle 시험

참고 URL : https://stackoverflow.com/questions/6186454/is-there-a-callback-on-completion-of-a-css3-animation