web-dev-qa-db-ja.com

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

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

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

javascriptcsscss3frontend
86
alter

はいあります。コールバックはイベントなので、イベントリスナーを追加してキャッチする必要があります。これは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/

124
methodofaction

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 Demo

3
ROFLwTIME