CSS3アニメーションの完了時にコールバックはありますか？

css3アニメーションの場合にコールバック関数を実装する方法はありますか？JavaScriptアニメーションの場合は可能ですが、css3でそれを行う方法が見つかりません。

私が見ることができる1つの方法は、アニメーション期間の後にコールバックを実行することですが、アニメーションが終了した直後に必ず呼び出されるとは限りません。ブラウザのUIキューによって異なります。より堅牢な方法が必要です。どんな手掛かり？

はいあります。コールバックはイベントであるため、イベントリスナーを追加してキャッチする必要があります。これはjQueryの例です：

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

または純粋なjs：

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

ライブデモ：http : //jsfiddle.net/W3y7h/

CSS3の遷移/ブラウザーの互換性も処理するコールバックを行う簡単な方法は、jQuery Transit Pluginです。例：

//Pulsing, moving element
$("#element").click( function () {
    $('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});

JS Fiddleデモ