Existe um retorno de chamada na conclusão de uma animação CSS3?

Existe alguma maneira de implementar uma função de retorno de chamada no caso de animação css3? No caso de animação Javascript é possível mas não encontrando forma de fazê-lo no css3.

Uma maneira que eu pude ver é executar o callback após a duração da animação, mas isso não garante que ele sempre será chamado logo após o término da animação. Dependerá da fila da IU do navegador. Eu quero um método mais robusto. Qualquer pista?

javascript css frontend

— alterar
fonte

possível duplicata de Callback na transição CSS

— dado

se você quiser fazer uma ação CSS simples, por exemplo, ocultar o elemento após sua transição, talvez você não precise de um retorno de chamada e, em vez disso, pode resolver seu problema com o quadro-chave da animação.

— Madmadi

Respostas:

130

Sim existe. O retorno de chamada é um evento, portanto, você deve adicionar um ouvinte de evento para capturá-lo. Este é um exemplo com jQuery:

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

Ou puro js:

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

Demonstração ao vivo: http://jsfiddle.net/W3y7h/

— método de ação
fonte

Para o IE10 é 'MSAnimationEnd' (consulte msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations )

— Martin Wittemann

É transitionend, não animationend.

@MichaelJones não, isso é para transições css3. a questão era sobre animações.

— joshvermaire

@MartinWittemann IE10 final agora usa animationend msdn.microsoft.com/en-us/library/ie/… . @Husky, o código funciona no Chrome e no FF 14, consulte fiddle jsfiddle.net/W3y7h

— methodofaction

Duplicado de stackoverflow.com/questions/9255279/… que tem uma solução mais completa

— vanthome

Uma maneira fácil de fazer um retorno de chamada que também lida com suas transições CSS3 / compatibilidades do navegador seria o plug-in jQuery Transit . Exemplo:

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

JS Fiddle Demo

— ROFLwTIME
fonte

Ponto de bônus por compartilhar especificações de API com jQuery animate, mas ainda aproveitando a suavidade renderizada por hardware das animações CSS. Acabamos de substituir o jQuery animate em quase todos os lugares por isso.

— logan