Reiniciar animações CSS3

Reviver animações CSS3 após interação do usuário é uma tarefa comum. Embora remover e reinserir o elemento animado possa parecer eficaz, isso introduz uma complexidade desnecessária. Uma solução mais refinada surge aproveitando o poder do refluxo para redefinir perfeitamente a animação.

Reflow, um processo de reformatação e repintura da estrutura do documento, fornece um mecanismo conveniente para alterar estilos sem interromper a linha do tempo da animação. Ao definir brevemente a propriedade da animação como 'none' e, em seguida, acionar um refluxo, o navegador recebe um sinal para ignorar quaisquer animações em andamento. Isso permite que alterações de estilo subsequentes entrem em vigor imediatamente, reiniciando efetivamente a animação.

Para ilustrar, considere o seguinte trecho de JavaScript:

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

Quando acionada, esta função pausa a animação no elemento 'animado', força a repintura do navegador e, em seguida, restaura a propriedade da animação ao seu estado original. Ao evitar atrasos ou encadeamento de atribuições de animação, esta abordagem simplifica o processo de redefinição da animação, garantindo uma experiência visual tranquila.