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

CSS3 애니메이션의 경우 콜백 함수를 구현하는 방법이 있습니까? Javascript 애니메이션의 경우 가능하지만 css3에서 수행하는 방법을 찾지 못했습니다.

내가 볼 수있는 한 가지 방법은 애니메이션 지속 시간 후에 콜백을 실행하는 것이지만 애니메이션이 끝난 직후에 항상 호출되는 것을 보장하지는 않습니다. 브라우저 UI 대기열에 따라 다릅니다. 더 강력한 방법을 원합니다. 단서가 있습니까?

javascript css frontend

— 바꾸다
소스

CSS 전환에

— givanse 2014

예를 들어 전환 후 요소를 숨기는 것과 같은 간단한 CSS 작업을 수행하려면 콜백이 필요하지 않고 대신 애니메이션의 키 프레임으로 문제를 해결할 수 있습니다.

— Madmadi

답변:

130

네, 있습니다. 콜백은 이벤트이므로이를 포착하려면 이벤트 리스너를 추가해야합니다. 다음은 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/

— 방법
소스

IE10의 경우 'MSAnimationEnd'입니다 ( msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations 참조 )

— Martin Wittemann

그것은이다 transitionend,하지 animationend.

@MichaelJones 아니요, CSS3 전환 용입니다. 질문은 애니메이션에 관한 것이 었습니다.

— joshvermaire

@MartinWittemann IE10 final은 이제 animationend msdn.microsoft.com/en-us/library/ie/…를 사용합니다 . 코드가 크롬과 FF (14)의 작업을 수행 @Husky, 바이올린 업데이트를 참조하십시오 jsfiddle.net/W3y7h

— methodofaction

더 완전한 솔루션이있는 stackoverflow.com/questions/9255279/… 복제

— vanthome

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 바이올린 데모

— ROFLwTIME
소스

jQuery animate와 API 사양을 공유하지만 여전히 CSS 애니메이션의 하드웨어 렌더링 부드러움을 활용하는 것에 대한 보너스 포인트입니다. 우리는 거의 모든 곳에서 jQuery animate를 이것으로 대체했습니다.

— logan