Heim >Web-Frontend >CSS-Tutorial >Wie kann ich sicherstellen, dass CSS3-Animationen beim Beenden des :hover-Elements vollständig sind?
CSS3-Animationen im :hover-Zustand bieten eine elegante Möglichkeit, Elementen Interaktivität hinzuzufügen. Eine Einschränkung besteht jedoch darin, dass die Animation abrupt abbricht, wenn der Cursor das Element verlässt. Hier erfahren Sie, wie Sie dieses Problem beheben und die Ausführung der Animation erzwingen können, und zwar ausschließlich über CSS:
Die bereitgestellte Animation „Bounce“ definiert eine Reihe von Keyframes, die einen Bounce-Effekt erzeugen. Um zu erzwingen, dass die Animation auch dann weiterläuft, wenn die Maus das Element verlässt, wenden wir eine clevere Technik an.
Hier ist ein modifiziertes Beispiel:
<style> @keyframes bounce { /* Same as before */ } .animated { animation: bounce 1s; } </style> <div class="box"> Hover me! </div>
$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){ $(this).removeClass("animated"); }) $(".box").hover(function(){ $(this).addClass("animated"); })
Bei diesem Ansatz wird die Animation auch dann weiter abgespielt, wenn der Cursor die .box verlässt Element. Besuchen Sie dieses aktualisierte Fiddle für eine Live-Demonstration: http://jsfiddle.net/u7vXT/1.
Das obige ist der detaillierte Inhalt vonWie kann ich sicherstellen, dass CSS3-Animationen beim Beenden des :hover-Elements vollständig sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!