How Can I Execute a Callback Function After a CSS3 Animation Completes?

CSS3 Animation Completion Callback

In the realm of web development, animations play a crucial role in enhancing user experience. CSS3 animations, in particular, offer a powerful and flexible way to create dynamic visual effects. However, one common question that arises is: can we execute a callback function when a CSS3 animation completes?

The Answer

Yes, it is indeed possible to implement a callback function for CSS3 animations. This callback acts as an event that you can catch by adding an event listener. Here's how you can achieve it:

Using jQuery:

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

Using Pure JavaScript:

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

By adding an event listener to the specific animation event (the end of the animation), you can execute a callback function that will be triggered when the animation completes.

Considerations:

It's important to note that different browsers may use vendor-specific prefixes for the animation event. To ensure compatibility across browsers, it's recommended to include all three prefixes.

Example Demo:

A live demonstration of the callback function in action can be found at: http://jsfiddle.net/W3y7h/

The above is the detailed content of How Can I Execute a Callback Function After a CSS3 Animation Completes?. For more information, please follow other related articles on the PHP Chinese website!