Restarting CSS3 Animations: Is Reflow the Best Alternative to Element Removal?

Restarting CSS3 Animations: Improved Alternative to Element Removal

In the pursuit of restarting a CSS3 animation, an intriguing technique often employed involves removing the animated element from the document and reinserting its clone. While effective, this approach offers an opportunity for optimization.

A preferable method to achieve animation restart, as suggested by an anonymous expert, involves triggering a reflow. This can be accomplished simply by accessing the HTMLElement's height, as demonstrated below:

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

In this example, the animation is initially set to 'none', triggering the reset. Subsequently, a reflow is initiated by accessing the element's offsetHeight, which calculates and caches the element's size, thereby applying the animation reset. Finally, the 'null' value assigned to the animation style allows it to play again.

This reflow-based approach is both concise and efficient, surpassing the previous method in its simplicity and effectiveness.

The above is the detailed content of Restarting CSS3 Animations: Is Reflow the Best Alternative to Element Removal?. For more information, please follow other related articles on the PHP Chinese website!