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

Question

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

这是我的例子：

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

我有 2 个关键帧。我将“第一”设置为重复 3 次。

在运行 3 次的“第一个”关键帧之后，我想调用“第二个”无限次。

Answer 1

编辑：josuanhibbert 的回答更优雅。用它。

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