CSS３アニメーションの終了イベント時にjavaScript(jquery)を実行する

CSS3アニメーション（Transition）で、画面の動きが終了した後，にjQuery を実行する

jQuery.bind でアニメーションの終了イベントを登録する

bind で登録できちゃうんですよ

$("#id_are").bind("webkitTransitionEnd",function(){
  $("#id_are").text("アニメ終了")
});

addEventListerでやりますが、bind / unbind が addEventLister / removeEventLister の代替だから、コレで動いちゃったりする。

CSS３のアニメーションonEnd 的な終了イベントは webkitTransitionEndです。

アニメーションの連鎖をする

$("#id_are").bind("webkitTransitionEnd",function(){
  $("#id_are").unbind("webkitTransitionEnd")
  $("#id_are").bind("webkitTransitionEnd",function(){
     $("#id_are").toggleClass("to2")
  })
});
$("#id_are").toggleClass("t1");

アニメーション（Transition)の終了で、次のイベントを仕込んで，さらにアニメーション（Transition)をさせる。たくさん連鎖するなら （Transition)より animation でキーフレームを指定した方が良いですね。

anination / transition

用語不定で困る。CSS3のアニメーションと言われたとき、transition/animationどちらで実装するか事前によく確認のこと

transition

開始・終了を指定する。一回限り

animation

開始・中間点・終了を指定する。ループ可能

transion と animation の大きな違いは keyframe 有無です。そして用途が全然違う。
CSS3のアニメーションって言うときには transition の事がほとんどなのでアニメーションするならググらずちゃんと本を読むか原典に当たる方がよさそうでした。