Can CSS3 Animations Trigger Callbacks?

Can CSS3 Animations Trigger Callbacks?

Unlike JavaScript animations that readily support callbacks, CSS3 animations initially lacked this functionality. However, through the use of event listeners, it is now possible to implement callbacks for CSS3 animations.

Event-Based Callback Implementation

The key to achieving callbacks in CSS3 is to recognize animations as events that can be listened to. By adding event listeners to the relevant DOM elements, you can execute callbacks when the animation completes.

jQuery Event Bindings

Using jQuery, you can bind an event listener to the animated element as follows:

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

This binds the event listener to three possible event types: oanimationend, animationend, and webkitAnimationEnd. The initial event is vendor-prefixed to ensure compatibility with various browsers.

Pure JavaScript Event Binding

If you prefer not to use jQuery, you can use pure JavaScript to add event listeners:

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

This approach achieves the same result but with native JavaScript code.

Demo and Browser Compatibility

A live demonstration of this callback implementation is available at http://jsfiddle.net/W3y7h/. Note that while most modern browsers support these event types, it's always advisable to check for cross-browser compatibility when implementing callbacks.

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