CSS 动画：在第一个关键帧之后加载第二个关键帧

Question

我研究 CSS 动画，有一个问题。

这是我的示例：

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

我有 2 个关键帧。我设置“第一个”重复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/