Können CSS3-:hover-Animationen gezwungen werden, ihren Zyklus nach dem Mouseout abzuschließen?

CSS3-Animation auf :hover; Die gesamte Animation erzwingen

In CSS3 ist eine gängige Animationstechnik die Verwendung von :hover, um eine Animation für ein Element auszulösen. Wenn der Cursor jedoch vom Element entfernt wird, stoppt die Animation abrupt.

Frage

Können CSS3-Animationen auf :hover gezwungen werden, den gesamten Animationszyklus fortzusetzen, selbst nachdem die Maus das Element verlässt? ?

Antwort

Leider kann CSS3 allein dies nicht leisten. Die einzige Lösung besteht darin, eine Kombination aus CSS und JavaScript zu verwenden.

JavaScript-Lösung

So erzielen Sie mit JavaScript das gewünschte Ergebnis:

• Fügen Sie die Animation hinzu als eine Klasse für das Element.
• Entfernen Sie die Animationsklasse nach der Animation wird beendet.

$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
  $(this).removeClass("animated")  
})

$(".box").hover(function(){
  $(this).addClass("animated");        
})

Dieser Ansatz stellt sicher, dass die Animation ihren gesamten Zyklus fortsetzt, unabhängig von der Position des Cursors auf dem Element.

Das obige ist der detaillierte Inhalt vonKönnen CSS3-:hover-Animationen gezwungen werden, ihren Zyklus nach dem Mouseout abzuschließen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!