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/