How Can I Dynamically Re-trigger WebKit CSS Animations?

Re-triggering WebKit CSS Animations Dynamically

When working with CSS animations powered by WebKit, there may be instances where you need to re-trigger an animation after its initial execution. To achieve this without relying on timeouts or multiple animations, we can leverage a built-in event: "webkitAnimationEnd."

This event fires when the animation completes, allowing us to reset and restart it programmatically. Here's how:

In Plain JavaScript:

var element = document.getElementById('box');

element.addEventListener('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
}, false);

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
    // Prevent default browser behavior here if needed.
};

In jQuery:

var $element = $('#box').bind('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
});

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
    // Prevent default browser behavior here if needed.
});

This approach provides a clean and effective way to re-trigger CSS animations on demand. It eliminates the need for complex timeouts or additional animations, ensuring smooth and seamless transitions.

The above is the detailed content of How Can I Dynamically Re-trigger WebKit CSS Animations?. For more information, please follow other related articles on the PHP Chinese website!