Wie kann ich CSS3-Animationen effizient und ohne Zeitüberschreitungen neu starten?

Neustart der CSS3-Animation: Enthüllung eines alternativen Ansatzes

Der Neustart von CSS3-Animationen kann eine Herausforderung darstellen, insbesondere wenn versucht wird, die Skalierung eines Elements wiederherzustellen und es wieder in seinen ursprünglichen Zustand zu animieren . Das Entfernen und erneute Einfügen eines Elements bietet zwar eine Problemumgehung, ist jedoch möglicherweise nicht die effizienteste Lösung.

Ein eleganterer Ansatz besteht darin, Reflow zu nutzen, um Änderungen anzuwenden, ohne auf Zeitüberschreitungen angewiesen zu sein. Die folgende JavaScript-Funktion demonstriert diese Technik:

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

In Verbindung mit dem folgenden CSS und HTML ermöglicht diese Funktion ein nahtloses Zurücksetzen der Animation beim Klicken auf:

#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; }
}

<div>

By Beim Auslösen eines Reflows wird die Animation ohne komplexe Verzögerungen oder Zeitsteuerung zurückgesetzt. Dieser Ansatz bietet eine saubere und effiziente Lösung für den Neustart jeder CSS3-Animation.

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