animation - CSS 动画 : Load second keyframe after first

Question

我学习 CSS 动画，我有一个问题。

这是我的例子:

http://jsfiddle.net/MBJbB/ 注意:只能在 WebKit 浏览器中工作。

我有 2 个关键帧。我设置“first”重复 3 次。

运行完第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/