Есть ли обратный вызов по завершении анимации CSS3?

Question

Есть ли способ реализовать функцию обратного вызова в случае анимации css3? В случае анимации Javascript это возможно, но не найдено никакого способа сделать это в css3.

Один из способов, которые я мог видеть, - выполнить обратный вызов после продолжительности анимации, но это не гарантирует, что он всегда будет вызываться сразу после окончания анимации. Это будет зависеть от очереди пользовательского интерфейса браузера. Я хочу более надежный метод. Любая подсказка?

Answer 1

Да, есть. Обратный вызов - это событие, поэтому вы должны добавить прослушиватель событий, чтобы его перехватить. Это пример с 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/

Answer 2

Простой способ сделать обратный вызов, который также обрабатывает ваши переходы 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