Technologie

Wie setze ich alle Keyframes eines Effekts zurück und starte eine neue Animation?

Melden
  1. Einführung
  2. Keyframes und Animationen in CSS
  3. Keyframes über CSS zurücksetzen und neu starten
  4. Keyframes und Animationen mit JavaScript (Web Animations API)
  5. Animation mit Web Animations API zurücksetzen und neu starten
  6. Zusammenfassung

Einführung

Wenn du Animationen mit Keyframes in CSS oder JavaScript verwendest, kann es manchmal nötig sein, alle bisher gesetzten Keyframes eines Effekts zurückzusetzen, um eine neue Animation zu starten. Das ist besonders dann wichtig, wenn die Animation wiederholt oder mit neuen Parametern erneut abgespielt werden soll. Je nachdem, wie du die Animation implementiert hast – mit CSS oder JavaScript / Web Animations API – gibt es unterschiedliche Vorgehensweisen.

Keyframes und Animationen in CSS

CSS-Animationen werden üblicherweise mit der @keyframes-Regel definiert und mit Eigenschaften wie animation-name, animation-duration, animation-iteration-count etc. auf Elemente angewendet. Um eine laufende Animation zurückzusetzen und von vorne zu starten, kannst du die Animation vom Element entfernen und anschließend wieder hinzufügen oder die animation-Eigenschaft dynamisch ändern.

Keyframes über CSS zurücksetzen und neu starten

Da CSS keine direkte Möglichkeit bietet, einzelne Keyframes zu entfernen oder zurückzusetzen, setzt man meist so zurück, dass man die Animation "neu lädt". Das geschieht typischerweise so:

// Schritt 1: Animation vom Element entfernenelement.style.animation = none;// Schritt 2: Browser einen Moment Zeit geben, die Änderung zu registrierenelement.offsetHeight; // sogenannter reflow triggern// Schritt 3: Animation erneut setzenelement.style.animation = meineAnimation 2s ease-in-out forwards;

Der Trick mit element.offsetHeight oder void element.offsetWidth sorgt dafür, dass der Browser die Stiländerung verarbeitet und die Animation beim zweiten Setzen neu startet.

Keyframes und Animationen mit JavaScript (Web Animations API)

Wenn du Animationen mit der JavaScript Web Animations API erstellst, also etwa so:

let animation = element.animate( , { duration: 1000, iterations: 1});

Dann kannst du die Animation durch Methoden wie cancel() zurücksetzen und anschließend neu starten. Dabei entfernst du alle Keyframes der aktuellen Animation und definierst neue oder dieselbe Animation nochmal neu.

Animation mit Web Animations API zurücksetzen und neu starten

Im Beispiel:

// Animation abbrechen und zurücksetzenanimation.cancel();// Optional: Neue Animation mit gleichen oder anderen Keyframes startenanimation = element.animate( , { duration: 1000, iterations: 1});

Durch cancel() wird die Animation gestoppt und auf den Ausgangszustand zurückgesetzt. Danach kannst du eine neue Animation starten. Alternativ kannst du auch finish() verwenden, um das Animationsergebnis sofort anzuwenden oder pause() und play() um die Animation zu steuern.

Zusammenfassung

Das Zurücksetzen aller Keyframes eines Effekts und Neustarten der Animation hängt von der Technik ab, die du verwendest. Mit CSS musst du die Animation vom Element kurz entfernen und dann neu hinzufügen, um eine Neuerkennung der Keyframes zu erzwingen. Bei der Web Animations API kannst du durch cancel() die Animation löschen und anschließend eine neue Instanz anlegen. So kannst du effektiv alle vorherigen Keyframes "zurücksetzen" und eine neue Animation starten.

Falls du eine spezielle Bibliothek oder ein Framework einsetzt (z.B. GSAP, Anime.js), bieten diese meist eigene Methoden, um Animationen zu kontrollieren, zurückzusetzen und neu abzuspielen.

0
0 Kommentare