Wie kann ich CSS3-Animationen effizient neu starten?

CSS3-Animationen neu starten: Vereinfacht

In der Welt der CSS3-Animationen kommt es nicht selten vor, dass Sie auf Szenarien stoßen, in denen Sie eine Animation neu starten müssen Nachfrage. Es gibt zwar verschiedene Ansätze, dies zu erreichen, doch einer, der Neugier geweckt hat, ist die Technik, das animierte Element zu entfernen und wieder einzufügen. Obwohl es funktional ist, lässt es Raum für Optimierung.

Eine optimierte Methode

Zum Glück gibt es eine elegantere und effizientere Möglichkeit, CSS3-Animationen neu zu starten: die Verwendung von Reflow, um eine Aktualisierung zu erzwingen zum Stil des Elements. Indem Sie den Animationsstil vorübergehend entfernen, einen Reflow auslösen und dann die Animation wiederherstellen, können Sie sie effektiv zurücksetzen, ohne unnötige Komplexität einzuführen.

Praktische Implementierung

Hier ist ein JavaScript Funktion, die diesen Ansatz demonstriert:

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

Begleitend zu dieser Funktion definieren Sie CSS-Regeln für das animierte Element und einen Keyframe Animation, wie unten dargestellt:

#animated {
  position: absolute;
  top: 70px;
  width: 50px; height: 50px;
  background-color: black;
  animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
  0% { left: 0; }
  50% { left: calc( 100% - 50px ); }
  100% { left: 0; }
}

Schließlich fügen Sie das HTML-Markup ein:

<div>

Dieser Ansatz startet die Animation effektiv neu, wenn Sie auf die Schaltfläche „Zurücksetzen“ klicken, ohne dass dies erforderlich ist komplexe Zeitüberschreitungen oder Elementmanipulation.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS3-Animationen effizient neu starten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!