Wie kann ich CSS-Animationen beim Herausfahren mit der Maus mithilfe von @keyframes umkehren?

So implementieren Sie eine umgekehrte Animation beim Herausfahren der Maus nach dem Hover

Im Webdesign spielen Animationen eine entscheidende Rolle bei der Verbesserung der Benutzererfahrung. Ein häufiges Szenario besteht darin, den Mauszeiger über ein Element zu bewegen, um eine Animation auszulösen, normalerweise eine Drehung. Das Umkehren der Animation beim Herausfahren der Maus kann sich jedoch als schwierig erweisen, insbesondere wenn die @keyframes von CSS3 verwendet werden.

Wenn man sich das bereitgestellte CSS-Beispiel ansieht, in dem sich das Element beim Schweben um 360 Grad dreht, besteht das Ziel darin, es wieder auf 0 zu drehen Grad auf Maus raus. Mit @keyframes-Animationen scheint der gewünschte Effekt nicht erreicht werden zu können.

Die Lösung liegt im Verständnis der Animationsrichtungseigenschaft. „To“ stellt den Endzustand der Animation dar, während „from“ den Startzustand angibt. Durch die Einbeziehung des Schlüsselworts „from“ in unsere @keyframes-Definitionen können wir die umgekehrte Animation erstellen:

@keyframes in {
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@keyframes out {
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

Zusätzlich kann die browserübergreifende Kompatibilität durch die Verwendung von Herstellerpräfixen sichergestellt werden:

@-webkit-keyframes in {
    ...
}

@-webkit-keyframes out {
    ...
}

Um die Animation weiter zu verbessern, ist es wichtig, die Animationsrichtungseigenschaft anzugeben:

.class {
    animation-direction: alternate;
}

Auf diese Weise wird die Die Animation geht nahtlos von „in“ nach „out“ über, wenn sich die Maus aus der Elementgrenze herausbewegt.

Die Implementierung dieses Ansatzes führt zu einer reibungslosen und effizienten umgekehrten Animation, die präzise auf Mausbewegungen reagiert. Hier ist eine Demonstration:

http://jsfiddle.net/JjHNG/35/

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Animationen beim Herausfahren mit der Maus mithilfe von @keyframes umkehren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!