Reiniciar animaciones CSS3

Revivir animaciones CSS3 tras la interacción del usuario es una tarea común. Si bien eliminar y reinsertar el elemento animado puede parecer efectivo, introduce una complejidad innecesaria. Una solución más refinada surge al aprovechar el poder del reflujo para restablecer la animación sin problemas.

Reflujo, un proceso de reformateo y repintado de la estructura del documento, proporciona un mecanismo conveniente para alterar estilos sin interrumpir la línea de tiempo de la animación. Al establecer brevemente la propiedad de animación en "ninguna" y luego activar un reflujo, el navegador recibe una señal para ignorar cualquier animación en progreso. Esto permite que los cambios de estilo posteriores entren en vigor inmediatamente, reiniciando efectivamente la animación.

Para ilustrar, considere el siguiente fragmento de JavaScript:

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

Cuando se activa, esta función pausa la animación en el elemento 'animado', fuerza un repintado del navegador y luego restaura la propiedad de la animación a su estado original. Al evitar retrasos o encadenar asignaciones de animación, este enfoque simplifica el proceso de restablecimiento de la animación, lo que garantiza una experiencia visual fluida.