CSS3-Animationen neu starten

CSS3-Animationen nach Benutzerinteraktion wiederzubeleben ist eine häufige Aufgabe. Auch wenn das Entfernen und erneute Einfügen des animierten Elements effektiv erscheinen mag, führt es zu unnötiger Komplexität. Eine verfeinerte Lösung ergibt sich, indem die Leistungsfähigkeit von Reflow genutzt wird, um die Animation nahtlos zurückzusetzen.

Reflow, ein Prozess der Neuformatierung und Neugestaltung der Dokumentstruktur, bietet einen praktischen Mechanismus zum Ändern von Stilen, ohne die Zeitleiste der Animation zu unterbrechen. Durch kurzes Setzen der Animationseigenschaft auf „none“ und anschließendes Auslösen eines Reflows erhält der Browser ein Signal, alle laufenden Animationen zu ignorieren. Dadurch können nachfolgende Stiländerungen sofort wirksam werden und die Animation effektiv neu gestartet werden.

Betrachten Sie zur Veranschaulichung das folgende JavaScript-Snippet:

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

Wenn diese Funktion ausgelöst wird, pausiert sie die Animation des „animierten“ Elements, erzwingt eine Browser-Neudarstellung und stellt dann die Animationseigenschaft in ihren ursprünglichen Zustand zurück. Durch die Vermeidung von Verzögerungen oder Verkettungen von Animationszuweisungen vereinfacht dieser Ansatz den Prozess zum Zurücksetzen der Animation und sorgt so für ein reibungsloses visuelles Erlebnis.