¿Hay una devolución de llamada al finalizar una animación CSS3?

¿Hay alguna forma de implementar una función de devolución de llamada en caso de animación css3? En el caso de la animación de Javascript, es posible, pero no hay forma de hacerlo en css3.

Una forma que pude ver es ejecutar la devolución de llamada después de la duración de la animación, pero eso no garantiza que siempre se llamará justo después de que finalice la animación. Dependerá de la cola de la IU del navegador. Quiero un método más robusto. ¿Cualquier pista?

javascript css frontend

— alterar
fuente

posible duplicado de la devolución

— givanse

Si desea realizar una acción CSS simple, por ejemplo, ocultar el elemento después de su transición, tal vez no necesite una devolución de llamada y, en cambio, puede resolver su problema con el fotograma clave de la animación.

— Madmadi

Respuestas:

131

Sí hay. La devolución de llamada es un evento, por lo que debe agregar un detector de eventos para detectarlo. Este es un ejemplo con jQuery:

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

O js puro:

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

Demostración en vivo: http://jsfiddle.net/W3y7h/

— metodofaccion
fuente

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

— Martin Wittemann

Es transitionend, no animationend.

@MichaelJones no, eso es para las transiciones css3. la pregunta era sobre animaciones.

— joshvermaire

@MartinWittemann IE10 final ahora usa animationend msdn.microsoft.com/en-us/library/ie/… . @Husky, el código funciona en Chrome y FF 14, vea el violín actualizado jsfiddle.net/W3y7h

— methodofaction

Duplicado de stackoverflow.com/questions/9255279/… que tiene una solución más completa

— vanthome

Una forma fácil de hacer una devolución de llamada que también maneja sus transiciones CSS3 / compatibilidades de navegador sería el complemento jQuery Transit . Ejemplo:

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

Demostración de JS Fiddle

— ROFLwTIME
fuente

Punto de bonificación por compartir las especificaciones de API con jQuery animate, pero aún aprovechando la fluidez de las animaciones CSS renderizadas por hardware. Simplemente reemplazamos jQuery animate prácticamente en todos los lugares con esto.

— logan