CSS Animation: Load second keyframe after first

I study CSS Animations and I have a question.

This is my example:

http://jsfiddle.net/MBJbB/ Note: Work only in WebKit browsers.

I have 2 keyframes. I set "first" to repeat 3 times.

After running the "first" keyf开发者_StackOverflowrame of the 3 times, I wanted to call the "second" infinite times.

Edit: joshuanhibbert's answer is more elegant. Use it.

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

And your 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/