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

【问题标题】：CSS Animation: Load second keyframe after firstCSS动画：在第一个关键帧之后加载第二个关键帧
【发布时间】：2011-12-04 22:20:19
【问题描述】：

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

这是我的例子：

http://jsfiddle.net/MBJbB/ 注意：仅适用于 WebKit 浏览器。

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

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

【问题讨论】：

标签： animation css keyframe css-animations

【解决方案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/

【讨论】：

谢谢，它有效！在 Mozilla 中只需更改为 mozAnimationEnd?
Mozilla的版本是animationend。当 Opera 支持动画时，我编辑了未来证明的答案，希望有一天也支持 IE。
您的回答并不完全正确，您不需要 JS。使用 CSS 很容易完成，请参阅我的答案。