CSS Animation : 첫 번째 이후에 두 번째 키 프레임로드

Question

CSS 애니메이션을 공부하고 질문이 있습니다.

http://jsfiddle.net/MBJbB/ 참고 : 웹킷 브라우저에서만 일

이

내 예입니다.

두 개의 키 프레임이 있습니다. 나는 "처음"을 3 번 반복하도록 설정했습니다.

"세 번째"키 프레임을 실행 한 후 "두 번째"무한 시간을 호출하고 싶었습니다.

Answer 1

편집 : joshuanhibbert의 답변이 더 우아합니다. 그걸 써.

$("#ball").bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function(){ 
    $(this).addClass("infinite"); 
}); 

그리고 당신의 CSS

#ball.infinite { 
    -webkit-animation: second 1s ease-in 0 infinite alternate; 
    -moz-animation: second 1s ease-in 0 infinite alternate; 
    -o-animation: second 1s ease-in 0 infinite alternate; 
    -ms-animation: second 1s ease-in 0 infinite alternate; 
    animation: second 1s ease-in 0 infinite alternate; 
} 

JSfiddle : http://jsfiddle.net/K74TW/