Umgekehrte Animation beim Herausfahren der Maus nach dem Bewegen des Mauszeigers
Beim Versuch, mithilfe von CSS-Animationen eine umgekehrte Animation beim Herausfahren der Maus zu erstellen, ist ein Problem aufgetreten . Lassen Sie uns das Problem untersuchen und eine optimale Lösung anbieten.
In Ihrem ursprünglichen Code haben Sie eine einfache CSS-Transformationsanimation mit einer „Rotate“-Eigenschaft verwendet, und die „In“- und „Out“-Keyframes mussten „to“ sein. Werte zur Definition der Drehung. Wenn Sie jedoch @keyframes-Animationen verwenden, müssen Sie sowohl „von“- als auch „bis“-Werte innerhalb der Keyframes angeben, um einen Übergangseffekt zu erzeugen.
Die optimale Lösung, die Ihren Bedarf an Iterationen und Animationen berücksichtigt, ist um die @keyframes-Regeln wie folgt zu überarbeiten:
@keyframe in { from: transform: rotate(0deg); to: transform: rotate(360deg); } @keyframe out { from: transform: rotate(360deg); to: transform: rotate(0deg); }
Mit diesem Code beginnt der „in“-Keyframe bei der Nulldrehung und geht zu einer 360-Grad-Drehung, während der Der „out“-Keyframe beginnt bei einer 360-Grad-Drehung und kehrt zur Nulldrehung zurück, wodurch der gewünschte umgekehrte Effekt beim Herausfahren der Maus entsteht.
Überlegungen zur Browserkompatibilität:
Bedenken Sie, dass CSS3 wird nicht überall vollständig umgesetzt. Um die browserübergreifende Kompatibilität sicherzustellen, müssen Sie möglicherweise unterschiedliche @keyframes-Syntax für verschiedene Browser verwenden:
Um den Code weiter zu verbessern, haben Sie kann auch die Animationsdauer und die Anzahl der Iterationen innerhalb der CSS-Regeln angeben.
Hier ist ein Codeausschnitt, der diese implementiert Verbesserungen:
.class { animation-name: out; animation-duration: 2s; } .class:hover { animation-name: in; animation-duration: 5s; animation-iteration-count: infinite; } @keyframes in { from: transform: rotate(0deg); to: transform: rotate(360deg); } @keyframes out { from: transform: rotate(360deg); to: transform: rotate(0deg); }
Das obige ist der detaillierte Inhalt vonWie erstelle ich eine umgekehrte CSS-Animation bei Mouseout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!