Redémarrage des animations CSS3

La relance des animations CSS3 lors de l'interaction de l'utilisateur est une tâche courante. Même si la suppression et la réinsertion de l’élément animé peuvent sembler efficaces, cela introduit une complexité inutile. Une solution plus raffinée émerge en exploitant la puissance de la redistribution pour réinitialiser de manière transparente l'animation.

La redistribution, un processus de reformatage et de repeinture de la structure du document, fournit un mécanisme pratique pour modifier les styles sans perturber la chronologie de l'animation. En définissant brièvement la propriété d'animation sur « aucun », puis en déclenchant une redistribution, le navigateur reçoit un signal pour ignorer toutes les animations en cours. Cela permet aux modifications de style ultérieures de prendre effet immédiatement, redémarrant efficacement l'animation.

Pour illustrer, considérons l'extrait JavaScript suivant :

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

Lorsqu'elle est déclenchée, cette fonction met en pause l'animation sur l'élément « animé », force une repeinture du navigateur, puis restaure la propriété d'animation à son état d'origine. En évitant les retards ou l'enchaînement des affectations d'animation, cette approche simplifie le processus de réinitialisation de l'animation, garantissant une expérience visuelle fluide.