[解決済み] 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/