Wie kann ich die CSS-Keyframes-Animation beim Herausziehen der Maus umkehren?

Animation beim Herausziehen der Maus nach dem Bewegen des Mauszeigers mithilfe von Keyframes umkehren

Sie suchen nach einer Lösung, um die Rotationsanimation beim Herausziehen der Maus nach dem Bewegen des Mauszeigers umzukehren Element. Während die Verwendung herkömmlicher CSS-Transformationen möglich ist, sind bei der Implementierung mit @keyframes-Animationen Probleme aufgetreten.

Die optimale Lösung besteht darin, sowohl die „to“- als auch die „from“-Werte innerhalb der Keyframes zu verwenden. Der korrigierte Code wäre:

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

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

Es ist jedoch wichtig, die Browserkompatibilität zu berücksichtigen. Obwohl CSS3 weitgehend unterstützt wird, wird für maximale Kompatibilität die Verwendung von Herstellerpräfixen empfohlen:

@-webkit-keyframes in { /* Safari, Chrome */
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@-webkit-keyframes out { /* Safari, Chrome */
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

@-moz-keyframes in { /* Firefox */
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@-moz-keyframes out { /* Firefox */
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

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

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

Das obige ist der detaillierte Inhalt vonWie kann ich die CSS-Keyframes-Animation beim Herausziehen der Maus umkehren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!