How Can I Re-trigger WebKit CSS Animations Using JavaScript?

Re-triggering WebKit CSS Animations with JavaScript

Problem

Animations defined using the -webkit-animation rule can only be triggered once. To trigger the animation again, you need a way to reset it after it has completed.

Solution

The solution lies in utilizing the webkitAnimationEnd event, which is fired when a WebKit CSS animation finishes. By adding an event listener to the animated element, you can detect when the animation ends and reset its properties to allow it to be triggered again.

Implementation

Plain JavaScript:

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

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

document.getElementById('button').onclick = function() {
  element.style.webkitAnimationName = 'shake';
  // You may want to preventDefault here.
};

jQuery:

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

$('#button').click(function() {
  $element.css('webkitAnimationName', 'shake');
  // You may want to preventDefault here.
});

Cross-Browser Support:

The provided code works specifically for WebKit browsers. To support other browsers, you can use a feature detection library like this one:

var css3AnimationSupport = (function() {
  var div = document.createElement('div'),
    divStyle = div.style,
    support = {
      transition:
        divStyle.MozTransition === '' ? { name: 'MozTransition', end: 'transitionend' } :
        // Will ms add a prefix to the transitionend event?
        (divStyle.MsTransition === '' ? { name: 'MsTransition', end: 'msTransitionend' } :
        (divStyle.WebkitTransition === '' ? { name: 'WebkitTransition', end: 'webkitTransitionEnd' } :
        (divStyle.OTransition === '' ? { name: 'OTransition', end: 'oTransitionEnd' } :
        (divStyle.transition === '' ? { name: 'transition', end: 'transitionend' } :
        false))),
      transform:
        divStyle.MozTransform === '' ? 'MozTransform' :
        (divStyle.MsTransform === '' ? 'MsTransform' :
        (divStyle.WebkitTransform === '' ? 'WebkitTransform' :
        (divStyle.OTransform === '' ? 'OTransform' :
        (divStyle.transform === '' ? 'transform' :
        false))))
    };
  support.transformProp = support.transform.name.replace(/([A-Z])/g, '-').toLowerCase();
  return support;
}());

With this library, you can use the following code:

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

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