How Can I Trigger Callback Functions with CSS3 Animations?

Employing Callbacks for CSS3 Animations

In the realm of web development, the query arises: can CSS3 animations trigger callback functions? While JavaScript animations provide this functionality, CSS3 counterparts lack such inherent support.

To circumvent this limitation, CSS3 animations can be coupled with event listeners, exploiting the fact that animations are essentially events themselves. By using jQuery or pure JavaScript, developers can subscribe to these events and invoke designated callbacks upon their completion:

jQuery:

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

Pure JavaScript:

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

These event listeners can be attached to any animated HTML element. When the animation reaches its endpoint, the specified callback function will be executed:

Note: Different browsers may exhibit varied prefixes for the event listener names. The provided examples cover the prevalent prefixes, ensuring compatibility across major browsers.

For a live demonstration, visit:

http://jsfiddle.net/W3y7h/

The above is the detailed content of How Can I Trigger Callback Functions with CSS3 Animations?. For more information, please follow other related articles on the PHP Chinese website!