CSS анимация: загрузка второго ключевого кадра после первого

Question

Я изучаю анимацию CSS и у меня есть вопрос.

Это мой пример:

http://jsfiddle.net/MBJbB/ Примечание: Работа только в браузерах WebKit.

У меня есть 2 ключевых кадра. Я установил «первый» повторить 3 раза.

После запуска «первого» ключевого кадра из 3 раз я хотел вызвать «второе» бесконечное время.

Answer 1

Редактировать: ответ Джошуанибберта более элегантный.Используйте его.

$("#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/