animation - CSS アニメーション: 最初のキーフレームの後に 2 番目のキーフレームを読み込む

Question

CSS アニメーションを勉強していますが、質問があります。

これは私の例です：

http://jsfiddle.net/MBJbB/ 注: WebKit ブラウザーでのみ動作します。

私は2つのキーフレームを持っています。「最初」を3回繰り返すように設定しました。

3回の「最初」のキーフレームを実行した後、「2番目」のキーフレームを無限に呼び出したいと思いました。

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/