Wie kann ich den Abschluss von CSS3-Hover-Animationen erzwingen?

Abschluss von CSS3-Animationen beim Hover erzwingen

Beim Anwenden einer CSS3-Animation auf den :hover-Zustand stoppt die Animation beim Verlassen des Elements abrupt . Dieses Verhalten kann insbesondere bei Animationen unerwünscht sein, deren Ausführung eine bestimmte Anzahl von Iterationen erfordert. Um dieses Problem anzugehen, ziehen Sie die folgenden Strategien in Betracht:

Verwendung von JavaScript:

Die direkteste Lösung besteht darin, JavaScript zu verwenden, um den Abschluss der Animation zu erzwingen. Dies kann durch dynamisches Hinzufügen und Entfernen von Animationsklassen über Ereignis-Listener erreicht werden.

$(".element").hover(
  function() { $(this).addClass("animation-name"); },
  function() { $(this).removeClass("animation-name"); }
);

Verwendung von CSS-Keyframes:

Während es derzeit keine reine CSS-Lösung dafür gibt Um den Abschluss der Animation beim Hover direkt zu erzwingen, besteht eine Technik darin, einen Dummy-Keyframe zu erstellen, der über die Dauer der Hover-Animation hinausgeht.

@keyframes bounce {
  ... (Original animation keyframes) ...
  99% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}

Durch Erweitern Wenn Sie die Keyframe-Dauer geringfügig verkürzen, wird die Animation auch nach Beendigung des Hover-Status bis zum Abschluss fortgesetzt.

Potenzielle Einschränkungen:

Es ist wichtig zu beachten, dass das Erzwingen des Abschlusses der Animation zu Problemen führen kann in bestimmten Fällen visuelle Artefakte einführen. Wenn die Animation beispielsweise rotierende Elemente enthält, kann es zu abrupten Stopps oder Sprüngen kommen, wenn die Maus das Element verlässt.

Das obige ist der detaillierte Inhalt vonWie kann ich den Abschluss von CSS3-Hover-Animationen erzwingen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!