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

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

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

Ответ 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/

Ответ 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