How Can I Trigger Callback Functions After CSS3 Animations Complete?

Can CSS3 Animations Trigger Callback Functions?

Unlike JavaScript animations, CSS3 animations do not inherently provide a direct mechanism to execute a callback function upon completion. However, there is a solution that involves utilizing event listeners.

Implementation Using JavaScript Frameworks

For example, with jQuery, you can attach an event listener to capture the completion event and invoke a callback function:

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

Implementation Using Pure JavaScript

If you prefer to work with pure JavaScript, the following code snippet demonstrates how to add event listeners for different animation end events:

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

Considerations

Keep in mind that browser support for CSS3 animation events varies. The event names used in the code snippets above cover a wide range of browsers, ensuring compatibility.

Demo

For a live demonstration, visit this JSFiddle: http://jsfiddle.net/W3y7h/

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